目录
一、表单的初步认识
作用：方便收集用户信息，让页面和用户实现交互
组成部分：表单域、表单控件、提示信息
二、组成部分
1、表单域
定义：表单域是一个包含表单元素的区域
在html标签中，用<form>标签定义表单域，来实现对用户信息的收集于传递
作用：将范围内收集到的表单信息提交到服务器
语法格式：
<body>
<form action="url地址" method="提交方式" name="表单域名称"></form>
</body>常见属性：
| 属性 | 属性值 | 作用 |
| action | url地址 | 接受并处理表单所收集数据的服务器程序的url地址 |
| method | get/post | 表单数据的提交方式 |
| name | 名称 | 定义表单的名称，便于区分同一个页面中的多个表单域 |
2、表单控件
定义：表单元素就是允许用户在表单中输入或者选择的内容控件，又称表单元素
类型：
①input输入表单元素
定义：在<input>标签中，包含一个type属性，设置不同的type属性，可以使输入字段拥有多种形式
语法格式：
<body>
<form>
<input type="属性值">
</form>
</body>ps：①<input/>也可写成<input>标签为单标签
②type设置不同的属性值可以用来定义不同的控件类型
| 属性值 | 描述 |
| text | 定义单行的输入字段，用户可以在其中输入文本，默认宽度为20字符 |
| password | 定义密码字段，输入的该字段字符会被掩码 |
| radio | 定义单选按钮 |
| submit | 定义提交按钮，把表单数据发送到后台服务器 |
| reset | 定义重置按钮，清理已经填写好的表单中的数据 |
| button | 定义可点击按钮，数据不会被提交到后台，多用于Javascript启动脚本 |
| file | 定义文件域，供文件上传 |
| 属性 | 属性值 | 描述 |
| type | 见上表 | 不同的属性值可以用来定义不同的控件类型 |
| name | 用户自定义 | 定义input元素的名称 |
| value | 用户自定义 | 定义元素的值，默认显示在页面 |
| checked | checked | 规定页面首次打开时被默认选中 |
| maxlength | 正整数 | 规定用户可以输入的最大字段长度 |
ps：①name和value是每个表单都有的属性值，主要给后台人员使用
②name表单元素的名字，要求单选按钮和复选框要有相同的name值
③checked属性是针对于单选按钮和复选框使用的
例：
<body>
<form>
<!-- text 文本框 用户可以在里面输入任何文字 -->
name：<input type="text" name="username" value="please input your name">
<!-- password 密码框 用户看不见输入的密码 -->
<br>password：<input type="password" name="password" maxlength="6">
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 要实现单选按钮必须拥有相同的名字name 才可以实现多选一 -->
<!-- 单选按钮和复选框可以设置checked属性，单页面打开的时候默认选中这个按钮 -->
<br>sex: 男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女">
<!-- checkbox 复选框 可以实现多选 -->
<br>habit: eat<input type="checkbox" name="babit" value="eat" checked="checked"> sleep<input type="checkbox"
name="babit" value="sleep"> play<input type="checkbox" name="babit" value="piay">
<!-- sbmit 定义提交按钮 把填写的数据提交到后台服务器 -->
<br><input type="submit" value="确认提交">
<!-- reset 定义重置按钮 把填写的数据重新清除 -->
<input type="reset" value="重置数据">
<!-- button 定义一个普通按钮 去做一些对应的事情 -->
<input type="button" value="获取短信验证码">
<!-- file 文件域 可通过其上传文件 -->
<br><input type="file">
</form>
</body>
一个特殊标签：label标签
定义：<label>标签用于绑定一个表单元素，当点击<label>标签内的文本是，浏览器就会自动将焦点(光标)转到对应的表单元素上
语法格式：
<body>
<!-- 当点击man时也会勾选上man，而不是说只能通过鼠标去点击选项那个小圆点 -->
<label for="属性">man</label>
<input type="radio" name="sex" id="属性">
</body>ps：<label>标签的for属性应当和相关元素的id属性相同
②select下拉表单元素
定义：在html页面中可以有多个选项供用户选择，且通过下拉框形式来节约空间
语法格式：
<body>
<form>
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
</select>
</form>
</body>ps：①<select>中至少包含一对<option>
②在<option>中定义selected=“selected”时，该选项为默认选项
例：
<body>
<form>
地址：
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option selected="select">成都</option>
</select>
</form>
</body>
③textarea文本域表单元素
定义：当用户输入的内容较多时，不能使用文本框表单了，因此可用<textarea>标签来定义多行文本输入的控件
语法格式：
<body>
<form>
<textarea>please write ......</textarea>
</form>
</body>
ps：①<textarea>可以创建多行文本输入框
②clos="每行中的字符数"，rows="显示的行数"，但是一般不使用，后续多用css来改变大小
三、综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单综合案例9.26</title>
</head>
<body>
<h3>相关信息注册页面</h3>
<table>
<!-- 第一行 -->
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" id="man" checked="checked"><label for="man">男生 <img
src="./picture/表单综合案例9.26man.jpg " width="17px"></label>
<input type="radio" name="sex" id="woman"><label for="woman">女生 <img
src="./picture/表单综合案例9.26woman.jpg " width="17px"></label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日：</td>
<td>
<select>
<option>---请选择年份---</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>---请选择月份---</option>
<option>12</option>
<option>8</option>
<option>6</option>
<option>4</option>
</select>
<select>
<option>---请选择日---</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>地址: </td>
<td><input type="text" value="请输入地址..."></td>
</tr>
<!-- 第四行 -->
<tr>
<td>政治面貌: </td>
<td> <input type="radio" name="look" id="1" checked="checked"><label for="1">群众</label>
<input type="radio" name="look" id="2"><label for="2">共青团员</label>
<input type="radio" name="look" id="3"><label for="3">党员</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历:</td>
<td><input type="text" value="本科"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>爱好:</td>
<td><input type="checkbox" name="habit" id="1" checked="checked">吃饭
<input type="checkbox" name="habit" id="2">睡觉
<input type="checkbox" name="habit" id="3">打豆豆
<input type="checkbox" name="habit" id="4">冥想
<input type="checkbox" name="habit" id="5">发呆
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>自我介绍</td>
<td><textarea>个人简介</textarea></td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<!-- 第九行 -->
<tr>
<td></td>
<td><input type="checkbox" checked="checked">我同意注册会员</td>
</tr>
<!-- 第十行 -->
<tr>
<td></td>
<td><a href="#">我是会员,立即登录</a></td>
</tr>
<!-- 最后部分 -->
<tr>
<td></td>
<td>
<h5>我希望</h5>
<ul>
<li>好好学习</li>
<li>天天向上</li>
<li>爱我所爱</li>
<li>做我所想</li>
</ul>
</td>
</tr>
</table>
</body>
</html>