button标签可包含什么标签(可以作为按钮使用的标签或元素有哪些?

http://www.itjxue.com  2023-01-25 06:47  来源:未知  点击次数: 

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

按钮

按钮

验证这一点可以在测试下面的代码

复制代码

代码如下:

html

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元素来创建表单中的按钮。

(责任编辑:IT教学网)

更多

推荐CSS教程文章