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 来更新用户输入的错误状态。