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

How to Design Accessible Forms with HTML and CSS

介绍

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

表单的组成部分

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

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>

</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>

</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>

<p>我希望您已经确信使用 HTML 和 CSS 创建可访问表单的正确方法。下次再见，请在 X 和 Linkedin 上找我</p>

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