很多时候，当我们想要填写信息的时候，都希望有个快熟选择，无需手动填写信息。选择类表单元素就是能帮助我们快速选择信息，提高效率。

标

1. 如何设置下拉选择框？
2. 如何设置单选或者多选选择框？
3. 如何将单选选择框分组？

选择表单元素

可以快速选择想要的选项，不需要我们手动输入。在各大网站的表单里普遍使用。

下拉选择框

可以快速选择想要的选项

• select--创建下拉 列表容器
• option--创建下拉 列表选项

<select>
	<option>请选择</option>
	<option>我是苹果</option>
	<option>我是香蕉</option>
</select>

单选按钮选框

只选其中一项选项

• 设置type="radio"，即可设置为单选按钮选框
• 要设置为同一组时，将name都设置为同一个参数

男:<input type="radio" name="sex" />
女:<input type="radio" name="sex" />

复选(多选)按钮选框

可以多选项目

• 设置type="checkbox"，即可设置为多选按钮选框

<input type="checkbox" />苹果
<input type="checkbox" />香蕉
<input type="checkbox"/>草莓

总结

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

HTML表单

HTML 表单用于搜集不同类型的用户输入。

<form> 元素

<form> 元素定义 HTML 表单：

语法：<form></form>

HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素有很多形态，根据不同的 type 属性。

1. 文本输入

<input type="text"> 定义用于文本输入的单行输入字段

2、密码框

<input type="password"> 定义单选按钮。

密码框是为了隐藏用户密码信息的输入框，语法形式与文本框差不多，不同的是类型 为 password。

3、单选按钮输入

<input type="radio"> 定义单选按钮。

单选按钮是在表单中有多个选项，且只能选一个的情况下使用。

注：checked表示默认选中项。

如：<input type="radio" name="sex"checked> 男

<input type="radio" name="sex"> 女

表示默认选中男项。

4、复选框（Checkboxes）

<input type="checkbox"> 定义了复选框。

复选框是可以选多个选项的选项框，与单选不同的是复选框可以选取多个选项，而且也可以默认几个选项都处于选中状态。

注：checked表示默认选中项。

如：<input type="checkbox" checked>

5、<select> 元素（下拉列表）

下拉列表是可以选择的列表，当在列表中选择要选的选项时使用，只能选其中一个选项（通过设置也可以选几项）。

语法：

<select>

<option>北京</option>

<option selected>上海</option>

</select>

注：selected 表示默认选中项

6、<textarea> 元素（文本域）

<textarea> 元素定义多行输入字段：

文本域是用在要输入多行文本，填写大量的文字时用到。

TML 基础

非常简单的HTML文档

HTML 标题

HTML 段落

HTML 链接

HTML 图片

实例解析

HTML 标题

HTML 标题

在html源码中插入注释

插入水平线

实例解析

HTML 段落

HTML 段落

更多段落

本例演示在 HTML 文档中折行的使用。

HTML 格式化的某些问题。

实例解析

HTML 文本格式化

文本格式化

此例演示如何使用 pre 标签对空行和空格进行控制。

此例演示不同的"计算机输出"标签的显示效果。

此例演示如何在 HTML 文件中写地址。

此例演示如何实现缩写或首字母缩写。

此例演示如何改变文字的方向。

此例演示如何实现长短不一的引用语。

文本下划线与删除线

实例解析

HTML 样式

HTML Style 元素

背景色样式

字体样式，颜色，大小

文本对齐样式

设置文本字体

设置文本字体大小

设置文本字体颜色

设置文本字体，字体大小，字体颜色

HTML使用不同样式

没有下划线的链接

链接到一个外部样式表

实例解析

HTML 链接

创建超级链接

将图像作为链接

在新的浏览器窗口打开链接

链接到同一个页面的不同位置

跳出框架

创建电子邮件链接

创建电子邮件链接 2

实例解析

HTML 图像

插入图像

从不同的位置插入图片

排列图片

本例演示如何使图片浮动至段落的左边或右边。

制作图像链接

创建图像映射

实例解析

HTML 表格

简单的表格

没有边框的表格

表格中的表头

带有标题的表格

跨行或跨列的表格单元格

表格内的标签

单元格边距(Cell padding)

单元格间距(Cell spacing)

实例解析

HTML 列表

无序列表

有序列表

不同类型的有序列表

不同类型的无序列表

嵌套列表

嵌套列表 2

定义列表

实例解析

HTML Forms 和 Input

创建文本域(Text fields)

创建密码域

复选框

单选按钮

简单的下拉列表

预选下拉列表

本例演示如何创建一个文本域（多行文本输入控件）。

创建一个按钮

本例演示如何在数据周围绘制一个带标题的框。

带有文本域与输入域的表单

带有复选框与提交按钮的form表单

带有单选框与提交按钮的表单

发送邮件表单

实例解析

HTML iframe

内联框架 (HTML页面中插入框架)

实例解析

HTML 头部元素

描述了文档标题

HTML页面中默认的URL链接

提供文档元数据

实例解析

HTML 脚本

插入一个脚本

使用 <noscript> 标签

实例解析

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！