二维码
意见反馈

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>
亲自试一试

标签

在表单中使用 <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>
亲自试一试

如果需要设置标签右对齐,可以使用 .right 类:

实例

代码
预览
<label class="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>
亲自试一试

错误状态

使用 .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>
亲自试一试
Note 你需要使用 JavaScript 来更新用户输入的错误状态。