输入框

简介

输入框是表单用于数据输入元素，包含input、output、textarea、select、button等。

其中单行输入框input的type包含text、password、radio、checkbox、file、hidden、button、submit、image、reset以及新增的number、date(month、week、time、datetime、datetime-local)、email、search、range、color、url等。

按钮button的type包含button、submit、reset三个类型。

在上一节，框架定义了按钮的样式，在这一节，我们用.input来定义除按钮外表单输入框的样式。

基础表单

框架用.input定义输入框样式，按钮用上一节的.button定义样式：

    <form>
      <input class="input" placeholder="单行输入框" type="text" />
      <output class="input">输出框</output>
      <textarea class="input" placeholder="多行输入框"></textarea>
      <select class="input"><option>下拉菜单</option><option>下拉菜单</option></select>
      <select class="input" multiple size="2"><option>下拉菜单</option><option>下拉菜单</option><option>下拉菜单</option></select>
      <button class="button">按钮</button>
    </form>

输入框类别

因input的类型比较多，部份形式有些差异，如hidden不显示，radio、checkbox、file不适用.input样式及button、submit、image、reset为按钮使用.button样式外，其余的效果如下：

    <form>
      <input class="input" type="text" placeholder="文本" />
      <input class="input" type="password" placeholder="密码" />
      <input class="input" type="number" placeholder="数字" />
      <input class="input" type="date" placeholder="日期" />
      <input class="input" type="email" placeholder="邮箱" />
      <input class="input" type="search" placeholder="搜索" />
      <input class="input" type="range" placeholder="范围" />
      <input class="input" type="color" placeholder="颜色" />
      <input class="input" type="url" placeholder="网址" />
    </form>

只读禁用状态

表单元素包含只读readonly、禁用disabled，为不可操作状态：

只读

    <form>
      <input class="input" readonly="readonly" type="text" placeholder="只读" />
    </form>

禁用

    <form>
      <input class="input" disabled="disabled" type="text" placeholder="禁用" />
    </form>

纯文本

在表单应用时，纯文本可用于只呈现但不可操作的内容显示，在.input的基础上叠加样式.input-text：

纯文本

    <div class="input input-text">纯文本</div>

尺寸

框架定义了小尺寸.input-small和大尺寸.input-big输入框：

    <form>
      <input class="input input-small" type="text" placeholder="小输入框" />
      <input class="input" type="text" placeholder="默认" />
      <input class="input input-big" type="text" placeholder="大输入框" />
    </form>

另外，还可以通过改变文本字号大小来改变输入框大小：

    <form>
      <input class="input size-small" type="text" placeholder="小号文本" />
      <input class="input" type="text" placeholder="默认文本" />
      <input class="input size-big" type="text" placeholder="大号文本" />
    </form>

自动宽

默认的.input样式宽为100%，叠加.input-auto样式，由size控制长度。

    <form>
      <input class="input input-auto" type="text" size="30" placeholder="自动宽" />
    </form>

风格设置

结合框架根据整体风格，灵活应用盒子模型相关懊悔及颜色样式，美化相关样式。

圆角

    <form>
      <input class="input radius-large" type="text" placeholder="圆角" />
      <input class="input radius-none" type="text" placeholder="直角" />
    </form>

颜色

    <form>
      <input class="input text-main" type="text" placeholder="文本色" />
      <input class="input border-main" type="text" placeholder="边框色" />
      <input class="input bg-main bg-inverse" type="text" placeholder="背景色" />
    </form>