简介：在表单设计过程中我们经常遇到输入特定格式的文本或者数字，或者自定类型的搜索等。比如淘宝网页上的宝贝搜索或者店铺搜索，如图所示。 上面的这个搜索框我们可以看作是一个输入框组，是由下拉框、输入框和按钮组合 ...
| 在表单设计过程中我们经常遇到输入特定格式的文本或者数字，或者自定类型的搜索等。比如淘宝网页上的宝贝搜索或者店铺搜索，如图所示。
核心源代码 上面的代码定义了两个组合输入框，第一个用于输入gmail邮箱，第二个用于输入美元并且保留两位小数（这里只是表现形式，并不是真的只能输入邮箱和数字），页面运行效果如图所示。
定义的两个组合输入框 表单都提到了元素大小的设置，输入框组也提供了三种关于大小形式的样式类，代码如下：
核心源代码
元素大小效果图 如果将多选按钮或者单选按钮作为额外元素，其用法也非常简单，代码如下：
核心源代码
增加了多选和单选按钮的组合框 在最开始用淘宝的搜索框网页截图中，有一个按钮搜索。我们可以使用Bootstrap快速制作一个这样的组合框，代码如下：
核心源代码
快速制作一个组合框 这个效果是不是很酷，在平时的Web页面制作过程中这个效果还是比较难的，在Bootstrap中却可以轻而易举地实现。这里需要注意的是<span>中的class="input-group-btn"不再是上面的class="input-group-addon"，否则按钮会出现样式问题。下面我们制作一个比较复杂的组合框和淘宝的搜索组合框，选择搜索的类型、输入关键字以及搜索按钮，代码如下：
核心源代码
下拉菜单组合搜索 在使用输入框组的时候要特别注意以下两点：不能在输入框的单独一侧添加多个额外元素；不能在单个输入框组中添加多个表单控件。我们也可以将分列式下拉菜单按钮作为组合输入框的一部分，这个和上面的下拉菜单组合搜索比较相似，代码如下：
核心源代码
加入分列式下拉菜单按钮 本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到巅云www.yx10011.com学习互联网营销技术请到巅云建站www.yx10011.com。 |
