HTML+CSS：常用表单控件之单选框、多选框、下拉框的介绍

一篇文章我们说了单行文本框和多行文本框，今天呢我们继续看一下表单的其它控件：单选框、复选框、下拉框。

（1）单选框和复选框

在我们表单页面中，经常会有选择性别或者选择爱好这类的内容，使用选择框是一个好主意，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）时，该选项被默认选中

使用练习：

我们创建一个表单，表单里边包含姓别（男、女）选择的单选框，默认选中男以及爱好（唱歌、打游戏、绘画、旅游）选择的多选框，默认选中唱歌。具体的代码如下图所示：

在网页中的显示效果就如下图所示：

（2）下拉框

下拉框也是我们常用的一个表单控件，多用于选择城市地区等。

使用语法：

<option value="向服务器提交的内容" selected="selected">网页显示的内容</option>

</select>

详细讲解：

1、option：option为select下拉子元素，可以有一个或多个，写法类似ul和li，其中的value内容为提交数据到服务器的值（后台程序使用）

2、selected：当设置 selected="selected"（也可以直接简写成selected）时，该选项被默认选中

使用练习：

我们创建一个表单，表单里边包含一个城市的下拉框，下拉框中有北京、上海、天津这三个城市，其中默认选中天津。具体的代码如下图所示：

在网页中的显示效果就如下图所示：

好了，本篇文章就先给大家介绍这几个表单控件的语法以及使用，下篇文章我们将介绍按钮的语法及使用以及完整的表单练习演示，记得平时要多加练习才是王道。

每日金句：做人要像竹子一样每前进一步，都要做一次小结。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

节课，我们实现表单中的单选和多选功能。

对于所有人而言，每天都会面临各种各样的选择。例如：1000W和北大录取通知书我该选哪一个？我是去考研还是去工作？地上有一张50元和一张100元，我要捡哪一张？

在HTML中如何实现单选和多选呢?

我们可以通过在 form 标签里，嵌入 input 标签，通过设置 input 标签的 type 属性值来实现单选和多选。

单选，type 的取值为 radio，radio 是收音机的意思，因为我们收听节目只能调到一个波段，因此用它来表示单选按钮，就是让用户在有限的选择中只选择一个。

多选，type 取值为 checkbox，译为复选框，也叫多选框，让用户在有限的选择中选择更多的选项。

我们来实现一个单选和多选的功能。

打开编辑器，新建一个 radio_checkbox.html 文件，自动补全基础代码，在body标签内部编写一个 form 表单标签，在 form 标签里面添加文本 选择性别： (冒号读出来) ，紧接着添加一个 input 标签，设置标签的 type 属性值为 radio，后面添加文本 "男"，回车换行。

使用同样的方法，再添加一个 input 标签，设置标签的 type 属性值为 radio，后面添加文本 "女"。保存。

用浏览器打开页面，一组性别选择的单选框显示在页面中。使用鼠标点击单选控件，这时你会发现单选框出现了问题，性别居然能选择多个?

在这里需要提醒大家的是：

单选框控件必须成组使用才有意义，并且每组至少需要两个单选框。

而“组”是通过 name 属性来建立的，凡是 name 值相同的就是一组。

同组的单选框，只有一个会处在选中状态，其他的会自动呈现为未选中状态。

因此，如果没有给单选框设置 name 属性，默认每个单选框自成一组，一旦选中这个单选框，要想通过点击来解除选中状态就做不到了。

回到编辑器，为两个 input 单选框定义 name 属性，值设置为 gender。保存。

回到浏览器，刷新。当我们再次点击性别选框的时候，单选的效果实现了。

返回编辑器，在单选框结尾处添加一个 br 标签。回车换行。

输入文本：前端基础包括：在文本后输入 input 中括号 type 等于 checkbox，input[type=checkbox] 按下 tab 键，创建三个多选框控件。

分别在每一个 input 复选框后面添加文本 HTML、CSS、JavaScript。保存。

回到浏览器，刷新，包含三个选项的复选框做好了。鼠标点击复选框，出现了对钩，表示已经选中，再次点击选中的复选框，取消选择。

我们再刷新一下页面，发现单选框和多选框在默认情况下，都没有选中。能不能在打开页面的时候，性别的男和前端基础的HTML，默认选中呢？

单选框和多选框默认选中效果，都可以通过定义 checked 属性来实现，它的值只要不为空，任何字符都可以，通常我们会使用 checked 字符串作为它的值。另外，选中和取消选中只有两个状态，所以也可以不用定义值，只定义一个属性名就可以了。

返回编辑器，给第一个单选控件添加 checked 属性，再给第一个多选控件添加 checked 属性。保存。

回到浏览器，刷新。性别和HTML默认选中了。点击其他控件，单选多选的功能依然有效。

单选框和多选选框我们就讲完了，快自己实现一下吧。

文章配套视频链接点我「链接」

篇介绍了表单的使用，表单有很多控件，比如输入框，密码框、文本域，按钮等。按类型可分如下：

输入类控件
菜单类控件

输入类组件 —— input

此类控件有很多种类型，使用<input type="类型">语法，常见类型如下：

type 值	含义
text	文字字段
password	密码域，用户看不到明文，以*代替
radio	单选按钮
checkbox	多选按钮
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像域，用图像作为背景的提交按钮
hidden	隐藏域，不可见的输入框
file	文本域，用于上传文件等非文本数据

文本输入框和密码框

除了显示形式不一样，其它属性一样，有以下属性：

name —— 定义文字字段名称，用于和其它控件区别，不能包含特殊字符，也不可使用html 标签名称
maxlength —— 定义文本框可输入字符最大长度
size —— 定义文本框在页面中显示的长度
vaule —— 定义文本框中默认的值

如下是文本输入框和密码框制作一个登录表单

html代码：

<!DOCTYPE html>
<html>
<body>
<h1>用户登录</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用户名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密码:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

显示效果：

HTML5 输入类型

除了以上几种类型，HTML5 还增加了多个新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代码：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  数字类型（1 到 5 之间）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 选择颜色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  时间：
  <input type="time" name="usr_time"><br>
  一定范围
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能够在被提交时自动对电子邮件地址进行验证<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  电话：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 类型。<br>
  url：
  <input type="url" name="url">
  提交时能够自动验证 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

单选和多选按钮

使用 type = “radio” 和 type =“checkbox” 定义是单选还是多选，除了name和value属性外，单选和多选都有一个 checked属性定义默认选择的项，checked = “true”指选中那个选项，表单会将 checked = “true” 的选型值传递给后台。

如下实例：

<!DOCTYPE html>
<html>
<body>
<h4>单选和多选</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 苹果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陕西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 广东
<br><br>
<input type="submit">
</form> 
</body>
</html>

显示效果：

单选和多选传递给后台的数据是不一样的，如下会看到地址栏中的数据，多选会发送多个值，后台将会获取一个数组形式的数据。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按钮、提交按钮、重置按钮

普通按钮：type = “button”，一般配合脚本使用，语法如下：

<input type="button" name="名称" value="按钮值" onclick="脚本程序" />

value 值就是按钮在页面显示的文字，onclick属性定义了脚本事件，这里指单击按钮时所进行的处理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按钮">
<input type="button" value="打开窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

单击您好按钮

提交按钮：type = “submit”，用于提交表单内容，是一种特殊按钮。

如刚才的登录表单，提交后会返回结果：

重置按钮：type="reset"，用于清除表单数据，也是一种特殊按钮。

输入数据

点击重置按钮后，表单数据清空

重置清空数据

HTML5 按钮

除了使用input定义按钮，还可以使用 html5 新增的<button> 标签定义按钮，button 使用语法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
</form>

其它输入类控件

隐藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隐藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

显示效果

可以看到，隐藏域在页面中不显示，单击文件域选择文件按钮可以选择文件，比如word文件，电子表格文件等，会以非文本方式传送到后台的，常用来实现文件上传功能。

文本域 —— textarea

除了input 类型的控件，还有文本域 textarea ，一种特殊的文本框，它与input 文本输入框的区别就是可以输入多行文字，input 文本输入框是单行的无法输入多行文字。

如下示例：

<p>textarea 元素定义多行输入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 属性定义文本域的高度是几行，cols 定义文本域宽度占几列，比如上面定义了高10行宽30列的文本域。

下拉菜单和多选列表

下拉菜单作用和单选按钮类似，只不过它更加节省空间，当要选择的选型很多时，就不适合使用radio空间，所以当选项很多的时候，使用下拉菜单，语法如下：

<select name="名称">
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>

多选列表和多选按钮类似，一样为了节省空间，当数据选项比较多时，使用多选列表，语法如下：

<select name="名称" size="可看见的列表项数" multiple>
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>

多选比下拉菜单不同之处是多了一个multiple属性，定义多选的，且表现形式也不一样，不是下拉而是一个列表。

如下代码：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜单：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多选列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

显示效果：

这里需要注意的是，多选列表多选时需要按住ctrl键同时鼠标单击选择才能多选，效果如下：

到这里，已介绍了大部分的表单控件，现在你可以使用他们制作自己的表单，表单通常在动态网站中使用，这为以后制作动态网站打下基础。

还有许多属性没有讲到，比如html5新增的一些属性和功能，可自行参考 w3cshool 等网站学习，感谢关注，学习愉快！

上篇：前端入门——html 表单

下篇：前端入门 —— 网页中使用窗口框架

在线咨询

上一篇：wxpython入门第六步（高级组件）
下一篇：html中网页中如何插入音频和视频？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML+CSS：常用表单控件之单选框、多选框、下拉框的介绍

（1）单选框和复选框

（2）下拉框

输入类组件 —— input

文本域 —— textarea

下拉菜单和多选列表

您的项目需求