前面我们学习了各种各样的标签。不过使用这些标签做出来的都是静态页面，动态页面是没办法实现的。如果想要做出一个动态页面，我们就需要借助表单来实现。
表单是我们接触动态页面的第一步。其中表单最重要的作用就是在浏览器端收集用户的信息，然后将数据提交给服务器来处理。比如：注册登录、话费充值等。
表单标签有5种：form、input、textarea、select和option。其中input是单标签，其它是双标签。input、textarea、select、option标签必须要放在form标签内部。
表单根据外观划分的话有八种分别是：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表。
form标签
属性：
| 属性 | 说明 |
| name | 表单名称 |
| method | 提交方式 |
| action | 提交地址 |
| target | 打开方式 |
| enctype | 编码方式 |
(1)name：使用name属性来给表单命名。
(2)method：取值有两个：一个是“get”，另外一个是“post”。
(3)action：指定表单数据提交到哪一个地址进行处理。
(4)target：指定窗口的打开方式。
(5)enctype：一般情况下，我们不需要设置，除非用到上传文件功能。
input标签
属性：
| 属性 | 说明 |
| text | 单行文本框 |
| password | 密码文本框 |
| radio | 单选框 |
| checkbox | 多选框 |
| button、submit、reset | 按钮 |
| file | 文件上传 |
下边根据表单的外观，好好理解和学习。
单行文本框
单行文本框是使用input标签来实现的，其中type属性取值为“text” 。单行文本框有三个属性。
| 属性 | 说明 |
| value | 设置文本框默认值 |
| size | 设置文本框长度 |
| maxlength | 设置文本框最多输入字符数 |
根据这些属性，看个例子。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>单行文本框title>
head>
<body>
<form method="post">
姓名：<input type="text" /><br />
年龄：<input type="text" value="20"/><br />
性别：<input type="text" size="5" /><br />
电话：<input type="text" maxlength="11" />
form>
body>
html>
密码文本框
密码文本框在外观上与单行文本框相似，两者拥有相同的属性(如value、size、maxlength等)。
在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>密码文本框title>
head>
<body>
<form method="post">
账号：<input type="text" /><br />
密码：<input type="password" maxlength="16" />
form>
body>
html>
单选框
单选框也是使用input标签来实现的，其中type属性取值为“radio”。
name属性表示单选按钮所在的组名，如果不设置name属性，单选框中的值能同时选择多个。value表示单选按钮的取值，方便JavaScript或者服务器操作数据。这两个属性必须要设置。checked属性表示默认选中的值。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>单选框title>
head>
<body>
<form method="post">
选择喜欢的：<br />
<input type="radio" name="king" value="刘德华" />刘德华<br />
<input type="radio" name="king" value="张学友" />张学友<br />
<input type="radio" name="king" value="郭富城" />郭富城<br />
<input type="radio" name="king" value="黎明" />黎明<br />
性别：
<input type="radio" name="gender" value="男" checked/>男
<input type="radio" name="gender" value="女" />女
form>
body>
html>
复选框
复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项。
name属性表示复选框所在的组名，而value表示复选框的取值。与单选框一样，这两个属性也必须要设置。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>复选框title>
head>
<body>
<form method="post">
选择喜欢的：<br />
<input type="checkbox" name="king" value="刘德华" />刘德华<br />
<input type="checkbox" name="king" value="张学友" />张学友<br />
<input type="checkbox" name="king" value="郭富城" />郭富城<br />
<input type="checkbox" name="king" value="黎明" />黎明
form>
body>
html>
按钮
常见的按钮有3种：普通按钮(button)，提交按钮(submit)，重置按钮(reset)。
(1)普通按钮一般情况下都是配合JavaScript来进行各种操作的。value的取值就是按钮上的文字。
语法
(2)提交按钮一般都是用来给服务器提交数据的。
语法
" value="提交" />
(3)重置按钮一般用来清除用户在表单中输入的内容。重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。
语法
" value="重置" />
文件上传
文件上传也是使用input标签来实现的，其中type属性取值为“file”。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>文件上传title>
head>
<body>
<form method="post">
<input type="file" />
form>
body>
html>
多行文本框
单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。在HTML中，多行文本框使用的是textarea标签，而不是input标签。
多行文本框的默认显示文本是在标签对的内部设置，而不是在value属性中设置的。
语法：
<textarea rows="行数" cols="列数" value="取值">默认内容textarea>
举例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>多行文本框title>
head>
<body>
<form method="post">
个人简介：<br />
<textarea rows="5" cols="20">介绍一下自己textarea>
form>
body>
html>
下拉列表
下拉列表是由select和option这两个标签配合使用来表示的。这一点与无序列表很像，无序列表是由ul和li这两个标签配合使用来表示。
select标签的常用属性有两个
| 属性 | 说明 |
| multiple | 设置下拉列表可以选择多项 |
| size | 设置下拉列表显示几个列表项 |
option标签的常用属性有两个
| 属性 | 说明 |
| selected | 是否选中 |
| value | 选项值 |
根据各属性练习一个例子
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>下拉列表title>
head>
<body>
<form method="post">
multiple属性：<br />
<select multiple>
<option>HTMLoption>
<option>CSSoption>
<option>JavaScriptoption>
<option>jQueryoption>
<option>HTML5option>
<option>CSS3option>
<option>Vue.jsoption>
select>
form>
<form method="post">
size属性：<br />
<select size="5">
<option>HTMLoption>
<option>CSSoption>
<option>JavaScriptoption>
<option>jQueryoption>
<option>HTML5option>
<option>CSS3option>
<option>Vue.jsoption>
select>
form>
<form method="post">
selected属性：<br />
<select>
<option>HTMLoption>
<option>CSSoption>
<option selected>JavaScriptoption>
<option>jQueryoption>
<option>HTML5option>
<option>CSS3option>
<option>Vue.jsoption>
select>
form>
<form method="post">
value属性：<br />
<select size="5">
<option value="HTML">HTMLoption>
<option value="CSS">CSSoption>
<option value="JavaScript">JavaScriptoption>
<option value="jQuery">jQueryoption>
<option value="HTML5">HTML5option>
<option value="CSS3">CSS3option>
<option value="Vue.js">Vue.jsoption>
select>
form>
body>
html>
将size取值设置为1、2或3时，会发现Chrome浏览器无效。这是因为Chrome浏览器要求最低是4个选项，因此只能设置4及以上的数字。
———————————————————————————————
根据本节学习了表单的相关知识，最后总结一下。
表单标签有5种：form、input、textarea、select和option。
表单根据外观划分为：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表。
标签属性
标签属性
单行和密码文本框属性
普通按钮(button)、提交按钮(submit)、重置按钮(reset)。
下拉列表属性
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
