一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控性方面更加强大。

HTML 4.01规范的Forms部分指名表单有以下几种控制类型:buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object controls. 其中除了buttons/menus/object controls之外,都是由<input>完成。

我这里说的是<button>和<input>。

<button>和<input>
规范中指名:可以用<button>和<input>来做表单按扭。不同的按钮类型请参考这些元素的详细定义。要注意的是<button>比<input>支持更丰富的表现功能。

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

<button>比<input>更厉害的地方就在于它可以包含内容。它的值并不是写在value属性里,而是包含在标签中。 如:<button>OK</button>。<button>的起始标签和关闭标签都是必须的。这样你便获得了样 式化的主导权。

你可以这样写:<button><strong>OK</strong>, I do.</button>,甚至是插入图片:<button><img src="button.gif" alt="" />, it's great.</button>。有点类似于<input type="image">,但是显然强大多了。

最后要注意的是,被<button>包含的图片,不能使用热点地图,即不能<img src="foo.gif" usemap="..." />,这是不合法的。当然也不能再包含诸如input, select, textarea, label, button, form, fieldset, iframe,和isindex(不推荐使用)元素了。

非原创,来源网络。

BUTTON标签和INPUT标签的区别【转】的更多相关文章

  1. 表单相关标签之input标签

    用于搜集用户信息. <input type="text" name="fname" /> 标签属性 type 规定 input 元素的类型.输入字段 ...

  2. 在写移动端时,a标签或者input标签等 在手机上点击背后会有阴影的解决办法

    a,input{-webkit-tap-highlight-color:rgba(255,0,0,0);} 被背景设置成透明的就行了

  3. springMvc <form:form>标签 <form:input>标签需要注意的问题

    在用springMVC <form:form>表单时,喜欢报的错误如下所示: 错误的Controller层的代码如下: @RequestMapping(value = "test ...

  4. 使用textarea标签代替input标签可以实现输入框的大小调节,自动换行,滚动条显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. input 标签和a标签实现超链接的区别

    a 标签和 input 标签都可以做链接点击的.代码: ------------------------------------------------------------------------ ...

  6. 关于编辑器对<input>标签报错提示“表单输入没有相关label”的问题

    相信很多朋友在制作表单的时候,我们的编辑器会有下图的相关提示吧 我们发现虽然这样并不影响我们的正常使用,但是看着这样的报错提示总是很让人心烦,那么这到底是为什么呢? 其实,这是因为编辑器建议我们在使用 ...

  7. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  8. 表单相关标签之form标签

    表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textarea.fieldset.legend 和 label 元素以及其它块级元素 表单用 ...

  9. <button>标签与<input type="button">标签

    <script type="text/javascript" src="/jquery-1.11.3.min.js"></script> ...

随机推荐

  1. POJ 3522 Slim Span 最小生成树,暴力 难度:0

    kruskal思想,排序后暴力枚举从任意边开始能够组成的最小生成树 #include <cstdio> #include <algorithm> using namespace ...

  2. UVa 11375 - Matches

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  3. Redis系列-存储篇string主要操作函数小结

    通过上两篇的介绍,我们的redis服务器基本跑起来.db都具有最基本的CRUD功能,我们沿着这个脉络,开始学习redis丰富的数据结构之旅,当然先从最简单且常用的string开始. 1.新增 a)se ...

  4. IBatis.Net 表连接查询(五)

    IBatis.Net之多表查询: 一.定制实际对应类的方式 首先配置多表的测试数据库,IBatis.Net之Oracle表连接查询配置: 首先新建两张表如下: 为两张表建立外键: ALTER TABL ...

  5. localStorage

    length:唯一的属性,只读,用来获取storage内的键值对数量. key:根据index获取storage的键名 getItem:根据key获取storage内的对应value setItem: ...

  6. Java:String、StringBuffer和StringBuilder的区别

    1 String String:字符串常量,字符串长度不可变.Java中String是immutable(不可变)的. String类的包含如下定义: /** The value is used fo ...

  7. 编绎openssl杂记(window)

    Window 下 OpenSSL 编绎过程 1. 下载 ActivePerl-5.12.4.1205  , openssl-0.9.8 , 配置Perl环境变量 , 解压openssl-0.9.82. ...

  8. [开发笔记]-页面切图、CSS前端设计、JS

    这两天在学习页面的切图,样式设计,把学习过程中注意的地方记录下来. 一. input输入框点击时去掉外边框 一般在IE,firefox下,设置 border:0 none; 即可.但在chrome下, ...

  9. 神州通,我看行---K2用户交流会华南站

    主题:K2高级移动信息化解决方案DBToApp开发工具 嘉宾:神州通在线 张德阔 移动办公APP开发≠一般APP开发,你知道这几种企业管理移动APP开发模式吗? 原生APP开发模式Native 具有最 ...

  10. Tasklist and TaskKill

    C:\Users\Administrator>tasklist /? TASKLIST [/S system [/U username [/P [password]]]]         [/M ...