Foundation 表单
Foundation 表单控制会自动设置为全局样式:
所有 <textarea>
, <select>
及 <input>
元素宽度都为 100%,且带有外边距、内边距、阴影喝鼠标移动效果。
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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 属性。用户在点击标签或输入域时获取输入框焦点:
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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>
元素的样式如下:
实例
1 2 3 4 5 6 7 8 9 10 11 | <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
类来设置错误的标签、输入框、文本框样式:
实例
1 2 3 4 5 6 7 8 9 | <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 来更新用户输入的错误状态。 |