使用button元素自定义别具风格的按钮

简介:
 我们都知道在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

    这样一来我们要制作带图片的按钮就变得非常的容易了,例如:
None.gif < button >< img  align ='absmiddle'  src ='/Emoticons/emnote.gif'>Sing Song </button >
将显示为:。

    带Mnemonic的Web页按钮:     
None.gif < button  accessKey ="B" ><u>B </u>otton </ button >
    ,当然这个不能自动执行,只能用Alt+B来focus它,要响应需要自己用JavaScript来控制。

    具有任意HTML内容的Button元素: 
    
    不过这种复杂的嵌入也有问题,虽然可以显示,不过内嵌元素的的事件却不能触发。

    不过BUTTON元素 不能在内嵌BUTTON元素,比如下例:
None.gif < button >
None.gif    Outer Button
None.gif     < button >
None.gif        Inner Button
None.gif     </ button >
None.gif </ button > 
    将显示为:
V
目录
相关文章
|
7月前
|
JavaScript 前端开发
12EasyUI 菜单与按钮- 创建分割按钮(Split Button)
12EasyUI 菜单与按钮- 创建分割按钮(Split Button)
45 0
|
5月前
|
索引
[Qt5&控件] 下拉框ComBoBox和层叠窗口StackedWidget控件组合使用
[Qt5&控件] 下拉框ComBoBox和层叠窗口StackedWidget控件组合使用
43 0
|
8月前
|
XML 前端开发 数据格式
SAP UI5 按钮的类型和背景色设置例子
SAP UI5 按钮的类型和背景色设置例子
43 0
el-dialog嵌套问题,第二个弹窗会被遮住的解决办法
el-dialog嵌套问题,第二个弹窗会被遮住的解决办法
693 0
MFC应用程序——标签控件_IP控件_时间控件_List Control控件_Tree Control控件_命令按钮_列表框_组合框_图片_滚动控件(下)
MFC应用程序——标签控件_IP控件_时间控件_List Control控件_Tree Control控件_命令按钮_列表框_组合框_图片_滚动控件
140 0
|
API Windows 容器
MFC应用程序——标签控件_IP控件_时间控件_List Control控件_Tree Control控件_命令按钮_列表框_组合框_图片_滚动控件(上)
MFC应用程序——标签控件_IP控件_时间控件_List Control控件_Tree Control控件_命令按钮_列表框_组合框_图片_滚动控件
163 0
MFC应用程序——标签控件_IP控件_时间控件_List Control控件_Tree Control控件_命令按钮_列表框_组合框_图片_滚动控件(上)
element-ui往表格插入图片、按钮、弹窗都可以
element-ui往表格插入图片、按钮、弹窗都可以
760 0
element-ui往表格插入图片、按钮、弹窗都可以
按钮与标签组件
按钮与标签组件
91 0
|
C#
【WPF】自定义形状的按钮Button
原文:【WPF】自定义形状的按钮Button 需求:做一个如下图所示的多边形按钮。 Points点从左上角(0, 0)点开始,顺时针绘制,最后回到原点完成封闭的图形。
1669 0
|
XML Android开发 数据格式