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 來更新用戶輸入的錯誤狀態。 |
|---|