如何使用 HTML 和 CSS 设计可访问的表单-css教程-PHP中文网

如何使用 HTML 和 CSS 设计可访问的表单

DDD

发布： 2025-01-09 15:01:32

原创

1196人浏览过

如何使用 html 和 css 设计可访问的表单

概述

表单是网站的核心组成部分，用于收集用户提交的数据。无论是注册、登录、订阅还是反馈，表单都扮演着至关重要的角色。构建易于访问的表单，特别是对辅助技术（如屏幕阅读器）友好，对所有用户都至关重要。

表单组件详解

表单由多种组件构成，例如：

<form></form> 标签: 这是所有其他表单元素的容器。

&lt;form&gt;&lt;/form&gt;

登录后复制

<input> 标签: 用于接收用户输入。根据用途，可设置不同的类型：文本、数字、密码、电子邮件等。

<input type="text">

登录后复制

<label></label> 标签: 为输入字段提供描述性标签，并通过 for 属性与 input 元素的 id 属性关联，增强可访问性。

<label for="email">电子邮件地址:</label>

登录后复制

<textarea></textarea> 标签: 用于多行文本输入，例如评论或留言。

<label for="message">留言:</label><textarea id="message"></textarea>

登录后复制

<select></select> 标签: 创建下拉列表，用户可从中选择一个或多个选项（使用 multiple 属性）。

<label for="country">国家/地区:</label>
<select id="country">
  <option value="us">美国</option>
  <option value="cn">中国</option>
</select>

登录后复制

复选框 (<input type="checkbox">): 允许用户选择一个或多个选项。

<input type="checkbox" id="subscribe">
<label for="subscribe">订阅</label>

登录后复制

按钮 (<button></button> 标签): 用于提交表单数据。

<button type="submit">提交</button>

登录后复制

使用HTML构建无障碍表单

语义化标签: 使用正确的语义化标签，例如 <form></form>、<label></label>、<input>、<textarea></textarea>、<select></select> 和 <button></button>。

<form>
  <label for="name">姓名:</label><input type="text" id="name">
  <label for="email">电子邮件:</label><input type="email" id="email">
</form>

登录后复制

必备<label></label>标签: 为所有输入字段提供 <label></label> 标签，并正确使用 for 属性。

<label for="username">用户名:</label><input type="text" id="username" required>

登录后复制

ARIA属性: 合理运用 ARIA 属性，例如 aria-label、aria-labelledby、aria-required 等，以增强表单的可访问性。避免过度使用。

<input type="text" aria-label="用户名" required>

登录后复制

清晰的说明和指引: 提供清晰的说明和指引，例如提示信息或占位符文本，帮助用户理解如何填写表单。
错误信息: 提供有意义的错误信息，指导用户纠正错误。

佳蓝在线销售系统(创业版) 佳蓝在线销售
1、对ASP内核代码进行DLL封装，从而大大提高了用户的访问速度和安全性；2、采用后台生成HTML网页的格式，使程序访问速度得到进一步的提升；3、用户可发展下级会员并在下级购买商品时获得差额利润；4、全新模板选择功能；5、后台增加磁盘绑定功能；6、后台增加库存查询功能；7、后台增加财务统计功能；8、后台面值类型批量设定；9、后台财务曲线报表显示；10、完善订单功能；11、对所有传输的字符串进行安全

0

查看详情

立即学习“前端免费学习笔记（深入）”；
HTML内置验证: 使用 HTML 内置验证功能，例如 required、maxlength、minlength、pattern 等，确保数据有效性。

<input type="number" min="1" max="10" required>

登录后复制

使用CSS增强表单可访问性

响应式设计: 确保表单在不同设备上都能良好显示。
焦点样式: 为获得焦点的输入字段设置清晰的焦点样式，方便用户浏览。

input:focus {
  outline: 3px solid #000080;
}

input:valid {
  outline: 3px solid #008000; /* 绿色表示有效 */
}

input:invalid {
  outline: 2px solid red; /* 红色表示无效 */
}

登录后复制