Foundation 表單
Foundation 表單
Foundation 表單控製會自動設置為全局樣式:
所有 <textarea>,
<select> 及 <input> 元素寬度都為 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>
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>
嘗試一下 »
標籤
在表單中使用 <label> 元素來設置標籤，標籤可以添加 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>
<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 類:
Fieldset
Foundation 渲染 <fieldset> 元素的樣式如下：
實例
<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>
<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>
<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 來更新用戶輸入的錯誤狀態。 |