跳到主要内容

文档

Form

轻松创建外观漂亮、提供多种样式和布局的表单。

用法

在 <form> 元素内的表单控件上添加下列某个类，即可定义这些控件。

类 说明
.uk-input 为 <input> 元素添加该类。
.uk-select 为 <select> 元素添加该类。
.uk-textarea 为 <textarea> 元素添加该类。
.uk-radio 为 <input type="radio"> 元素添加该类，创建单选按钮。
.uk-checkbox 为 <input type="checkbox"> 元素添加该类，创建复选框。
.uk-range 为 <input type="range"> 元素添加该类，创建范围输入。 
<form>
    <input class="uk-input" type="text">
    <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>

为一个 <fieldset> 元素添加 .uk-fieldset 类，并为一个 <legend> 元素添加 .uk-legend 类，即可定义字段组和表单图例。

Legend 
<form>
    <fieldset class="uk-fieldset">

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

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

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

        <div class="uk-margin">
            <textarea class="uk-textarea" rows="5" placeholder="Textarea" aria-label="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" aria-label="Range">
        </div>

    </fieldset>
</form>

状态修饰符

通过在表单控件上使用下列某个类，以反馈状态的形式向用户提供基本信息。

类 说明
.uk-form-danger 添加该类，提示用户该值未通过校验。
.uk-form-success 添加该类，提示用户该值已通过校验。

为表单控件添加 disabled 属性，它会呈现为柔和（禁用）状态。

<div class="uk-margin">
    <input class="uk-input uk-form-danger uk-form-width-medium" type="text" placeholder="form-danger" aria-label="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" aria-label="form-success" value="form-success">
</div>

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

尺寸修饰符

为 <input>、<select>、<textarea>、<checkbox> 或 <radio> 元素添加下列某个类，即可修改其尺寸。

类 说明
.uk-form-large 添加该类使元素变大。
.uk-form-small 添加该类使元素变小。 
<form>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="Large" aria-label="Large">
        <select class="uk-select uk-form-width-small uk-form-large" aria-label="Large">
            <option>Option 01</option>
            <option>Option 02</option>
            <optgroup label="Optgroup">
                <option>Option A</option>
                <option>Option B</option>
            </optgroup>
        </select>
        <input class="uk-checkbox uk-form-large" type="checkbox">
        <input class="uk-radio uk-form-large" type="radio">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" placeholder="Default" aria-label="Default">
        <select class="uk-select uk-form-width-small" aria-label="Default">
            <option>Option 01</option>
            <option>Option 02</option>
            <optgroup label="Optgroup">
                <option>Option A</option>
                <option>Option B</option>
            </optgroup>
        </select>
        <input class="uk-checkbox" type="checkbox">
        <input class="uk-radio" type="radio">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Small" aria-label="Small">
        <select class="uk-select uk-form-width-small uk-form-small" aria-label="Small">
            <option>Option 01</option>
            <option>Option 02</option>
            <optgroup label="Optgroup">
                <option>Option A</option>
                <option>Option B</option>
            </optgroup>
        </select>
        <input class="uk-checkbox uk-form-small" type="checkbox">
        <input class="uk-radio uk-form-small" type="radio">
    </div>

</form>

宽度修饰符

为 <input>、<select> 或 <textarea> 元素添加下列某个类，即可调整其宽度。

类 说明
.uk-form-width-large 应用 500px 的宽度。
.uk-form-width-medium 应用 200px 的宽度。
.uk-form-width-small 应用 130px 的宽度。
.uk-form-width-xsmall 应用 40px 的宽度。 
<form>

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

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

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

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

</form>

你还可以为表单控件应用 Width 组件 中的 .uk-width-* 类。

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

空白修饰符

添加 .uk-form-blank 类可最小化表单控件的样式。

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

布局

定义标签和控件，并为表单元素应用堆叠或水平布局。布局修饰符可以添加到任意父元素上，例如 <fieldset> 元素。这样就可以为每个字段组设置不同的表单布局。

类 说明
.uk-form-stacked 添加该类可在控件上方显示标签。
.uk-form-horizontal 添加该类可让标签和控件并排显示。
.uk-form-label 添加该类可定义表单标签。
.uk-form-controls 添加该类可定义表单控件。 
<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>
Radio

<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 类获得更好的对齐效果。

<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>
Radio

<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>

表单与图标

你可以在表单内使用 Icon 组件 中的图标。为一个 <span> 元素添加 .uk-form-icon 类。在同时包裹这两者的容器元素上添加 Utility 组件 中的 .uk-inline 类，把它与 <input> 元素组合起来。图标在标记中必须放在前面。默认情况下，图标会显示在表单左侧。要改变对齐方式，请添加 .uk-form-icon-flip 类。

<div class="uk-inline">
    <span class="uk-form-icon" uk-icon="icon: user"></span>
    <input class="uk-input">
</div>
<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" aria-label="Not clickable icon">
        </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" aria-label="Not clickable icon">
        </div>
    </div>

</form>

可点击图标

要启用某个操作，例如打开模态框来选择图片或链接，请使用 <a> 或 <button> 元素来创建图标。

<div class="uk-inline">
    <a class="uk-form-icon uk-form-icon-flip" href="" uk-icon="icon: user"></a>
    <input class="uk-input">
</div>
<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" aria-label="Clickable icon">
        </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" aria-label="Clickable icon">
        </div>
    </div>

</form>

表单与网格

你也可以使用 Grid 和 Width 组件来定义表单的布局。

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

自定义控件

要用你自己的 HTML 内容（例如按钮或文字）替换文件输入框或选择表单，请为一个容器元素添加 uk-form-custom 属性。

文件

使用按钮或文字作为文件输入框。

<div uk-form-custom>
    <input type="file">
    <button type="button"></button>
</div>
Here is a text
upload 
<form>

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

    <div class="uk-margin">
        <span class="uk-text-middle">Here is a text</span>
        <div uk-form-custom>
            <input type="file" aria-label="Custom controls">
            <span class="uk-link">upload</span>
        </div>
    </div>

    <div class="uk-margin" uk-margin>
        <div uk-form-custom="target: true">
            <input type="file" aria-label="Custom controls">
            <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" aria-label="Custom controls" disabled>
        </div>
        <button class="uk-button uk-button-default">Submit</button>
    </div>

</form>

注意 uk-form-custom 的悬停和聚焦状态默认没有样式，但你可以使用相邻兄弟选择器来实现。

选择

使用按钮、文字或链接作为选择表单。只需为 uk-form-custom 属性添加 target: SELECTOR 选项，指定选项值应显示在哪个元素中。target: true 会选择标记中相邻的元素。

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

    <div class="uk-margin">
        <div uk-form-custom="target: true">
            <select aria-label="Custom controls">
                <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 aria-label="Custom controls">
                <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 aria-label="Custom controls">
                <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>

组件选项

你可以为 uk-form-custom 属性添加该选项。了解更多

选项 值 默认值 说明
target CSS selector, Boolean false 值的显示目标。

JavaScript

了解关于 JavaScript 组件的更多信息。

初始化

UIkit.formCustom(element, options);

可访问性

为 Form 组件设置合适的 WAI-ARIA 角色、状态和属性。

<input class="uk-input" type="text" aria-label="…">