Input 输入框

提供录入信息的能力。

通用原则

• 通常每个输入项都会搭配对应的标题。对齐方式请参考 「表单」 中的定义
• 占位文字为用户提供了输入提示或当前内容的范本，用户输入了内容后就会消失。当用户清除输入内容后重新出现
• 在容器内部仅有一个输入项的场景下可以用占位文字来替代标题
• 可根据业务场景为输入项提供默认值
• Number Input 限制用户仅能输入数字字符。其余输入限制由业务场景决定
• 通用形式适用于所有类型的字符输入项，可根据业务场景灵活选用

类型

Text input 文本框

用于单行文本信息的输入。拥有两种特殊形式：

• 带前后缀：包含固定前后缀和可切换前后缀两种。前后缀为用户提供了默认的固定信息，减少了用户的操作成本。
• 占位符：输入前提供对应的输入建议。

Text area 文本域

用于多行文本信息的输入。拥有两种特殊形式：

• 固定高度：常用于布局复杂的场景，限制了该输入区域的高度，内容超出则内部滚动。
• 可拖动高度：用户可通过拖动右下角的把手来自由调整高度，最小高度为一行文字内容的高度。

Number input 数字输入

用于数字或特定单位（如货币）的信息输入。拥有 3 种特殊形式：

• 带前后缀：包含固定前后缀和可切换前后缀两种。前后缀为用户提供了默认的固定信息，减少了用户的操作成本。
• 范围：用户可以限定一段数字信息的范围区间。常用于筛选场景。
• 固定字符数：用于数字输入项的字符数量固定且小于 10 位时的场景。如数字验证码输入等场景

Password Input 密码输入

用于密码信息的输入。右侧的图标可以切换密码的明文显示与隐藏。

构成

1. 主体输入框
2. 前缀（可选）
3. 后缀（可选）
4. 清除内容
5. 显示密码
   1. 密码输入时适用
6. 增减数字
   1. 数字输入时适用

行为

四大状态

清空选项

鼠标 hover 到输入框，出现「清空」图标，点击后清除内容。

反馈

对于输入内容的反馈，主要为成果/失败的提醒。

<input type="email" class="form-control"  placeholder="请输入邮箱">
<div class="input-group">
  <span class="input-group-addon">单价</span>
  <input type="text" class="form-control" >
  <span class="input-group-addon">元</span>
</div>
<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">操作1</a></li>
      <li><a href="#">操作2</a></li>
      <li><a href="#">操作3</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">操作4</a></li>
    </ul>
  </div>
  <input type="text" class="form-control">
</div>