<style>
.blue {
color: blue;
}
.red{
color: red;
}
</style>

> [name=講師｜Judy Shyu]

# 🚩表單
指引1.3：可調適成功準則1.3.1：資訊與關連性（A級）
## 🔰網頁中的表單設計，控制元件(如input、select、textarea等)應設置對應的文字標籤，並以 id 屬性建立與文字標籤的關連
🔗 [CodePen Bootstrap 表單元件範例](https://codepen.io/judyshyu/pen/OJdNJbZ?editors=1010)

<label for="inputLink">連結網址</label>
<input type="text" id="inputLink" name="link">


:::danger
__➤ 測試方式：__ 瀏覽器開發工具；NVDA 聚焦在控制元件上
:::

> 稽核評量碼
> HM1130112E 使用標籤組件將文字標籤與表單控制元件建立關連

---

指引3.3：輸入協助成功準則3.3.2：標籤或說明（A級）
## 🔰網頁中的表單設計，各項必填欄位均使用文字註明

<label for="inputLink">連結網址<emaria-label="必填">*</em></label>
<input type="text" id="inputLink" name="link" required>


:::danger
__➤ 測試方式：__ 瀏覽器開發工具；NVDA 聚焦在控制元件上
:::

> 稽核評量碼
> GN1330201E 提供文字描述以指明需填寫的必填欄位

## 🔰網頁中的表單設計有檢查機制，當使用者提交表單後，可完成檢查並將鍵盤焦點導向遺漏的必填欄位

<label for="inputLink">連結網址<em aria-label="必填">*</em></label>
<input type="text" id="inputLink" name="link" required>
<div class="invalid-feedback" role="alert">連結網址為必填</div>


:::danger
__➤ 測試方式：__ 送出表單並以 NVDA 確認能讀到提示的文字描述
:::
> 稽核評量碼
> GN2330300E 提供文字描述以指明未完成的必填欄位，並建立可以讓使用者跳到出錯之處的機制