一句话概括主题:<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. 互斥锁pthread_mutex_t的使用(转载)

    1. 互斥锁创建        有两种方法创建互斥锁,静态方式和动态方式.POSIX定义了一个宏PTHREAD_MUTEX_INITIALIZER来静态初始化互斥锁,方法如下: pthread_mut ...

  2. Jquery判断div是否显示

    $("#test").is(":hidden");//是否隐藏 $("#test").is(":visible");// ...

  3. PhpStorm注册码 key license

    User name: EMBRACE License key: ===== LICENSE BEGIN =====43136-1204201000002UsvSON704l"dILe1PVx ...

  4. Spark运行环境的安装

    scala-2.9.3:一种编程语言,下载地址:http://www.scala-lang.org/download/    spark-1.4.0:必须是编译好的Spark,如果下载的是Source ...

  5. 分布式一致性原理—BASE

    定义 BASE是BasicallyAvailable(基本可用).Soft state(软状态)和Eventually consistent(最终一致性)三个短语的简写,是由来自eBay的架构师Dan ...

  6. 第二周 PSP项目计划

    项目计划总结: 日期|任务 听课 编写程序 阅读相关书籍 网上查找资料   日总计 周一 2 1 2   5 周二     1    1 周三     2     2 周四 2 2     4 周五 ...

  7. Cocoapods的安装与使用

    一.安装 1.CocoaPods是用Ruby实现的,要想使用它首先需要有Ruby的环境.OS X系统默认已经可以运行Ruby了,因此我们只需执行以下命令: sudo gem install cocoa ...

  8. JVM-内存分配与回收策略

    简单介绍一下Java技术体系下的Java虚拟机内存分配与回收策略.  1.对象优先在Eden分配  大多数情况下,对象在新生代Eden区中分分配.当Eden区已没有足够空间进行分配时,虚拟机将发起一次 ...

  9. SimpleDateFormat()简单了解

    比如:SimpleDateFormat sdf1 = new  SimpleDateFormat("yyyy年MM天dd日 HH时mm分ss秒 一年中的第 D 天 一年中第w个星期 一月中第 ...

  10. 中文Ubuntu系统根目录文件夹名称变为英文

    Ubuntu中文安装后,家目录均为中文,如“下载” “文档”等等,在使用Shell时很不方便,可用如下方法将这些文件夹名称改回英文 1.使用命令 export LANG=en_US xdg-user- ...