# Foundation 表單 Foundation 表單控制會自動設置為全局樣式: 所有 `&lt;textarea&gt;`, `&lt;select&gt;` 及 `&lt;input&gt;` 元素寬度都為 100%，且帶有外邊距、內邊距、陰影喝鼠標移動效果。 ### 實例 ``` <form> ? Input: ? <input type="text" placeholder="Name"> ? Textarea: ? <textarea rows="4" placeholder="Address"></textarea> ? Select: ? <select> ??? <option>1</option> ??? <option>2</option> ??? <option>3</option> ??? <option>4</option> ? </select> </form> ``` ## 標簽 在表單中使用 `&lt;label&gt;` 元素來設置標簽，標簽可以添加 for 屬性和 id 屬性。用戶在點擊標簽或輸入域時獲取輸入框焦點： ### 實例 ``` <form> ? <label for="name">Input ??? <input type="text" placeholder="Name" id="name"> ? </label> ? <label for="adr">Label ??? <textarea rows="4" placeholder="Address" id="adr"></textarea> ? </label> ? <label for="num">Select ??? <select id="num"> ????? <option>1</option> ????? <option>2</option> ????? <option>3</option> ????? <option>4</option> ??? </select> ? </label> </form> ``` 如果需要設置標簽右對齊，可以使用 `.right` 類: ### 實例 ``` <label class="right"> ``` ## Fieldset Foundation 渲染 `&lt;fieldset&gt;` 元素的樣式如下： ### 實例 ``` <form> ? <fieldset> ??? <legend>Fieldset Legend</legend> ??? <label>Name ????? <input type="text" placeholder="First Name.."> ??? </label> ??? <label>Email ????? <input type="text" placeholder="Enter email.."> ??? </label> ? </fieldset> </form> ``` ## 錯誤狀態 使用 `.error` 類來設置錯誤的標簽、輸入框、文本框樣式: ### 實例 ``` <form> ? <label class="error">Error ??? <input type="text" placeholder="Name.."> ? </label> ? <small class="error">Wrong input</small> ? <textarea rows="4" placeholder="Address"></textarea> ? <small class="error">Wrong input</small> </form> ``` >  > 你需要使用 JavaScript 來更新用戶輸入的錯誤狀態。