我们都知道在Web里面定义一个按钮,最常用的方法就是使用INPUT元素的type='button'。但在
HTML spec 4.0里,增加了一个BUTTON元素,并且IE4.0就已经开始支持<BUTTON>了。顾名思义,它也是用来定义一个Web页按钮的,可是它却和<input type='...'>大不相同。
BUTTON元素和INPUT元素最大区别是,BUTTON是一个容器(container)类型元素,它可以在内部包含合法的html代码,通过IE5.5提供的canHaveChildren和canHaveHTML属性,我们可以看到这两个属性都为 true。而INPUT元素不能在包含子元素和html代码,其canHaveChildren和canHaveHTML属性均为 false。
这样一来我们要制作带图片的按钮就变得非常的容易了,例如:
将显示为:。
带Mnemonic的Web页按钮:
,当然这个不能自动执行,只能用Alt+B来focus它,要响应需要自己用JavaScript来控制。
具有任意HTML内容的Button元素:
不过这种复杂的嵌入也有问题,虽然可以显示,不过内嵌元素的的事件却不能触发。
不过BUTTON元素 不能在内嵌BUTTON元素,比如下例:
将显示为:
BUTTON元素和INPUT元素最大区别是,BUTTON是一个容器(container)类型元素,它可以在内部包含合法的html代码,通过IE5.5提供的canHaveChildren和canHaveHTML属性,我们可以看到这两个属性都为 true。而INPUT元素不能在包含子元素和html代码,其canHaveChildren和canHaveHTML属性均为 false。
这样一来我们要制作带图片的按钮就变得非常的容易了,例如:
<
button
><
img
align
='absmiddle'
src
='/Emoticons/emnote.gif'>Sing Song
</button
>
带Mnemonic的Web页按钮:
<
button
accessKey
="B"
><u>B
</u>otton
</
button
>
具有任意HTML内容的Button元素:
不过这种复杂的嵌入也有问题,虽然可以显示,不过内嵌元素的的事件却不能触发。
不过BUTTON元素 不能在内嵌BUTTON元素,比如下例:
<
button
>
Outer Button
< button >
Inner Button
</ button >
</ button >
Outer Button
< button >
Inner Button
</ button >
</ button >
。
V