# 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](https://box.kancloud.cn/2015-12-12_566b901025f8f.jpg)
> 你需要使用 JavaScript 来更新用户输入的错误状态。
- Foundation 入门
- Foundation 5 简介
- Foundation 起步
- Foundation 文本
- Foundation 表格
- Foundation 按钮
- Foundation 按钮组
- Foundation 图标
- Foundation 标签
- Foundation 提醒框
- Foundation 进度条
- Foundation 面板
- Foundation 图片
- Foundation 下拉菜单
- Foundation 折叠列表
- Foundation 列表
- Foundation 选项卡
- Foundation 分页
- Foundation 价格表
- Foundation 顶部导航栏
- Foundation 侧边栏
- Foundation 滑动导航(Off-Canvas)
- Foundation 麦哲伦(Magellan)导航
- Foundation 表单
- Foundation 输入框尺寸
- Foundation 开关
- Foundation 滑块
- Foundation 提示框
- Foundation 模态框
- Foundation Joyride
- Foundation 均衡器(Equalizer)
- Foundation 网格
- Foundation 网格系统
- Foundation 网格 - 水平堆叠
- Foundation 网格 - 小型设备
- Foundation 网格 - 中型设备
- Foundation 网格 - 大型设备
- Foundation 块状网格
- Foundation 网格实例
- Foundation 参考手册
- Foundation 图标参考手册
- Foundation CSS 参考手册
- Foundation CSS 可见性