BUTTON和INPUT

转载 2007年09月30日 13:10:00

一句话概括主题:<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(不推荐使用)元素了。

 

input type为text和button的不对齐问题 以及 之间的小空格

今天实验室学弟问我 “怎么这个输入、搜索按钮怎么都对不齐啊” 就像这样子: 咦 怎么会 我看看 代码没毛病啊 同样的height、同样的line-height,各有一个width(复习一下,inpu...
  • MrZZhou
  • MrZZhou
  • 2017年05月25日 22:27
  • 2013

input标签和button放在一行写:inline元素的空白间隙问题

问题的缘由是因为我要写一个小组件,让一个input文本框和一个button按钮放在一行,类似如下的效果: 我的css设置如下:.same{ padding: 0; margin: 0...
  • zzl1243976730
  • zzl1243976730
  • 2016年09月25日 12:32
  • 3573

表单提交:button input submit 的区别

最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践。先给结论: 建议使用button[type=submit]来提交表单,而不是input...
  • yangjvn
  • yangjvn
  • 2015年08月27日 00:52
  • 6436

input与button输入框 间隙问题

发现问题 解决问题 水平缝隙 垂直缝隙发现问题在开发中经常会遇到搜索框组,即一个input输入框和一个button点击搜索框,由于浏览器的解析原因,我想知道但是我没有找到答案,会出现即使是同样的高度,...
  • realDE
  • realDE
  • 2017年07月03日 23:07
  • 1065

表单提交中的input、button、submit的区别

最近项目中用了很多的表单提交,发现input、button、submit甚至回车键都可以引发表单提交,下面将分别验证他们在使用中的区别。 1.input[type=submit] 我们直接...
  • ldc5306590
  • ldc5306590
  • 2017年01月12日 11:30
  • 4435

input、button、submit表单提交区别

最近项目中用了很多的表单提交,发现input、button、submit甚至回车键都可以引发表单提交,下面将分别验证他们在使用中的区别。1.input[type=submit]我们直接来看例子: 代码...
  • somehow1002
  • somehow1002
  • 2017年06月27日 17:48
  • 312

驱动之路三--------button驱动(input设备)

开发板:smdk6410 系统:Linux 按键是经常要用的,通过按键产生中断,可以处理不同的功能,键盘的输入就是这么一个原理, 键盘也可以作为一个字符设备去写,在 驱动之路二 中就详细阐述...
  • u010670794
  • u010670794
  • 2013年11月17日 00:36
  • 1469

自行编写代码解决 WTForm 无纯 Button 按钮的问题——input篇

在使用 Flask 框架的过程中,会时常使用到 WTForm 这个库。然而在使用中却发现,该库提供的 HTML 元素并不完整,在我们需要使用单纯的 HTML 按钮时,却发现库并不提供,那么我们只能自己...
  • tiwoo
  • tiwoo
  • 2015年05月25日 03:41
  • 713

input button的行高在FF下的显示问题

最近国外有开发者发现Firefox和Opera的一个BUG:无法改变按钮里文字的行高(包括input type=”sumbit”和HTML的button标签)。举个例子,对一个按钮使用以下样式: ...
  • bill200711022
  • bill200711022
  • 2012年09月07日 15:53
  • 4744

CSS 美化 input button 按钮

input、button可以通过CSS自定义外观,而checkbox radio则没办法通过CSS自定义样式。今天逛GOOGLE+的时候发现了一个利用CSS3伪元素:after来自定义checkbox...
  • yali1990515
  • yali1990515
  • 2015年12月22日 10:50
  • 14103
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:BUTTON和INPUT
举报原因:
原因补充:

(最多只允许输入30个字)