BUTTON标签和INPUT标签的区别【转】
一句话概括主题:<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标签的区别【转】的更多相关文章
- 表单相关标签之input标签
用于搜集用户信息. <input type="text" name="fname" /> 标签属性 type 规定 input 元素的类型.输入字段 ...
- 在写移动端时,a标签或者input标签等 在手机上点击背后会有阴影的解决办法
a,input{-webkit-tap-highlight-color:rgba(255,0,0,0);} 被背景设置成透明的就行了
- springMvc <form:form>标签 <form:input>标签需要注意的问题
在用springMVC <form:form>表单时,喜欢报的错误如下所示: 错误的Controller层的代码如下: @RequestMapping(value = "test ...
- 使用textarea标签代替input标签可以实现输入框的大小调节,自动换行,滚动条显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- input 标签和a标签实现超链接的区别
a 标签和 input 标签都可以做链接点击的.代码: ------------------------------------------------------------------------ ...
- 关于编辑器对<input>标签报错提示“表单输入没有相关label”的问题
相信很多朋友在制作表单的时候,我们的编辑器会有下图的相关提示吧 我们发现虽然这样并不影响我们的正常使用,但是看着这样的报错提示总是很让人心烦,那么这到底是为什么呢? 其实,这是因为编辑器建议我们在使用 ...
- Dom,查找标签和操作标签
Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
- 表单相关标签之form标签
表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textarea.fieldset.legend 和 label 元素以及其它块级元素 表单用 ...
- <button>标签与<input type="button">标签
<script type="text/javascript" src="/jquery-1.11.3.min.js"></script> ...
随机推荐
- POJ 3522 Slim Span 最小生成树,暴力 难度:0
kruskal思想,排序后暴力枚举从任意边开始能够组成的最小生成树 #include <cstdio> #include <algorithm> using namespace ...
- UVa 11375 - Matches
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- Redis系列-存储篇string主要操作函数小结
通过上两篇的介绍,我们的redis服务器基本跑起来.db都具有最基本的CRUD功能,我们沿着这个脉络,开始学习redis丰富的数据结构之旅,当然先从最简单且常用的string开始. 1.新增 a)se ...
- IBatis.Net 表连接查询(五)
IBatis.Net之多表查询: 一.定制实际对应类的方式 首先配置多表的测试数据库,IBatis.Net之Oracle表连接查询配置: 首先新建两张表如下: 为两张表建立外键: ALTER TABL ...
- localStorage
length:唯一的属性,只读,用来获取storage内的键值对数量. key:根据index获取storage的键名 getItem:根据key获取storage内的对应value setItem: ...
- Java:String、StringBuffer和StringBuilder的区别
1 String String:字符串常量,字符串长度不可变.Java中String是immutable(不可变)的. String类的包含如下定义: /** The value is used fo ...
- 编绎openssl杂记(window)
Window 下 OpenSSL 编绎过程 1. 下载 ActivePerl-5.12.4.1205 , openssl-0.9.8 , 配置Perl环境变量 , 解压openssl-0.9.82. ...
- [开发笔记]-页面切图、CSS前端设计、JS
这两天在学习页面的切图,样式设计,把学习过程中注意的地方记录下来. 一. input输入框点击时去掉外边框 一般在IE,firefox下,设置 border:0 none; 即可.但在chrome下, ...
- 神州通,我看行---K2用户交流会华南站
主题:K2高级移动信息化解决方案DBToApp开发工具 嘉宾:神州通在线 张德阔 移动办公APP开发≠一般APP开发,你知道这几种企业管理移动APP开发模式吗? 原生APP开发模式Native 具有最 ...
- Tasklist and TaskKill
C:\Users\Administrator>tasklist /? TASKLIST [/S system [/U username [/P [password]]]] [/M ...