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

目录

1. 简介
2. 表单的组成部分
3. 使用 HTML 的无障碍表单
4. 结论

---

介绍

表单是构建网站不可或缺的一部分。它们用于在用户提交详细信息时收集数据。表单对于用户提交注册表单、登录表单、订阅时事通讯或发送消息以接收反馈的交互非常重要。创建易于访问的表单对每个人都很重要，尤其是屏幕阅读器，可以毫无问题地填写表单。

---

表单的组成部分

表单由不同的组件组成，例如

• form：这是接受所有其他表单元素（如输入标签、提交按钮、文本区域、复选框和单选按钮）的容器

<form></form>

• input：这是接受用户详细信息的 HTML 元素。根据输入的目的提供输入标签；文本、数字、密码、电子邮件等

<form>
      <input type="text" />
      <input type="email" />
      <input type="password" />
      <input type="radio" />
      <input type="checkbox" />
      <input type="file" />
      <input type="range" />
      <input type="color" />
      <input type="date"/>
</form>

• label：此标签给出了填充输入的详细信息的轮廓。它与输入标签相关联。

<form>
<label for="email">Email</label>
<input type="email">

• textarea: this is an multi-line input tag that accept 524,288 characters by default except the maxlength attribute is set up to a value. It is used to accept reviews, messages and comments from the users

<form>
<label for="message">Message:</label>
<textarea>

• select: this element is for creating a dropdown in which the users are able to select one option by default or more options when the attribute multiple is being used.

<form>
<select>

• checkbox: this element allow users to select one or more options.

<form>
<label for="subscribe"></label>
<input type="checkbox">

• button: this tag will the users the opportunity to submit their details upon completion. These details are submitted to server.

<form>
<button type="submit">Submit</button>
</form>

---

使用 HTML 的可访问表单

• 包含语义标签

使用正确的语义标签，例如

、、、、和 <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form> <label for="name">Name</label> <input type="type"> </pre><div class="contentsignin">登录后复制</div></div> <ul> <li>Always use label in your forms</li> </ul> <p>This gives the screen readers access to input with ease. Using the for Attribute in label element must match the id of the input element.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form> <label for="username">Username:</label> <input type="text"> </pre><div class="contentsignin">登录后复制</div></div> <ul> <li>Proper use of Accessible Rich Internet Application (ARIA) attributes.</li> </ul> <p>Examples are aria-label, aria-labelledBy, aria-hidden, aria-describedBy, aria-required, aria-invalid, aria-placeholder, aria-expanded, aria-checked.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form> <button aria-label="add">+</button> </form> </pre><div class="contentsignin">登录后复制</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form> <h2> <p>❌ Don't over use them</p> </pre><div class="contentsignin">登录后复制</div></div> <ul> <li>Provide clear instructions</li> </ul> <p>This includes the guide before or while filling the form to outline the information that is relevant. it could be a hint inform of paragraph or a placeholder text.</p> <ul> <li>Provide error message.</li> </ul> <p>This is essential to users which notify them that an error has been made. The error message should be descriptive.</p> <ul> <li>Use HTML built-in validations in the forms</li> </ul> <p>Examples are required, maxlength, minlength,pattern,type,min and max.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form> <label for="username">Username:</label> <input type="text"> <pre class="brush:php;toolbar:false"><form> <label for="quantity">Quantity (1-10):</label> <input type="number"> <h2> Accessible forms with CSS </h2> </pre><div class="contentsignin">登录后复制</div></div></pre> <ul> <li><p>Make form responsive<br> Create forms that are accessible across devices.</p></li> <li><p>Provide focus inclined inputs<br> This allow users to navigate the form properly.<br> </p></li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">input:focus{ outline: 3px solid #000080; } </pre><div class="contentsignin">登录后复制</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">input:valid{ outline: 3px solid #000080; } </pre><div class="contentsignin">登录后复制</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">input:invalid{ outline: 2px solid red; } </pre><div class="contentsignin">登录后复制</div></div> <ul> <li>隐藏标签 如果您不需要视觉标签，请将其样式设置为视觉隐藏或类名称为 sr-only。</li> </ul> <h3> 结论 </h3> <p>我希望您已经确信使用 HTML 和 CSS 创建可访问表单的正确方法。下次再见，请在 X 和 Linkedin 上找我</p>

以上是如何使用 HTML 和 CSS 设计可访问的表单的详细内容。更多信息请关注PHP中文网其他相关文章！