整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一篇文章我们说了单行文本框和多行文本框，今天呢我们继续看一下表单的其它控件：单选框、复选框、下拉框。
在我们表单页面中，经常会有选择性别或者选择爱好这类的内容，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
使用语法：
单选框：<input type="radio" value="值" name="名称" checked="checked"/>
复选框：<input type="checkbox" value="值" name="名称" checked="checked"/>
详细讲解：
1、type: 当 type="radio" 时，控件为单选框；当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序使用）
3、name：为控件命名，这里要注意同一组的单选按钮，name 取值一定要一致（具体可见下边的参考练习）。
4、checked：当设置 checked="checked"（也可以直接简写成checked） 时，该选项被默认选中
使用练习：
我们创建一个表单，表单里边包含姓别（男、女）选择的单选框，默认选中男以及爱好（唱歌、打游戏、绘画、旅游）选择的多选框，默认选中唱歌。具体的代码如下图所示：
在网页中的显示效果就如下图所示：
下拉框也是我们常用的一个表单控件，多用于选择城市地区等。
使用语法：
<select>
<option value="向服务器提交的内容" selected="selected">网页显示的内容</option>
</select>
详细讲解：
1、option：option为select下拉子元素，可以有一个或多个，写法类似ul和li，其中的value内容为提交数据到服务器的值（后台程序使用）
2、selected：当设置 selected="selected"（也可以直接简写成selected） 时，该选项被默认选中
使用练习：
我们创建一个表单，表单里边包含一个城市的下拉框，下拉框中有北京、上海、天津这三个城市，其中默认选中天津。具体的代码如下图所示：
在网页中的显示效果就如下图所示：
好了，本篇文章就先给大家介绍这几个表单控件的语法以及使用，下篇文章我们将介绍按钮的语法及使用以及完整的表单练习演示，记得平时要多加练习才是王道。
每日金句：做人要像竹子一样每前进一步，都要做一次小结。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
多选框（checkbox）用于可多选的情况，单选框（radio）则只能选择一个。在普通的HTML中，checkbox、radio在和<label>等标签配合时会出现对齐的问题，Bootstrap很好地解决了这个问题，代码如下：
单选框和多多选框效果图
实现代码
上面的代码中我们将input标签都包含在了label中，强制其在一行，但是很多情况下我们不建议这么做。一般一个<label>中包含一个元素，如果遇到多个<label>标签则会垂直显示内容。Bootstrap中提供了几个样式类，如class="checkbox-inline"、class="radio-inline"，可以使checkbox和radio显示在一行，代码如下：
期文章主要研究单选和多选控件的设计细节，虽然是很常见的控件设计，但是也是有非常多需要注意的地方。能提炼总结常见事物的一般规律，这本身就是一件值得大家都去做的一件事。
无论是从个性化内容还是用户体验上来讲，控件元素都会在我们的产品设计中扮演重要角色。为特定的内容选择正确的控件可能要比你想象的要难，控件的高度，宽度，样式设计和选项数量都是至关重要的因素。
为了帮助分解问题，这里给大家列了一个决策树。
一个分段tab通常会由2-6个单选项，它最适合用于图标、数字或短词的导航形式，并被设计成一个水平的容器，容纳等距离的单选内容。
图标、短词、价格
优点：将所有选项都摆在一行，对垂直空间的利用率能达到最佳，设计样式也可以做到非常直观，漂亮。
缺点：它不大适合用在长词，短语或价格上，如果你确实希望将这些内容放在选项中，就必须尝试精简文本。水平空间非常有限，即使是只有少量的选项，有时候你仍然需要决定如何截断文本。
（译者注：为什么对于底部导航栏的分栏数是2-6个最合适，根据iOS规范中说的，太多的选项卡增加了应用的复杂性，使得信息定位变得困难。选项太少也可能会带来一个问题是界面间的信息流断开，不便于快速触达。
请见iOS规范https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/ 。另外，还有说法是按钮的大小能决定点击时的舒适度，数量也会影响用户的记忆和学习成本。请见知乎https://www.zhihu.com/question/31103224 ）
最初的单选按钮被用于列表中超过6个选项时，被设计成垂直方向，圆形轮廓，并摆在列表项的开头。后来iOS通过在列表末尾加上一个对勾选中，而创造一个新的经典案例。现在最新的一些设计中，选中被设计成在列表选项外加一个描边框形式，用以节省水平空间。
Android & Web vs iOS vs 描边框模式
优点：列表单选为内容提供了更多的空间。它们易于阅读，可以容纳多文字，文本可以换行，还可以增加图片。
缺点：他们往往很占用空间，不适合用在垂直高度受限的页面中。
一个有趣的事实是，单选按钮是受旧收音机上的按键设计的启发而设计出来的，一个按钮被按下，就会弹出其他按钮。
标签选择通常用于要从3-6个选项中进行多次选择的情况，它们最适合用一到两个简短的单词或数字。它们设计的形式一般是类似于一个小按钮，通过背景色来区分“开”和“关”。
尽管谷歌设计规范（译者注：大家可以看看谷歌官方的规范，对于标签设计列举了大量实用原则 https://material.io/design/components/chips.html#filter-chips）建议最好在选中的标签前加上一个勾选标记，但我觉得有颜色作为区分已经够了，这样还能节省水平空间。
短词标签vs带省略号的多词标签vs折行标签
优点：节省空间，标签堆砌在一起的具体样式是由文本长度决定的。它们给人的印象是轻量的，有趣的。
缺点：这种形式与tab选项形式有一样的弊端，都不能很好的处理长词。不建议对文本进行折行或者调整大小，因为会不便于用户阅读，使用两行以上的标签会使得每个标签非常难以快速扫描。
列表中的复选框一般应用于6个以上选项进行多选的情况，设计样式通常是在列表开头处设计一个正方形描边框。
列表中的复选框
优缺点：与单选框有一样的优势和弊端。
我们很容易陷入到特定组件的设计中，所以我发现最好是从整体上开始思考。然后做出最佳决定，决定使用哪种选择设计最有利于一致性、差异性和层次感。
选项背景是tab控件和标签控件之间最大的区别。一个连续的背景帮助用户理解他们必须要选择一个，而一个分离的背景表明他们可以选择多个。
统一的风格和不统一的风格
Tab控件和标签控件的设计应该在视觉上彼此相似，并且做到与文本框和按钮不同，以不同的视觉样式帮助达到不同的交互层次结构。
不同的样式风格和相同的样式风格
有这么多单选按钮形式可以选择，我发现最好是将单选和复选放在一起才便于比较。iOS端的列表单选勾和描边高亮都是很漂亮的设计，但是与多选框放一起，就会显得不够统一。
（译者注：最左侧的单选复选样式和位置相对比较一致，中间的上下都有对勾会让人产生疑惑，而最右侧的方框高亮和左侧复选框设计差异太大。）
Android & Web vs iOS vs Alternate Pattern
最后说一点，但并非是最不重要的，就是图片的位置。选择控件一般位于列表项的开头位置，但是，当列表项中有图片时，就有人开始纠结应该是放前面好还是放后面好。
这里，我选择将控件保留在开头位置，因为控件是必须存在的，而图片是可选或者可添加的。（译者注：如果在一个设计规范中，选项控件都在左侧，那也应该尽量让其他控件也保持在左侧来保证一致性。）
Image in the End vs Start Position
还有一种很好用的选择控件是滚筒（https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/）。当有许多短词并且垂直控件有限时，就可以使用它。建议只在其中放置文本，它的使用要求比较高，在Android和iOS中都很复杂。
原文：https://medium.com/tap-to-dismiss/select-to-proceed-996d19c8a7a4
作者：Linzi Berry
译者：彩云Sky，公众号：彩云译设计
本文由 @彩云Sky 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
*请认真填写需求信息，我们会在24小时内与您取得联系。
