表单

# 表单 轻松创建拥有不同样式与布局的漂亮表单。 ## 用法 为了应用这个组件，需要添加 `.uk-form` 类到表单元素中。所有表单控件都被并排放置在下面这行。 ### 示例  注意 在这个例子中，我们使用了一个[按钮组件](http://iyunye.com/uikit/docs/button.html)中的按钮。当表单元素在较小的视口中堆叠时，只需要添加 [效果组件](../docs/utility.html) 中的 `data-uk-margin` 属性到它的父元素中，即可实现添加顶部margin。 ### Code ```

...

... ... ... ...

``` * * * ### 行 为一个 `<div>` 元素添加 `.uk-form-row` 用来放置表单控件。 #### 示例  #### Code ```

...

...

...

``` * * * ## 控件的状态 通过表单控件上反馈的状态，为用户提供基础信息。 ### 禁用 添加 `disabled` 属性到表单控件中，它的颜色会变淡，并禁止操作。 ### 示例  #### Code ``` ``` * * * ### 有效性状态 添加 `.uk-form-danger` 或 `.uk-form-success` 类到表单控件中，用于提示用户某个值是否通过有效性验证。 #### 示例  #### Code ``` ``` * * * ## 控件的修饰 ### 尺寸的调整 添加 `.uk-form-large` 或 `.uk-form-small` 类到 `<input>`, `<select>` 或 `<textarea>` 元素中使之变大或变小。 #### 示例  #### Code ``` ``` * * * ### 宽度的调整 添加 `.uk-form-width-large`, `.uk-form-width-medium`, `.uk-form-width-small` 或 `.uk-form-width-mini` 类到一个 `<input>`, `<select>` 或 `<textarea>` 元素中，调整它的宽度。 #### 示例  #### Code ``` ``` 你还可以在表单控件里使用 [网格组件](grid.html) 中的 `.uk-width-*` 类。这是非常有用的，如果你想让表单控件的宽度扩展填满它的父级容器的宽度。 #### 示例  #### Code ``` ``` * * * ### 白板表单 添加 `.uk-form-blank` 类使表单控件的样式极简化。 #### 示例  #### Code ``` ``` * * * ### 帮助文本 使用 `.uk-form-help-inline` 或 `.uk-form-help-block` 类，为表单控件添加行内的或者块级的帮助文本。 #### 示例  #### Code ``` ``` * * * ## 布局的调整 这里有两个可用的类可以用于布局调整： `.uk-form-stacked` and `.uk-form-horizontal`。它们都要求表单空间被放置在带有 `.uk-form-row` 类的容器中。 Label 必须添加 `.uk-form-label` 类，并把相应的空间放置在带有 `.uk-form-controls` 类的容器中。 ### Code ```

...

...

``` 注意 布局调整类同样可以用于 `<fieldset>` 元素中。这意味着如果你使用了多个fieldset，你可以为每个 fieldset设置不同的布局。 * * * ### 表单叠放 添加 `.uk-form-stacked` 类使label标签显示在控件上方。 #### 示例  * * * ### 水平放置表单 添加 `.uk-form-horizontal` 类使label标签和控件水平并排放置。 #### 示例  * * * ### 表单控件中的文本 如果你在表单控件中同时使用了文本与单选框或者文本与复选框，只需要添加 `.uk-form-controls-text` 类就能使文本适当地对齐。 #### Code ``` ``` * * * ### 表单控件中的垂直间距 如果你在表单控件中创建了段落，添加 `.uk-form-controls-condensed` 类可以减小段落间的间隔。 #### 示例  #### Code ``` ``` * * * ## 表单与网格 这个例子展示了如何用 [网格组件](../docs/grid.html) 空间表单。 ### 示例  ### Code ```

``` * * * ## 表单与图标 这个例子展示了怎么为表单添加 [图标](../docs/icon.html)。 ### 示例  ### Code ``` ``` * * * ## 表单增强 表单可以用 [表单增强组件](../docs/form-advanced.html) 进行扩展，以定义单选框与复选框的样式。