KISSY Form Demo

# 布局

## 灵活的HTML和CSS

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

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

## 四种表单布局

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

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

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

## 控件的状态和其他

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

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

## 四种类型的表单

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

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

## 表单示例

### 基础表单

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

Label name Associated help text!

Example block-level help text here.

Check me out
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“方式.

Remember me
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 突出了浏览器支持的 `focused` 和 `disabled` 状态。我们移除了当`: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!
内联的复选框
1 2 3
复选框列表
Option one is this and that—be sure to include why it's great Option two can also be checked and included in form results Option three can—yes, you guessed it—also be checked and included in form results

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

单选按钮列表
Option one is this and that—be sure to include why it's great Option two can is something else and selecting it will deselect option one
保存
取消

### 前置 & 后置输入框

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

### 复选列表和单选类表

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

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

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

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

#### 表单帮助文本

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