加入收藏 | 设为首页 | 会员中心 | 我要投稿 衡阳站长网 (https://www.0734zz.cn/)- 数据集成、设备管理、备份、数据加密、智能搜索!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – 两个输入的单个标签

发布时间:2020-12-26 11:35:39 所属栏目:资源 来源:网络整理
导读:我目前正在向表单添加一些日期输入.我有一个’开始日期’和’结束日期’输入,但只想为两个输入使用单个标签(‘日期’). 是否有可能做到这一点?可访问性问题有哪些? 我目前的想法是有一个标签’日期’,然后显示为屏幕阅读器的每个输入有两个隐藏标签.这是要

我目前正在向表单添加一些日期输入.我有一个’开始日期’和’结束日期’输入,但只想为两个输入使用单个标签(‘日期’).

是否有可能做到这一点?可访问性问题有哪些?

我目前的想法是有一个标签’日期’,然后显示为屏幕阅读器的每个输入有两个隐藏标签.这是要走的路吗?有没有大型网站做这种事情的例子(政府网站,如果可能的话)?

这是一个可能是政府机构用户的项目,因此对其遵守可访问性有严格的规定.

解决方法

在这种情况下,我认为最好的标记是将输入包装在字段集中,使用图例“日期”,使用两个输入的标签并隐藏标签:

HTML

<fieldset>
<legend>Dates</legend>
<label for="startdate">Start Date</label>
<input type="text" name="startdate" id="startdate" placeholder="Start Date">
<label for="enddate">End Date</label>
<input type="text" name="enddate" id="enddate" placeholder="End Date">
</fieldset>

CSS

fieldset {
  border: none;
}
label {
  margin-left: -999em;
}
input {
  display: block;
}

Fiddle here

另见:WCAG 2,H71: Providing a description for groups of form controls using fieldset and legend elements

(编辑:衡阳站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读