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>
<labelfor="adr">Label
<textarea rows="4" placeholder="Address" id= "adr"></textarea>
</label>
<labelfor="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>
<labelfor="adr">Label
<textarea rows="4" placeholder="Address" id= "adr"></textarea>
</label>
<labelfor="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 来更新用户输入的错误状态。 |
|---|