如何使用 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中文網其他相關文章！