UIkit3.x文档

表单

轻松创建各种样式和布局的美观表单。

用法

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

Class Description
.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"> 元素来创建滑动条表单。
<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 类添加到 <fieldset> 元素,将 .uk-legend c类添加到<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">
            </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>

状态修饰

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

Class Description
.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" 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>

尺寸

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

Class Description
.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">
        </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>

宽度

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

Class Description
.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">
        </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 组件中的.uk-width-* 设置宽度。

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

空白

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

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

布局

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

Class Description
.uk-form-stacked label显示在控件上方
.uk-form-horizontal label与控件在同一行
.uk-form-label 定义表单的 labels
.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 class 可以更好地将复选框和单选按钮与文本对齐水平线上。

<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 组件 中的图标。将 .uk-form-icon 类添加到<span> 元素。将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">
            </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> 元素来创建图标。

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

表单和网格

您还可以结合使用GridWidth 组件来定义表单的布局。

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

自定义控件

要用您自己的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">
                <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">
                <span class="uk-link">upload</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="Select file" disabled>
            </div>
            <button class="uk-button uk-button-default">Submit</button>
        </div>
    
    </form>

选择表单

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

<div uk-form-custom="target: true">
    <select>
        <option></option>
        <option></option>
    </select>
    <button type="button"></button>
</div>
  • Option 01
    Option 01
  • <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>

组件选项

您可以添加下面这些选项到uk-form-custom 属性。 了解更多

Option Value Default Description
target CSS selector, Boolean false 显示可选值的目标位置

JavaScript

了解有关JavaScript 组件的更多内容。

初始化

UIkit.formCustom(element, options);