button标签可包含什么标签(可以作为按钮使用的标签或元素有哪些?
button和input type=button的区别及注意事项
button标签
定义和用法
button标签定义一个按钮。
在button元素内部,您可以放置内容,比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。
button
控件与inputtype="button"相比,提供了更为强大的功能和更丰富的内容。button与
/button标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和
相关的文本,用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定type属性。InternetExplorer的默认类型是"button",而其他浏览器中(包括W3C规范)的默认值是"submit"。
浏览器支持
所有主流浏览器都支持button标签。
重要事项:
如果在HTML表单中使用button元素,不同的浏览器会提交不同的值。InternetExplorer将提交button
与button/之间的文本,而其他浏览器将提交value属性的内容。请在HTML表单中使用input元素来创建按钮。
注意事项
在使用button标签时很容易想当然的当成inputtype="button"使用,这很容易产生以下几点错误用法:
1、通过$('#customBtn').val()获取buttonid="customBtn"value="test"按钮/buttonvalue的值
在IE(IE内核)下这样用到得的是值是“按钮”,而不是“test”,非IE下得到的是“test”。参加上面标红的第一句话。
这一点要和inputtype="button"区分开。
通过这两种方式$('#customBtn').val(),$('#customBtn').attr('value')在不同浏览器的获得值,如下:
Browser/Value
$('#customBtn').val()
$('#customBtn').attr('value')
Firefox13.0
test
test
Chrome15.0
test
test
Opera11.61
test
test
Safari5.1.4
test
test
IE9.0
按钮
按钮
验证这一点可以在测试下面的代码
复制代码
代码如下:
head
metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/
scripttype="text/javascript"src="jquery-1.4.4.min.js"/script
scripttype="text/javascript"
$(function(){
$('#test1').click(function(){
alert($('#customBtn').attr('value'));
});
$('#test2').click(function(){
alert($('#customBtn').val());
});
});
/script
/head
body
buttonid="customBtn"value="test"按钮/button
inputtype="button"id="test1"value="getattr"/
inputtype="button"id="test2"value="getval"/
/body
/html
2、无意中把button标签放到了form标签中,你会发现点击这个button变成了提交,相当于inputtype="submit"/
这一点参见上面第二句标红的话就明白什么意思了。
不要把button标签当成form中的input元素。
验证这一点可以在测试下面的代码
复制代码
代码如下:
html
body
formaction=""
buttonbutton/button
inputtype="submit"value="inputsubmit"/
inputtype="button"value="inputbutton"/
/form
/body
/html

按钮标签button有哪些类型?分别表示什么含义
bdiNew允许您设置一段文本,使其脱离其父元素的文本方向设置。
markNew定义带有记号的文本。
meterNew定义度量衡。仅用于已知最大和最小值的度量。
progressNew定义运行中的任务进度(进程)。
rpNew定义不支持 ruby 元素的浏览器所显示的内容。
rtNew定义字符(中文注音或字符)的解释或发音。
rubyNew定义 ruby 注释(中文注音或字符)。
timeNew定义一个日期/时间
wbrNew规定在文本中的何处适合添加换行符。
datalistNew规定了 input 元素可能的选项列表。
keygenNew规定用于表单的密钥对生成器字段。
outputNew定义一个计算的结果
canvasNew通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。figcaptionNew定义一个 caption for a
figure element
figureNewfigure 标签用于对元素进行组合。
audioNew定义声音,比如音乐或其他音频流。
sourceNew定义media元素 (video 和 audio)的媒体资源。media
trackNew为媒体(video 和 audio)元素定义外部文本轨道。
videoNew定义一个音频或者视频
navNew定义导航链接
commandNew定义用户可能调用的命令(比如单选按钮、复选框或按钮)。
headerNew定义一个文档头部部分
footerNew定义一个文档底部
sectionNew定义了文档的某个区域
articleNew定义一个文章内容
asideNew定义其所处内容之外的内容。
detailsNew定义了用户可见的或者隐藏的需求的补充细节。
dialogNew定义一个对话框或者窗口
summaryNew定义一个可见的标题。 当用户点击标题时会显示出详细信息。
embedNew定义了一个容器,用来嵌入外部应用或者互动程序(插件)。
按钮怎么写
按钮的写法具体如下:
1、使用input标签
inputtype="button"value="保存"/
input标签用于搜集用户信息。
=根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
一个简单的HTML表单,包含两个文本输入框和一个提交按钮:
!DOCTYPE html
html
head
meta charset="utf-8"
titlebutton/title
/head
body
form action="form_action.asp" method="get"
First name: input type="text" name="fname" /
Last name: input type="text" name="lname" /
input type="submit" value="Submit" /
/form
/body
/html
输出结果:
点击重新加载
2、使用button标签
button保存/button
button标签定义一个按钮。在button元素内部,您可以放置内容,比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。
button控件与input type="button"相比,提供了更为强大的功能和更丰富的内容。button与/button标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
如果在?HTML 表单中使用button元素,不同的浏览器会提交不同的按钮值。请使用input
元素在HTML表单中创建按钮。
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
!DOCTYPE html
html
head
meta charset="utf-8"
titlebutton/title
/head
body
buttontype="button"ClickMe!/button
/body
/html
输出结果:
点击重新加载
按钮
按钮(按键)是一种常用的控制电器元件,是用来控制机械或程式的某些功能,或接通、断开控制电路,从而达到控制电动机或其他电气设备运行目的的一种开关。
BUTTON标签和INPUT标签的区别
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属性里,而是包含在标签中。 如:buttonOK/button。button的起始标签和关闭标签都是必须的。这样你便获得了样 式化的主导权。
你可以这样写:buttonstrongOK/strong, I do./button,甚至是插入图片:buttonimg 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 与 button 有什么区别
标签表现方面:input为单标签,button为双标签;
标签功能方面:button标签要比input的按钮功能更加强大,在button标签当中能够包含其他标签(还可以是图像标签),button标签的value值并不是其属性,而是标签的文本内容;
浏览器提交数据方面:如果在HTML表单中使用button元素,在前端向后台提交数据时,不同的浏览器会提交不同的值。IE7浏览器将提交button与/button之间的文本,而其他浏览器将提交value属性中的内容。
基于如上的原因,建议在实际开发当中,使用input元素来创建表单中的按钮。