表单

下载psd文件

更新 v1.5.0：control-label 设置默认的 line-height: 24px，去掉了 margin-bottom: 5px。
更新 v1.1.10：修复了在chrome下，水平表单布局可能出现布局错乱的bug。

按宽度分类

select 元素同样适用

<form class="sui-form">
  <input type="text" placeholder=".input-mini" class="input-mini">
  <input type="text" placeholder=".input-small" class="input-small">
  <input type="text" placeholder=".input-medium" class="input-medium">
  <input type="text" placeholder=".input-large" class="input-large">
  <input type="text" placeholder=".input-xlarge" class="input-xlarge">
  <input type="text" placeholder=".input-xxlarge" class="input-xxlarge">
</form>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

按高度分类

select 元素同样适用

<form class="sui-form">
  <input type="text" placeholder=".input-thin" class="input-thin">
  <input type="text" placeholder=".input-default" class="input-default">
  <input type="text" placeholder=".input-fat" class="input-fat">
  <input type="text" placeholder=".input-xfat" class="input-xfat">
</form>

四种尺寸：.input-thin, .input-default, .input-fat, .input-xfat

复制代码

代码已复制

成块级

<form class="sui-form">
  <input type="text" placeholder=".input-block-level" class="input-block-level">
</form>

引用class：.input-block-level

下载psd文件
复制代码

代码已复制

不可编辑

<form class="sui-form"><span class="input-xlarge uneditable-input">Some value here</span></form>

引用class：.input-block-level

下载psd文件
复制代码

代码已复制

Disabled inputs

<form class="sui-form form-inline">
  <input id="disabledInput" type="text" placeholder="Disabled input here…" disabled="" class="input-xlarge">
</form>

引用class：.input-block-level

下载psd文件
复制代码

代码已复制

带图标

<form class="sui-form form-dark">
  <div class="input-control">
    <input type="text" class="input-thin"><i class="sui-icon icon-touch-magnifier"></i>
  </div>
  <div class="input-control">
    <input type="text"><i class="sui-icon icon-touch-magnifier"></i>
  </div>
  <div class="input-control">
    <input type="text" class="input-fat"><i class="sui-icon icon-touch-magnifier"></i>
  </div>
  <div class="input-control">
    <input type="text" class="input-xfat"><i class="sui-icon icon-touch-magnifier"></i>
  </div><br>
  <div class="input-control control-right">
    <input type="text" class="input-thin"><i class="sui-icon icon-touch-magnifier"></i>
  </div>
  <div class="input-control control-right">
    <input type="text"><i class="sui-icon icon-touch-magnifier"></i>
  </div>
  <div class="input-control control-right">
    <input type="text" class="input-fat"><i class="sui-icon icon-touch-magnifier"></i>
  </div>
  <div class="input-control control-right">
    <input type="text" class="input-xfat"><i class="sui-icon icon-touch-magnifier"></i>
  </div>
</form>

复制代码

代码已复制

文本字段四态

<form class="sui-form">
  <input type="text" placeholder=".input-warning" class="input-warning">
  <input type="text" placeholder=".input-error" class="input-error">
  <input type="text" placeholder=".input-success" class="input-success">
  <input type="text" placeholder=".input-info" class="input-info">
</form>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

下载psd文件
复制代码

代码已复制

Checkboxes and radios

checkbox和radio的详细文档请点 checkbox

<form class="sui-form">
  <label data-toggle="checkbox" class="checkbox-pretty checked">
    <input type="checkbox" checked="checked"><span>鸣人</span>
  </label>
  <label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>佐助</span>
  </label>
  <h3>单选框</h3>
  <label data-toggle="radio" class="radio-pretty checked">
    <input type="radio" checked="checked" name="radio1"><span>服装</span>
  </label>
  <label data-toggle="radio" class="radio-pretty">
    <input type="radio" name="radio1"><span>电器</span>
  </label>
  <label data-toggle="radio" class="radio-pretty">
    <input type="radio" name="radio1"><span>美食</span>
  </label>
  <h3>半选</h3>
  <label data-toggle="radio" class="checkbox-pretty halfchecked">
    <input type="checkbox"><span>半选</span>
  </label>
  <h3>禁用</h3>
  <label data-toggle="radio" class="checkbox-pretty checked disabled">
    <input type="checkbox" checked="checked" disabled=""><span>不可选</span>
  </label>
</form>

复制代码

代码已复制

内联状态

示例
代码

<form class="sui-form">
  <label data-toggle="checkbox" class="checkbox-pretty inline checked">
    <input type="checkbox" checked="checked"><span>鸣人</span>
  </label>
  <label data-toggle="checkbox" class="checkbox-pretty inline">
    <input type="checkbox"><span>佐助</span>
  </label>
  <h3>单选框</h3>
  <label data-toggle="radio" class="radio-pretty inline checked">
    <input type="radio" checked="checked" name="radio1"><span>服装</span>
  </label>
  <label data-toggle="radio" class="radio-pretty inline">
    <input type="radio" name="radio1"><span>电器</span>
  </label>
  <label data-toggle="radio" class="radio-pretty inline">
    <input type="radio" name="radio1"><span>美食</span>
  </label>
  <h3>半选</h3>
  <label data-toggle="radio" class="checkbox-pretty inline halfchecked">
    <input type="checkbox"><span>半选</span>
  </label>
  <h3>禁用</h3>
  <label data-toggle="radio" class="checkbox-pretty inline checked disabled">
    <input type="checkbox" checked="checked" disabled=""><span>不可选</span>
  </label>
</form>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

select

详细文档点击这里 dropdown

示例
代码

<span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop12" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <input value="hz" name="city" type="hidden"><i class="caret"></i><span>杭州</span></a>
                      <ul id="menu12" role="menu" aria-labelledby="drop12" class="sui-dropdown-menu">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
                      </ul></span></span>

Textarea

<form class="form-inline sui-form">
  <textarea rows="3"></textarea>
</form>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

关联校验

警示输入框：

警示文案

错误输入框：

出错文案

成功输入框：

成功文案

帮助输入框：

帮助文案

警示输入框：

警告

错误输入框：

错误

成功输入框：

成功

帮助输入框：

帮助

<form class="sui-form form-horizontal">
  <div class="control-group warning">
    <label for="inputWarning" class="control-label">警示输入框：</label>
    <div class="controls">
      <input type="text" id="inputWarning">
      <span class="help-inline">警示文案</span>
    </div>
  </div>
  <div class="control-group error">
    <label for="inputError" class="control-label">错误输入框：</label>
    <div class="controls">
      <input type="text" id="inputError">
      <span class="help-inline">出错文案</span>
    </div>
  </div>
  <div class="control-group success">
    <label for="inputSuccess" class="control-label">成功输入框：</label>
    <div class="controls">
      <input type="text" id="inputSuccess">
      <span class="help-inline">成功文案</span>
    </div>
  </div>
  <div class="control-group info">
    <label for="inputInfo" class="control-label">帮助输入框：</label>
    <div class="controls">
      <input type="text" id="inputInfo">
      <span class="help-inline">帮助文案</span>
    </div>
  </div>
  <div class="control-group warning">
    <label for="inputWarning" class="control-label">警示输入框：</label>
    <div class="controls"><input type="text" id="inputWarning">
      <div class="sui-msg msg-naked msg-tips"><i class="msg-icon"></i>
        <div class="msg-con">警告</div>
      </div>
    </div>
  </div>
  <div class="control-group error">
    <label for="inputError" class="control-label">错误输入框：</label>
    <div class="controls"><input type="text" id="inputError">
      <div class="sui-msg msg-naked msg-error"><i class="msg-icon"></i>
        <div class="msg-con">错误</div>
      </div>
    </div>
  </div>
  <div class="control-group success">
    <label for="inputSuccess" class="control-label">成功输入框：</label>
    <div class="controls"><input type="text" id="inputSuccess">
      <div class="sui-msg msg-naked msg-success"><i class="msg-icon"></i>
        <div class="msg-con">成功</div>
      </div>
    </div>
  </div>
  <div class="control-group info">
    <label for="inputInfo" class="control-label">帮助输入框：</label>
    <div class="controls"><input type="text" id="inputInfo">
      <div class="sui-msg msg-naked msg-info"><i class="msg-icon"></i>
        <div class="msg-con">帮助</div>
      </div>
    </div>
  </div>
</form>

关联校验接口 warning、error、success、info

复制代码

代码已复制

按功能分类

搜索框

<form class="sui-form form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="sui-btn btn-primary">Search</button>
</form>

添加 .form-search 到 <form> 标签上并且添加 .search-query 到 <input> 标签上

复制代码

代码已复制

内联表单

<span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop12" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <input value="hz" name="city" type="hidden"><i class="caret"></i><span>杭州</span></a>
                      <ul id="menu12" role="menu" aria-labelledby="drop12" class="sui-dropdown-menu">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
                      </ul></span></span>

添加 .form-inline 成为内联状态

复制代码

代码已复制

水平表单

<form class="sui-form form-horizontal">
  <div class="control-group">
    <label for="inputEmail" class="control-label">邮箱：</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label for="inputPassword" class="control-label">密码：</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label"></label>
    <div class="controls">
      <label data-toggle="checkbox" class="checkbox-pretty inline">
        <input type="checkbox" name="remember-me"><span>记住我</span>
      </label>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label"></label>
    <div class="controls">
      <button type="submit" class="sui-btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

添加 .form-horizontal 成为水平状态

复制代码

代码已复制

扩展表单控件

默认选项

<form class="sui-form">
  <div class="input-prepend"><span class="add-on">@</span>
    <input id="prependedInput" type="text" placeholder="Username" class="span2 input-fat">
  </div><br>
  <div class="input-append">
    <input id="appendedInput" type="text" class="span2 input-fat"><span class="add-on">.00</span>
  </div><br>
  <div class="input-inner">
    <input type="text" class="span2 input-fat"><span class="add-on">@</span>
    <input type="text" class="span2 input-fat">
  </div>
</form>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

联合体

<form class="sui-form form-inline">
  <div class="input-prepend input-append"><span class="add-on">$</span>
    <input id="appendedPrependedInput" type="text" class="span2 input-fat"><span class="add-on">.00</span>
  </div>
</form>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

按钮替换文本

<form class="sui-form form-inline">
  <div class="input-append">
    <input id="appendedInputButton" type="text" class="span2">
    <button type="button" class="sui-btn">Go!</button>
  </div>
</form><br>
<form class="sui-form form-inline">
  <div class="input-append">
    <input id="appendedInputButtons" type="text" class="span2">
    <button type="button" class="sui-btn">Search</button>
    <button type="button" class="sui-btn">Options</button>
  </div>
</form>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

搜索表单

<form class="sui-form form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="button" class="sui-btn">Search</button>
  </div>
  <div class="input-prepend">
    <button type="button" class="sui-btn">Search</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

六种尺寸：.input-mini, .input-small, .input-medium, .input-large, .input-xlarge, .input-xxlarge

复制代码

代码已复制

所有案例

demo1

单选框：

服装电器美食

复选框：

鸣人佐助

输入框（迷你）：

提示信息，比如：建议你设置安全密码

输入框（小号）：

输入框（中号）：

输入框（大号）：

输入框（加大）：

输入框（加加）：

时间选择：

备注：

<form class="sui-form form-horizontal">
  <div class="control-group">
    <label class="control-label">单选框：</label>
    <div class="controls">
      <label data-toggle="radio" class="radio-pretty inline checked">
        <input type="radio" checked="checked" name="radio"><span>服装</span>
      </label>
      <label data-toggle="radio" class="radio-pretty inline">
        <input type="radio" name="radio"><span>电器</span>
      </label>
      <label data-toggle="radio" class="radio-pretty inline">
        <input type="radio" name="radio"><span>美食</span>
      </label>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">复选框：</label>
    <div class="controls">
      <label data-toggle="checkbox" class="checkbox-pretty inline checked">
        <input type="checkbox" checked="checked"><span>鸣人</span>
      </label>
      <label data-toggle="checkbox" class="checkbox-pretty inline">
        <input type="checkbox"><span>佐助</span>
      </label>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">输入框（迷你）：</label>
    <div class="controls">
      <input type="text" class="input-mini">
      <div class="sui-msg msg-tips msg-naked">
        <div class="msg-con">提示信息，比如：建议你设置安全密码</div>
        <s class="msg-icon"></s>
      </div>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">输入框（小号）：</label>
    <div class="controls">
      <input type="text" class="input-small">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">输入框（中号）：</label>
    <div class="controls">
      <input type="text" class="input-medium">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">输入框（大号）：</label>
    <div class="controls">
      <input type="text" class="input-large">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">输入框（加大）：</label>
    <div class="controls">
      <input type="text" class="input-xlarge">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">输入框（加加）：</label>
    <div class="controls">
      <input type="text" class="input-xxlarge">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">时间选择：</label>
    <div class="controls">
      <input type="text" class="input-medium input-date"> 
      -
      <input type="text" class="input-medium input-date">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">备注：</label>
    <div class="controls">
      <textarea rows="3" class="input-block-level"></textarea>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label"></label>
    <div class="controls">
      <button type="submit" class="sui-btn btn-primary">提交审核</button>
      <button type="reset" class="sui-btn">重置</button>
    </div>
  </div>
</form>

.form-horizontal 用于切换表单字段水平操放

复制代码

代码已复制

demo2

* 地点：

该项为必填项

* 主题：

该项为必填项

* 内容：

消息渠道发送字数提示：

短信： 61个汉字为一条短信，超过分多条发送

旺旺：系统文本对话消息XXXX个汉字

浮出消息XXXX汉字

Html系统对话消息XXX个汉字

站内信：XXXX个汉字

该项为必填项

链接：

* 发送渠道：

商家中心旺旺弹窗站内信

是否向子账号发送消息：是否

短信发送给店长

短信发送给电商决策人

* 审核人：

<form class="sui-form form-horizontal">
  <div class="control-group">
    <label class="control-label v-top"><b style="color: #f00;">*</b> 
      地点：
    </label>
    <div class="controls"><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop4" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
            <input value="hz" name="city" type="hidden"><i class="caret"></i><span>杭州</span></a>
          <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">圣彼得堡</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="hz">杭州</a></li>
          </ul></span></span>
      <div class="sui-msg msg-error msg-clear help-block">
        <div class="msg-con">该项为必填项</div>
        <s class="msg-icon"></s>
      </div>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label v-top"><b style="color: #f00;">*</b> <span style="padding:0 24px 0 0;">主</span>题：</label>
    <div class="controls"><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop4" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
            <input value="1" name="zt" type="hidden"><i class="caret"></i><span>吃喝玩乐</span></a>
          <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
            <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="1">吃喝玩乐</a></li>
          </ul></span></span>
      <input type="text" value="" class="input-xlarge">
      <div class="sui-msg msg-error msg-clear help-block">
        <div class="msg-con">该项为必填项</div>
        <s class="msg-icon"></s>
      </div>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label v-top"><b style="color: #f00;">*</b> <span style="padding:0 24px 0 0;">内</span>容：</label>
    <div class="controls">
      <textarea style="height: 190px;" class="input-xxlarge"></textarea>
      <div style="vertical-align: top;" class="sui-msg msg-tips msg-default">
        <div class="msg-con">
          <p style="margin-bottom: 8px; font-weight: bold;">消息渠道发送字数提示：</p>
          <p>短信：&nbsp;&nbsp;61个汉字为一条短信，超过分多条发送</p>
          <p>旺旺：&nbsp;&nbsp;系统文本对话消息XXXX个汉字</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浮出消息XXXX汉字</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Html系统对话消息XXX个汉字</p>
          <p>站内信：XXXX个汉字</p>
        </div>
        <s class="msg-icon"></s>
      </div>
      <div class="sui-msg msg-error msg-clear help-block">
        <div class="msg-con">该项为必填项</div>
        <s class="msg-icon"></s>
      </div>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label"><span style="padding:0 24px 0 0;">链</span> 
      接：
    </label>
    <div class="controls">
      <input type="text" value="" class="input-xxlarge">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label v-top"><b style="color: #f00;">*</b> 
      发送渠道：
    </label>
    <div class="controls">
      <div class="row-fluid">
        <label data-toggle="radio" class="radio-pretty inline checked">
          <input type="radio" checked="checked" name="qudao"><span>商家中心</span>
        </label>
        <label data-toggle="radio" class="radio-pretty inline">
          <input type="radio" name="qudao"><span>旺旺弹窗</span>
        </label>
        <label data-toggle="radio" class="radio-pretty inline">
          <input type="radio" name="qudao"><span>站内信</span>
        </label>
        <div class="sui-msg msg-tips msg-default msg-clear help-block">
          <div class="msg-con">是否向子账号发送消息：
            <label data-toggle="radio" class="radio-pretty inline">
              <input type="radio" name="zzh" value="1"><span>是</span>
            </label>
            <label data-toggle="radio" class="radio-pretty inline checked">
              <input type="radio" checked="checked" name="zzh" value="0"><span>否</span>
            </label>
          </div>
          <s class="msg-icon"></s>
        </div>
      </div>
      <div class="row-fluid">
        <label class="checkbox inline">
          <input name="m1" type="checkbox" value="1" checked=""> 
          短信发送给店长
        </label>
      </div>
      <div class="row-fluid">
        <label class="checkbox inline">
          <input name="m1" type="checkbox" value="2" checked=""> 
          短信发送给电商决策人
        </label>
      </div>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label"><b style="color: #f00;">*</b> 
      审<span style="padding: 0 6px;">核</span>人：
    </label>
    <div class="controls"><span class="sui-dropdown dropdown-bordered select"><span class="dropdown-inner"><a id="drop4" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
            <input value="1" name="zt" type="hidden"><i class="caret"></i><span>管理员</span></a>
          <ul id="menu4" role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
            <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="1">管理员</a></li>
          </ul></span></span></div>
  </div>
  <div class="control-group">
    <label class="control-label"></label>
    <div class="controls">
      <button type="submit" class="sui-btn btn-primary">提交审核</button>
      <button type="reset" class="sui-btn">重置</button>
    </div>
  </div>
</form>

.form-horizontal 用于切换表单字段水平操放

复制代码

代码已复制

设计规范

开发者文档

按宽度分类

按高度分类

成块级

不可编辑

Disabled inputs

带图标

文本字段四态

Checkboxes and radios

默认状态

单选框

半选

禁用

内联状态

单选框

半选

禁用

select

Textarea

关联校验

按功能分类

搜索框

内联表单

水平表单

扩展表单控件

默认选项

联合体

按钮替换文本

搜索表单

所有案例

demo1

demo2