Creating 万博体育官网网址 Forms
万博体育官网网址 Form Controls

文本输入

这是HTML标记:

<标签=“名字”>名称:< /标签>
<输入id = "名称"type = " text " name = "文本框" >

匹配id值将标签与适当的表单控件因为id在每个页面必须是唯一的,只有一个标签可以联系到每一个独特的表单元素这意味着您不能为多个表单元素有一个标签此外,屏幕阅读器不支持多个标签相同的表单元素相关联。

请注意

使用标签的另一个好处是,用户可以点击标签本身设置集中的表单元素这是有用的一些与运动障碍,尤其是在选择小复选框和单选按钮你可以通过点击上面的“名称:”这个词集中设置为文本框点击相邻的标签提供了一个简单的方法来检查适当的标记形式。

文本区域


这是HTML标记:

“地址”<标签= >输入地址:< /标签> < br >
< textarea id = "地址" name = " addresstext " > < / >文本区域

复选框

选择您的比萨配料:


这是HTML标记:

<自定义字段>
<传奇>选择您的比萨配料:< /传奇>
<输入id =“火腿”类型=“复选框”名称= =“火腿”>“浇头”价值
火腿<标签=“火腿”> < /标签> < br >
<输入id =“意大利辣香肠”类型=“复选框”名称= =“意大利辣香肠”>“浇头”价值
<标签=“意大利辣香肠”>意大利辣香肠< /标签> < br >
<输入id = "蘑菇" type = "复选框" name =“浇头”价值= "蘑菇" >
蘑菇<标签= "蘑菇" > < /标签> < br >
<输入id =“橄榄”类型=“复选框”名称= =“橄榄”>“浇头”价值
<标签=“橄榄”>橄榄> < /标签
< /自定义字段>

<自定义字段>环绕整个分组复选框的<传奇>provides a description for the grouping在屏幕阅读器,传说文本通常是阅读每个控件的自定义字段,所以传说文本应该简短和描述性。

单选按钮

选择送货方式:

这是HTML标记:

<自定义字段>
<传奇>选择运输方法:< /传奇>
<输入id =“一夜之间”类型=“广播”名称= =“一夜之间”>“运输”价值
一夜之间<标签=“一夜之间”> < /标签> < br >
<输入id =“twoday”类型=“广播”名称=“运输”价值= " twoday " >
<标签= " twoday " >两天< /标签> < br >
<输入id =“地面”类型=“广播”名称= =“地面”>“运输”价值
地面地面<标签= " " > < /标签>
< /自定义字段>
请注意

Fieldset and legend should only be used to associate groups of controls when a higher level description (i.e., the legend) is necessary基本单一的复选框或单选按钮(如男性/女性性别)有意义的标签就不需要自定义字段和传奇嵌套的自定义字段通常应该避免。

选择菜单

这是HTML标记:

<标签= " favcity " >选择你最喜欢的城市? > < /标签
<选择id = " favcity " name = "选择" >
阿姆斯特丹<选项值= " 1 " > < /选项>
布宜诺斯艾利斯<选项值= " 2 " > < /选项>
德里<选项值= " 3 " > < /选项>
香港<选项值= " 4 " > < /选项>
伦敦<选项值= " 5 " > < /选项>
洛杉矶<选项值= " 6 " > < /选项>
莫斯科<选项值= " 7 " > < /选项>
孟买<选项值= " 8 " > < /选项>
纽约<选项值= " 9 " > < /选项>
圣保罗<选项值= " 10 " > < /选项>
东京<选项值=“十一”> < /选项>
< /选择>

进一步完善这个列表的可访问性,我们可以添加optgroup组的选项。

这是HTML标记:

<标签= " favcity2 " >选择你最喜欢的城市? > < /标签
<选择id = " favcity2 " name = " favcity2 " >
< optgroup label = "亚洲" >
德里<选项值= " 3 " > < /选项>
香港<选项值= " 4 " > < /选项>
孟买<选项值= " 8 " > < /选项>
东京<选项值=“十一”> < /选项>
< / optgroup >
< optgroup标签=“欧洲”>
阿姆斯特丹<选项值= " 1 " > < /选项>
伦敦<选项值= " 5 " > < /选项>
莫斯科<选项值= " 7 " > < /选项>
< / optgroup >
北美< optgroup label = " " >
洛杉矶<选项值= " 6 " > < /选项>
纽约<选项值= " 9 " > < /选项>
< / optgroup >
南美洲< optgroup label = " " >
布宜诺斯艾利斯<选项值= " 2 " > < /选项>
圣保罗<选项值= " 10 " > < /选项>
< / optgroup >
< /选择>

请注意,optgroup不完全支持一些用户代理和屏幕阅读器,所以它不应该依赖于当前至关重要的分类信息在这种情况下,optgroup不支持,它仅仅是忽略了不要混淆了标签的属性optgroup元素的标签元素他们非常不同的事情。

多个选择菜单允许用户从列表中选择一个以上的选项。

请注意

建议避免多个选择菜单。并不是所有的浏览器都提供了直观的键盘导航多个选择菜单很多用户不知道使用CTRL /命令或Shift +点击选择多个项目通常,一组复选框选项可以提供类似的,更多的万博体育官网网址功能。

按钮

对表单按钮(提交和重置输入元素和按钮元素),不需要额外的可访问性信息属性值输入按钮和嵌套的文本<按钮>元素将被读取屏幕阅读器访问按钮时这些必须从来没有是空。

这是HTML标记:

< input type = " submit " name = =“提交搜索”>“提交”价值
< input type = "重置" name = =“重置”>“重置”价值
<按钮> > < /按钮激活

因为复位按钮可以不经意间选择,有一些情况时应提供。

图像按钮

如果你使用一个图像按钮(< input type = "图像" >而不是一个标准的按钮,输入必须有合适的alt文本。

这是HTML标记:

< input type = "图像" name = " submitbutton "alt = "搜索"src = " submit.png " >

JavaScript跳菜单

因为这些类型的菜单激活菜单项更改时,这些菜单会造成键盘可访问性问题,因为你无法滚动列表中选择其中一个选项。

请注意

一些浏览器(Firefox)覆盖这些跳转菜单不激活键盘改变,但只有在你选择一个项目使用鼠标或按Enter如果使用键盘。

提供一个提交按钮分开选择激活当前选中的项的列表将允许全键盘可访问性