HTML的基本知识（七）——表单的基本知识及案例
我为什么要努力？我喜欢的东西都很贵，我想去的地方都很远，我爱的人超级完美，这就是我努力的理由。
一、认识表单
1、表单在WEB网页中用来给访问者填写信息，从而采集客户端信息，使得网页居右交互功能，一般是将表单设计在一个HTML文档中，当用户填写完信息后做提交操作，于是表单的内容就 从客户端的浏览器传送到服务器上，这样网页就具有了交互性。
2、表单的作用：提交数据到服务器，使得页面具有交互性
3、标签：
<form action="提交的地址" name="表单的名称" method="提交的方式"></form>
注意：form之间不能相互嵌套，一个页面可以有多个form表单
提交的方式有两种： get（默认值）和post的区别：
（1）get提交的数据不安全，会在地址栏中显示，post安全
（2）get提交的数据的大小有限制（不能超过2KB），post理论上没有限制
二、表单元素
普通的单行文本框：<input type="text" />
密码：<input type="password" />
单选按钮： <input type="radio"/>
多选按钮：<input type="checkbox"/>
提交按钮： <input type="submit"/>
重置按钮：<input type="reset"/>
没有功能的按钮： <input type="button"/>
提交按钮： <button>提交</button>
默认重置按钮： <button type="reset"/></button>
没有功能的按钮<button type="button"/></button>
文件域：<input type="file">注意把form的编码格式改为二进制，enctype="application/x-www-form-urlencoded"
隐藏域：<input type="hidden"> 隐藏后在页面不显示，但是携带的信息可以正常提交
下拉列表：
<select name="" id="">
<option value="">...</option>
<option value="">...</option>
<option value="">...</option>
<option value="">...</option>
</select>
<select name="" id="">
<optgroup label="组名">
<option value="">...</option>
<option value="">...</option>
<option value="">...</option>
<option value="">...</option>
</optgroup>
</select>
多行文本框：<textarea >...</textarea>
提升用户体验，配合单选按钮和多选按钮使用:<label for=""></label> lable 标签的for属性和input的id属性一致
三、表单元素的基本属性
type 表单元素的类型
name 表单元素的名称
value 当前值
checked 默认被选中，配合单选按钮和多选按钮使用
selected 默认显示，配合option使用
disabled 禁用
readonly 只读
四、练习题
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习题</title>
</head>
<body>
<form action="form1">
<table border="3" bordercolor="black" width="600" height="400" cellspacing="0" align="center">
<tr>
<td align="right">
用户名：
</td>
<td>
<input type="text" placeholder="请输入用户名">
</td>
</tr>
<tr>
<td align="right">
密码：
</td>
<td>
<input type="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td>
<input type="password" placeholder="请再次输入密码">
</td>
</tr>
<tr>
<td align="right">
验证码：
</td>
<td>
<input type="text" placeholder="请输入验证码">
</td>
</tr>
<tr>
<td align="right">
性别：
</td>
<td>
<input type="radio" name="sex" id="man"><label for="man" checked>男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
</td>
</tr>
<tr>
<td align="right">年龄：</td>
<td>
<input type="text" placeholder="请输入年龄">
</td>
</tr>
<tr>
<td align="right">
爱好：
</td>
<td>
<select name="shopping" id="shopping">
<option value="0">购物</option>
<option value="0">购物</option>
<option value="0">购物</option>
</select>
</td>
</tr>
<tr>
<td align="right">
你喜欢的游戏：
</td>
<td>
<input type="checkbox" name="game" id="games"><label for="games">穿越火线</label>
<input type="checkbox" name="game" id="hero"><label for="hero">英雄联盟</label>
<input type="checkbox" name="game" id="honor"><label for="honor">王者荣耀</label>
<input type="checkbox" name="game" id="happy"><label for="happy">开心消消乐</label>
</td>
</tr>
<tr>
<td align="right">
邮箱：
</td>
<td>
<input type="email" placeholder="请输入邮箱">
</td>
</tr>
<tr>
<td align="right">
邮箱密码：
</td>
<td>
<input type="password" placeholder="请输入邮箱密码">
</td>
</tr>
<tr>
<td align="right">
<input type="submit">
</td>
<td>
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
本期结束，我们下期再见！
