跳到主要内容

文档

表单

使用不同的样式和布局轻松创建美观的表单。

用法

将以下类之一添加到 <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>

将 .uk-fieldset 类添加到 <fieldset> 元素，将 .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> 元素以修改其大小。

类 描述
.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">
    </div>

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

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

您还可以将 宽度组件中的 .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>
单选

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

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

表单和图标

您可以在表单内使用 图标组件中的图标。 将 .uk-form-icon 类添加到 <span> 元素。 通过将 实用工具组件中的 .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>

表单和栅格

您还可以使用 栅格和 宽度组件来定义表单的布局。

<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>
这是一段文本
上传 
<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 的悬停和焦点状态没有样式，但您可以使用相邻兄弟选择器来执行此操作。

选择

使用按钮、文本或链接作为选择表单。 只需将 target: SELECTOR 选项添加到 uk-form-custom 属性，以选择应显示选项值的位置。 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 选择器、布尔值 false 值显示目标。

JavaScript

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

初始化

UIkit.formCustom(element, options);

可访问性

将适当的 WAI-ARIA 角色、状态和属性设置为表单组件。

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