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"
/>, it‘s great.</button>。有点类似于<input
type="image">,但是显然强大多了。

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

非原创,来源网络。

时间: 2024-12-11 13:49:12

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

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>textarea输入框</title> </head> <body> <textarea name="" id="" cols="30" rows="10&q

html之input标签和form标签

input标签 input标签是自己闭合的 <input /> input系列有checkbox.redio.password.button.file等 1.type='text' 和type='password' <input type='text' /> type='text' 和type='password' 用户名:<input type="text"/> <br/><br/> 密  码:<input type=

【整合】input标签JS改变Value事件处理方法

某人需要在时间控件给文本框赋值时,触发事件函数.实现的效果: 1.文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件.阻塞在于失去焦点后才触发(输入过程中不触发事件) 2.通过JS方法修改值,修改后触发事件.重点阻塞在于此(JS赋值要触发) 最终采用方案: 1.IE(IE8及以下)下使用onpropertychange实现JS赋值后触发事件 2.需求是手工输入结束后才触发事件,避免在文本框实时输入文字的时候也因为onpropertychange触发事件,在trriger之前判断当前焦

input标签的监听事件

监听事件的触发是完成交互的一个重要组成部分,现将input标签的监听事件整理如下. onfocus         当input 获取到焦点时触发. onblur            当input失去以获取到焦点时触发. 1.1  onchange      当input失去焦点并且它的value值发生变化时触发. 1.2  onpropertychange    只要当前对象属性发生改变,都会触发事件,IE专属(6.7.8). onkeydown   在 input中有键按住的时候触发事件.

表单提交:button input submit 的区别

http://harttle.com/2015/08/03/form-submit.html 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践.先给结论: 建议使用button[type=submit]来提交表单,而不是input: 只有单行文本控件时,回车会引发表单提交: 通过onsubmit事件可阻止表单提交. input[type=submit] 这是最常见的提交方式.不多说了,看图: 图中可以看到点击提交按钮后的URL是/?key

button 与 input submit的区别

在IE中,button标签与input button有近乎相同的行为,如果不为它指定脚本的话,它什么也不做.在非IE中,button与input submit有相近的行为,会提交表单.如果在IE中为button指定type=submit,则其表现也会与input submit相近. 不过当button具有提交行为时(包括在非IE中什么也不指定的情况和在IE中指定了type=submit的情况),它还是与input submit有着很有意思的区别:一个form中有两个这样的button,在提交时只

input标签不能设置height

首先input是内联标签(inline) inline元素设置width.height属性无效 可以通过设置display:inline-block ,则内联标签可以设置width和height,但是设置了如果还无效,那么 浏览器不同解决办法不同: <style> input[type=button] { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:button; /* Safari 和

HTML简单登录和注册页面及input标签诠释

今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标记语言.HTML 标签是由尖括号包围的关键词,比如 <html>.HTML 标签通常是成对出现的,比如 <b> 和 </b>: <html> 与 </html> 之间的文本描述网页: <body> 与 </body> 之间的文

angular input标签只能单向传递数据的问题

angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%;margin-top: 45px " ng-init = "init()"> <ion-pane> <ion-content zooming = "true" class = "no-header"> <