表单／Form

# 表单／Form

<p class="uk-text-lead">轻松创建各种样式和布局的美观表单。</p>

## Usage-用法

向 `<form>` 元素内的表单控件上添加以下 class 来定义表单组件。

| Class          | 描述                                                                |
|:---------------|:---------------------------------------------------------------------------|
| `.uk-input`    | 将这个class添加到 `<input>` 元素。                                      |
| `.uk-select`   | 将这个class添加到 `<select>` 元素。                                     |
| `.uk-textarea` | 将这个class添加到 `<textarea>` 元素。                                  |
| `.uk-radio`    | 将这个class添加到 `<input type="radio">` 元素来创建单选按钮。 |
| `.uk-checkbox` | 将这个class添加到 `<input type="checkbox">` 元素来创建复选框。 |
| `.uk-range`    | 将这个class添加到 `<input type="range">` 元素来创建滑动条表单。   |

```html
<form>
    <select class="uk-select">
        <option></option>
        <option></option>
    </select>
    <textarea class="uk-textarea"></textarea>
    <input class="uk-radio" type="radio">
    <input class="uk-checkbox" type="checkbox">
    <input class="uk-range" type="range">
</form>
```

将 `.uk-fieldset` class类添加到 `<fieldset>` 元素，将 `.uk-legend` class类添加到 `<legend>` 元素，以定义控件组和表单说明。

```example
<form>
    <fieldset class="uk-fieldset">

        <legend class="uk-legend">Legend</legend>

        <div class="uk-margin">
            <input class="uk-input" type="text" placeholder="Input">
        </div>

        <div class="uk-margin">
            <select class="uk-select">
                <option>Option 01</option>
                <option>Option 02</option>
            </select>
        </div>

        <div class="uk-margin">
            <textarea class="uk-textarea" rows="5" placeholder="Textarea"></textarea>
        </div>

        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label><input class="uk-radio" type="radio" name="radio2" checked> A</label>
            <label><input class="uk-radio" type="radio" name="radio2"> B</label>
        </div>

        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label><input class="uk-checkbox" type="checkbox" checked> A</label>
            <label><input class="uk-checkbox" type="checkbox"> B</label>
        </div>

        <div class="uk-margin">
            <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
        </div>

    </fieldset>
</form>
```

***

## States modifiers-状态修饰

使用以下 class 为用户提供基础的反馈信息状态。

| Class              | 描述                                                        |
|:-------------------|:-------------------------------------------------------------------|
| `.uk-form-danger`  | 添加到通知消息，表示验证未通过 |
| `.uk-form-success` | 验证已通过。     |

在表单控件上添加 `disabled` 属性，来淡化表单的视觉效果。

```example
<div class="uk-margin">
    <input class="uk-input uk-form-danger uk-form-width-medium" type="text" placeholder="form-danger" value="form-danger">
</div>

<div class="uk-margin">
    <input class="uk-input uk-form-success uk-form-width-medium" type="text" placeholder="form-success" value="form-success">
</div>

<div class="uk-margin">
    <input class="uk-input uk-form-width-medium" type="text" placeholder="disabled" value="disabled" disabled>
</div>
```

***

## Size modifiers-尺寸

添加以下class之一到 `<input>`, `<select>` 或 `<textarea>` 元素来修改其大小。

| Class            | 描述                                 |
|:-----------------|:--------------------------------------------|
| `.uk-form-large` | 使表单元素更大  |
| `.uk-form-small` | 使表单元素变小 |

```example
<form>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="Large">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" placeholder="Default">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Small">
    </div>

</form>
```

***

## Width modifiers-宽度修饰符

添加以下class之一到 `<input>`, `<select>` 或 `<textarea>` 元素，以调整它们宽度。

| Class                   | 描述                 |
|:------------------------|:----------------------------|
| `.uk-form-width-large`  | 应用 _500px_ 宽度。 |
| `.uk-form-width-medium` | 应用 _200px_ 宽度。 |
| `.uk-form-width-small`  | 应用 _130px_ 宽度。 |
| `.uk-form-width-xsmall` | 应用 _40px_ 宽度。  |

```example
<form>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-large" type="text" placeholder="Large">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" placeholder="Medium">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-small" type="text" placeholder="Small">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-xsmall" type="text" placeholder="X-Small">
    </div>

</form>
```

还可以在表单控件上使用 [Width 组件](width.md) 中的 `.uk-width-*` class设置宽度。

```example
<form>
    <input class="uk-input uk-width-1-2" type="text" placeholder="uk-width-1-2">
</form>
```

***

## Blank modifier-空白修饰符

添加 `.uk-form-blank` class使表单控件的样式极简化。

```example
<form>
    <input class="uk-input uk-form-blank uk-form-width-medium" type="text" placeholder="Form blank">
</form>
```

***

## Layout-布局

定义标签和控件，将堆叠或水平布局应用于表单元素。可以将布局修饰符添加到任何父元素（例如 `<fieldset>` 元素）。这使每个表单控件拥有不同的表单布局。

| Class                 | 描述                                                 |
|:----------------------|:------------------------------------------------------------|
| `.uk-form-stacked`    | label显示在控件上方        |
| `.uk-form-horizontal` | label与控件在同一行 |
| `.uk-form-label`      | 定义表单的 label                       |
| `.uk-form-controls`   | 定义表单控件 |

```html
<form class="uk-form-stacked">
    <div>
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">...</div>
    </div>
    <div>
        <div class="uk-form-label"></div>
        <div class="uk-form-controls">...</div>
    </div>
</form>
```

```example
<form class="uk-form-stacked">

    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">Text</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text...">
        </div>
    </div>

    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-select">Select</label>
        <div class="uk-form-controls">
            <select class="uk-select" id="form-stacked-select">
                <option>Option 01</option>
                <option>Option 02</option>
            </select>
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-form-label">Radio</div>
        <div class="uk-form-controls">
            <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
            <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
        </div>
    </div>

</form>
```

***

### 水平表单

使用 `.uk-form-controls-text` class 可以更好地将复选框和单选按钮与文本对齐水平线上。

```html
<form class="uk-form-horizontal">
    <div>
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">...</div>
    </div>
    <div>
        <div class="uk-form-label"></div>
        <div class="uk-form-controls uk-form-controls-text">...</div>
    </div>
</form>
```

```example
<form class="uk-form-horizontal uk-margin-large">

    <div class="uk-margin">
        <label class="uk-form-label" for="form-horizontal-text">Text</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-horizontal-text" type="text" placeholder="Some text...">
        </div>
    </div>

    <div class="uk-margin">
        <label class="uk-form-label" for="form-horizontal-select">Select</label>
        <div class="uk-form-controls">
            <select class="uk-select" id="form-horizontal-select">
                <option>Option 01</option>
                <option>Option 02</option>
            </select>
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-form-label">Radio</div>
        <div class="uk-form-controls uk-form-controls-text">
            <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
            <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
        </div>
    </div>

</form>
```

***

## Form and icons-表单与图标

在表单中使用 [Icon 组件](icon.md) 中的图标。将 `.uk-form-icon` class类添加到 `<span>` 元素。将 [Utility 组件](utility.md#inline)中的 `.uk-inline` 类添加到围绕这两者容器元素中，将图标与 `<input>` 元素编组。在标记中，图标必须排在第一位。图标默认居于在表单左侧，如果要将图标放在表单右侧，请添加 `.uk-form-icon-flip`类。

```html
<div class="uk-inline">
    <span class="uk-form-icon" uk-icon="icon: user"></span>
    <input class="uk-input">
</div>
```

```example
<form>

    <div class="uk-margin">
        <div class="uk-inline">
            <span class="uk-form-icon" uk-icon="icon: user"></span>
            <input class="uk-input" type="text">
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-inline">
            <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
            <input class="uk-input" type="text">
        </div>
    </div>

</form>
```

***

### 可点击的图标

要启动某种操作，比如打开模态对话框来选择图片或者链接，可以使用 `<a>` 或 `<button>` 元素来创建图标。

```html
<div class="uk-inline">
    <a class="uk-form-icon uk-form-icon-flip" href="" uk-icon="icon: user"></a>
    <input class="uk-input">
</div>
```

```example
<form>

    <div class="uk-margin">
        <div class="uk-inline">
            <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
            <input class="uk-input" type="text">
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-inline">
            <a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="icon: link"></a>
            <input class="uk-input" type="text">
        </div>
    </div>

</form>
```

***

## Form and grid-表单和网格

您还可以结合使用 [Grid](grid.md) 和 [Width](width.md) 组件来定义表单的布局。

```example
<form class="uk-grid-small" uk-grid>
    <div class="uk-width-1-1">
        <input class="uk-input" type="text" placeholder="100">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50">
    </div>
    <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25">
    </div>
    <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50">
    </div>
</form>
```

***

## Custom controls-自定义控件

要用您自己的HTML代码（例如按钮或文本）来替换文本输入表单或者选择表单，请将 `uk-form-custom` 属性添加到容器元素。

### 文件

使用按钮或文本作为文件上传表单。

```html
<div uk-form-custom>
    <input type="file">
    <button type="button"></button>
</div>
```

```example
<form>

    <div class="uk-margin">
        <div uk-form-custom>
            <input type="file">
            <button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
        </div>
    </div>

    <div class="uk-margin">
        <span class="uk-text-middle">这是一段文字</span>
        <div uk-form-custom>
            <input type="file">
            <span class="uk-link">上传</span>
        </div>
    </div>

    <div class="uk-margin" uk-margin>
        <div uk-form-custom="target: true">
            <input type="file">
            <input class="uk-input uk-form-width-medium" type="text" placeholder="选择文件" disabled>
        </div>
        <button class="uk-button uk-button-default">提交</button>
    </div>

</form>
```

***

### 选择表单

使用按钮，文本或链接作为选择表单，只需将 `target: SELECTOR` 选项添加到 `uk-form-custom` 属性中，即可决定选项值的显示位置。`target: true` 将会选择的相邻元素。

```html
<div uk-form-custom="target: true">
    <select>
        <option></option>
        <option></option>
    </select>
    <button type="button"></button>
</div>
```

```example
<form>

    <div class="uk-margin">
        <div uk-form-custom="target: true">
            <select>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
                <option value="3">Option 03</option>
                <option value="4">Option 04</option>
            </select>
            <span></span>
        </div>
    </div>

    <div class="uk-margin">
        <div uk-form-custom="target: > * > span:last-child">
            <select>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
                <option value="3">Option 03</option>
                <option value="4">Option 04</option>
            </select>
            <span class="uk-link">
                <span uk-icon="icon: pencil"></span>
                <span></span>
            </span>
        </div>
    </div>

    <div class="uk-margin">
        <div uk-form-custom="target: > * > span:first-child">
            <select>
                <option value="">Please select...</option>
                <option value="1">Option 01</option>
                <option value="2">Option 02</option>
                <option value="3">Option 03</option>
                <option value="4">Option 04</option>
            </select>
            <button class="uk-button uk-button-default" type="button" tabindex="-1">
                <span></span>
                <span uk-icon="icon: chevron-down"></span>
            </button>
        </div>
    </div>

</form>
```

***

## Component option-组件选项

您可以添加下面这些选项到 `uk-form-custom` attribute. [Learn more](javascript.md#component-configuration)

| 选项   | 可用值                 | 默认值 | 描述           |
|:---------|:----------------------|:--------|:----------------------|
| `target` | CSS selector, Boolean | false   | 显示可选值的目标位置      |

***

## JavaScript

了解有关 [JavaScript 组件](javascript.md#programmatic-use)的更多内容。

### 初始化

```js
UIkit.formCustom(element, options);
```