`
流浪鱼
  • 浏览: 1682458 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

button和input的type为button时区别

    博客分类:
  • html
 
阅读更多

规范中指名:可以用<button>和<input>来做表单按扭。

大家都知道<input>可以这样用(实际上是一定要这样用):<input type="submit" value="OK" />,一定要这样闭合。而不是:<input type="submit" value="OK" ></input>。因为起始标签为必须,而关闭标签是禁止的

<button>比<input>更厉害的地方就在于它可以包含内容。它的值并不是写在value属性里,而是包含在标签中。如:<button>OK</button>。<button>的起始标签和关闭标签都是必须的。这样你便获得了样式化的主导权。
你可以这样写:<button><strong>提交</strong>, 按钮</button>,甚至是插入图片:<button><img src="zbx.gif" alt="中百信" />, 10年</button>。

当然button不是所有内容都可以放的,下面是不允许放入的:

input, select, textarea, label, button, form, fieldset, iframe

例子:

<button><img src="log.jpg" alt="" />10年</button>


  • 大小: 4.1 KB
分享到:
评论

相关推荐

    button和input type=button的区别及注意事项

    在HTML中,`&lt;button&gt;`和`&lt;input type="button"&gt;`都是用于创建按钮的元素,但它们之间存在一些关键的区别。理解这些差异对于编写兼容各种浏览器和提供良好用户体验的网页至关重要。 首先,`&lt;button&gt;`标签允许在按钮...

    如何将input type=file显示的浏览变成英文的

    通过上述步骤,我们可以轻松地将`&lt;input type="file"&gt;`的默认“浏览”按钮替换为英文的“Browse”,并且将选中的文件路径显示在一个自定义的文本输入框中。这对于需要统一界面语言的应用场景非常有用。

    input、button的不同type值在ajax提交表单时导致的陷阱

    在前端开发中,我们经常遇到一些看似简单却隐藏着危险的陷阱,这篇文章就讲解了在AJAX提交表单时,input和button的不同type值可能导致的陷阱。 首先,让我们来了解一下input和button的type属性。input标签的type...

    Android-解决在webview中input标签type="file"不能使用的问题

    然而,在实际使用中,我们可能会遇到一些问题,比如在WebView中使用`&lt;input type="file"&gt;`标签时,用户无法选择本地文件。这个现象主要是由于Android的安全机制和权限控制导致的。本文将详细讲解如何解决这个问题。 ...

    submit和button的区别

    在HTML表单中,`submit`和`button`都是用于创建按钮的元素,但它们有着不同的功能和使用场景。理解这两者的区别对于构建交互式的Web应用程序至关重要。 首先,`submit`是一个特殊的`button`类型,它默认具有提交...

    html中submit和button的区别

    在探讨HTML中`submit`和`button`的区别之前,我们首先需要明确这两个元素的基本概念以及它们在网页设计和开发中的作用。HTML,全称为HyperText Markup Language,是用于创建网页的标准标记语言。在HTML中,`&lt;input&gt;`...

    BUTTON和INPUT的区别

    ### BUTTON和INPUT的区别 在网页开发中,`&lt;button&gt;` 和 `&lt;input&gt;` 是两种常见的用于创建用户交互元素的HTML标签。尽管它们都能实现按钮的功能,但在实际应用中却有着本质的区别。 #### HTML4.01规范中的表单控件 ...

    JS中type="button"和type="submit"的区别

    当用户点击这个类型的按钮时,表单会立刻被提交,并且表单中的所有具有`name`属性的输入元素(如`input`、`button`、`select`等)会被转化为键值对并发送到服务器。值得注意的是,`type="submit"`按钮本身并不会作为...

    INPUT的TYPE用法

    &lt;input type="text" name="yourname" size="30" maxlength="20" value="默认为30宽,限制为20"&gt; &lt;input type="text" name="yourname" size="30" maxlength="20" readonly value="只可阅读"&gt; ``` ### 2. `...

    ASP.net开发经典button样式

    Button控件是一个服务器控件,它在客户端表现为HTML的`&lt;input type="submit"&gt;`或`&lt;input type="button"&gt;`元素。默认情况下,Button控件的样式相对简单,但我们可以对其进行自定义,以实现更精致的设计。 1. **基本...

    HTML5&CSS3网页制作:Input元素的type属性.pptx

    - 语法:`&lt;input type="button" /&gt;` - 常用属性:`name`(按钮名),`value`(按钮显示文本),`onmousedown`,`onmouseup`,`onclick`(事件处理函数)。 6. **提交按钮(submit)** - 描述:用于提交表单数据到...

    IE6/7下多种方法移除button、input 默认边框和去掉焦点线

    一、去掉边框: ...通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签,然后将样式写在这个标签上,并且把button和input的默认样式都去除掉。 实现方式一:设置CSS: 复制代码

    用jquery设置按钮的disabled属性的实现代码

    input type=’button’ id=’test’ value=’disabled’&gt; 在jquery中可以使用attr()函数修改按钮的disable属性 $(“#test”).attr(‘disabled’,false); jquery 控制button的disabled属性 代码如下: $(‘#button...

    button没写type=button会导致点击时提交

    - 使用`&lt;button&gt;`元素而不是`&lt;input type="button"&gt;`,因为`&lt;button&gt;`可以包含HTML内容,提供更好的可访问性和语义化。 - 对于JavaScript控制的按钮,始终指定`type="button"`,避免意外的表单提交。 - 避免在`...

    web开发中常用的input事件汇总

    &lt;INPUT onclick="document.all.WebBrowser.ExecWB(4,1)" type="button" value="另存为" name="Button2"&gt; ``` 该代码实现了“另存为”功能,允许用户保存当前页面到本地计算机上。通过`ExecWB()`的参数设定,可以...

    Uniapp 各类 button按钮

    在 UniApp 开发框架中,Button 组件扮演着同样的角色,提供了丰富的样式和交互功能,支持全端(包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序等)应用的开发。本篇将深入探讨 UniApp 中的 Button ...

    ajaxfileupload.js结合input[type=file]无刷新上传

    总的来说,结合`ajaxfileupload.js`和`input[type=file]`,我们可以轻松实现无刷新的文件上传功能。这极大地提高了用户体验,但同时也需要注意安全性和性能优化。记得根据项目需求和后端框架调整服务器端的处理逻辑...

    漂亮的button样式

    一个基本的HTML按钮元素 `&lt;button&gt;` 或 `&lt;input type="button"&gt;` 可以通过CSS来定制外观。例如,我们可以设置按钮的尺寸、颜色、字体、边框和背景等属性,如: ```css button { width: 150px; height: 40px; ...

    input 标签的属性

    &lt;input type="text" name="yourname" size="30" maxlength="20" value="初始宽度为30,最大长度为20"&gt; 只读模式: &lt;input type="text" name="yourname" size="30" maxlength="20" readonly value="只读状态"&gt; ...

Global site tag (gtag.js) - Google Analytics