标签,复选框和单选按钮

概述我的Web应用程序使用如下例所示的表单… First Name [____________]Last Name [____________]Gender () Male () Female 我使用的标记是…… <label for="firstName">First Name</label><input type="text" id="firstNam 我的Web应用程序使用如下例所示的表单…

First name      [____________]Last name       [____________]Gender          () Male  () Female

我使用的标记是……

<label for="firstname">First name</label><input type="text" ID="firstname" /><label for="lastname">Last name</label><input type="text" ID="lastname" /><label>Gender</label><fIEldset>  <legend>Gender</legend>  <input type="radio" name="sex" ID="sex-m" value="m">  <label for="sex-m">Male</label>  <input type="radio" name="sex" ID="sex-f" value="f">  <label for="sex-f">Female</label></fIEldset>

我有以下问题,我不知道如何解决……

>我希望将WHolE GROUP的单选按钮标记为任何其他字段(如上图所示),但没有任何内容可以将标签链接到(即没有任何内容用于“for”属性,因为组中的每个无线电都有它自己的标签仅用于单个单选按钮的值.)没有“for”属性的标签不会通过可访问性合规性.
>< legend> fIEldset的元素似乎复制了标签的功能.这真的有必要吗？

我曾考虑过设计< legend>标签看起来好像是一个标签,并且完全取消了单选按钮组的标签,但这对我来说似乎有些麻烦,并且还会在我的代码中引入复杂性(依赖于< label>元素来做)一些漂亮的验证消息标记和各种其他东西)

提前致谢.

解决方法 Ssollinger答案的第一部分是正确的：

代码应该是：

<label for="firstname">First name</label><input type="text" ID="firstname" /><label for="lastname">Last name</label><input type="text" ID="lastname" /><fIEldset>  <legend>Gender</legend>  <input type="radio" name="sex" ID="sex-m" value="m">  <label for="sex-m">Male</label>  <input type="radio" name="sex" ID="sex-f" value="f">  <label for="sex-f">Female</label></fIEldset>

当辅助技术击中男性单选按钮时,大多数将读作：“性别：男性单选按钮1中未选中.”

然后你可以在字段集,图例,标签和输入上使用CSS.如果内存服务正确,字段集可以是样式的熊,所以我可能最终添加一个< div>它：

<label for="firstname">First name</label><input type="text" ID="firstname" /><label for="lastname">Last name</label><input type="text" ID="lastname" /><fIEldset>  <legend>Gender</legend>  <div>  <input type="radio" name="sex" ID="sex-m" value="m">  <label for="sex-m">Male</label>  <input type="radio" name="sex" ID="sex-f" value="f">  <label for="sex-f">Female</label>  </div></fIEldset>

添加此< div>没有可访问性的含义.

就像在ssollinger的答案中的评论一样,你可以转储字段集和图例方法,但你需要构建所有内容以使其可访问,an example of a build out

总结

以上是内存溢出为你收集整理的标签,复选框和单选按钮全部内容，希望文章能够帮你解决标签,复选框和单选按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。