表单

DPL基于Bootstrap的组件,提供各种布局的表单。

灵活的HTML和CSS

DPL可以使你的表单元素和控件看上去非常好,没有任何多余的HTML,我们会提供你需要的多种模式。

使用简洁和可扩展的样式实现了复杂的布局,是你可以方便的实现样式和绑定事件,你可以按照下面的内容一步步的去做。

四种表单布局

DPL 支持4种典型的表单布局:

  • 垂直表单 (默认)
  • 内联表单(Inline)
  • 搜索
  • 横向表单(Horizontal)

不同布局类型的表单需要修改一些标签,但是控件的行为是一致的。

控件的状态和其他

DPL 中包含你所希望的所有表单控件的样式,同时包含一系列的自定义组件,例如在input前面或者后面附加内容;支持复选框列表。

表单控件有各种状态:错误、警告和成功,除此之外还有当禁用控件时的不可用状态。

四种类型的表单

DPL提供了简单的标签和样式来实现常见的四种表单。

名称 样式 描述
垂直表单 (默认) .form-vertical 左对齐的栈式表单控件布局
内联表单 .form-inline 居左的label和内联的元素组成的简洁的表单
搜索表单 .form-search 精致的圆形边框搜索表单
水平表单 .form-horizontal 居左但内容右对齐的label和控件在一行

表单示例

基础表单

仅使用表单元素,没有额外的标签

Associated help text!

Example block-level help text here.

Submit
<form class="form-vertical">
  <label>Label name</label>
  <input type="text" class="span6" placeholder="Type something…">
  <span class="help-inline">Associated help text!</span>
  <label class="checkbox">
    <input type="checkbox"> Check me out
  </label>
  <div class="ks-button">Submit</div>
</form>

搜索表单

使用默认的WebKit样式,只是添加样式.form-search在搜索域上添加圆角。

<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <div class="ks-button">搜索</div>
</form>

内联表单

对于 .form-inline.form-horizontal样式, 我们使用”inline-block“方式.

Sign in
<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <div class="ks-button">Sign in</div>
</form>

水平表单

DPL 支持的表单控件

HTML5 支持的 input 都是这种样式。

保存
取消

示例

使用上面的表单布局,这里一个标签跟一些控件组成控件组。控件组 .control-group, .control-label, 和 .controls 样式是下面的表单需要的。

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="input01">Text input</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

包含的表单元素

左边的是我们支持的表单默认元素,如下面列表所示:

  • 文本输入框(text, password, email等)
  • 复选框
  • 单选框
  • 选择框
  • 多选框
  • 文件上传
  • 文本域

表单控件状态
Some value here
有错误发生
请更正错误
Woohoo!
Woohoo!
保存
取消

重新设置浏览器控件的样式

DPL 突出了浏览器支持的 focuseddisabled 状态。我们移除了当:focus时Webkit默认的outline 使用 box-shadow来替代。


表单验证

DPL同时包含各种验证状态样式:错误、警告和成功。可以在.control-group元素上应用这些样式。

<fieldset
  class="control-group error">
  …
</fieldset>
扩展表单元素

使用栅格系统的.span* 样式来设定表单元素的大小。

你可能不使用栅格系统,你可以采用在各种控件上应用固有的样式。.input-mini.input-small.input-medium等样式

@

这是帮助文本

.00
这是帮助文本
$.00
Go!
Go!
Go2!

提示: Labels 包含的选项可以提供更大的点击区域,提升表单的可用性。

保存
取消

前置 & 后置输入框

输入框组—包含前置后者后置文本—给输入框提供了上下文,更方便用户输入。一个很好的例子是在一个需要输入邮箱名的输入框中附加”@“。


复选列表和单选类表

可以非常简单的使用<label class="checkbox"> 包围着<input type="checkbox">元素形成一个选项。

同时支持内联的复选框和单选框,仅仅附加.control-inline 样式在应用了.checkbox.radio的元素上。


内联表单上使用 前置和后置文本

在内联表单上使用前置后置文本时,要将 .add-oninput放在同一行上,不要有空格。


表单帮助文本

可以为表单元素添加帮助文本,在表单元素后面使用<span class="help-inline">或者<p class="help-block">包含帮助信息