1.表单的主要作用
收集用户信息
2.表单的组成
-
表单域
-
表单元素（也叫表单控件）
-
提示信息
3.表单域
表单域是包含表单元素的区域，在html中，用<form></form>标签定义表单域。<form>会将它所包围的表单元素信息提交给后端服务器，用以用户信息的收集和传递。
语法格式：
<form action="url地址" method="提交方式" name="表单域名称"> 表单元素 </form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接受表单数据的服务器url地址 |
| method | GET/POST | 设定表单数据的提交方式 |
| name | 名称 | 指定某一个表单，便于区分 |
4.表单元素（表单控件）
-
input输入表单元素
-
select下拉表单元素
-
textarea文本域元素
4.1. input表单元素
-
单标签，语法格式为<input />
-
<input>标签包含type属性，type有不同的属性值，用来指定不同的控件元素。
语法格式为:
<input type="属性值" />
1)type属性值及描述：
| 属性值 | 描述 |
|---|---|
| text | 文本框,用户可以在里面输入任何文字 |
| password | 密码框,用户看不见在里面输入的密码 |
| radio | 单选按钮，可实现多选一 |
| checkbox | 复选框，可实现多选 |
| submit | 提交按钮，把表单数据发送到服务器 |
| reset | 重置按钮，清除表单中所有数据 |
| button | 普通可点击按钮，用来通过js启动脚本,如：发送验证码 |
| file | 文件域，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
2)input标签的其他属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 用户自定义 | 定义input表单元素的名称，单选一时必须每一个元素名称都是一样的才能实现 |
| value | 用户自定义 | input元素的值 |
| checked | checked | 规定该input元素首次加载时被选中 |
| maxlength | 正整数 | 规定输入字段中，字符最大长度 |
-
name和value是每个表单元素都有的属性值，主要给后台人员看。
-
name表单元素的名字，要求单选按钮和复选框各自的name值一致。
-
checked主要针对单选按钮和复选框，主要作用是在首次加载时，默认选中某一特定表单元素
3)code:
<!DOCTYPE html> <!-- --author:TSCCG --date:2021/04/09 --> <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="xxx.php" method="GET" > <!-- text 文本框 用户可以在里面输入任何文字 --> 用户名:<input type="text" name="user" value="请输入用户名" maxlength="5"> <br> <!-- password 密码框 用户看不见在里面输入的密码 --> 密码:<input type="password" name="pwd"> <br> <!-- radio 单选按钮 可实现多选一--> <!-- name 是表单元素名字，定义表单元素名称 单选一时必须每一个元素都是相同的名称才能实现 --> 性别:男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"> <br> <!-- checkbox 复选框 可实现多选--> 爱好:抽烟<input type="checkbox" name="hobby" value="抽烟" checked="checked"> 喝酒<input type="checkbox" name="hobby" value="喝酒" checked="checked"> 烫头<input type="checkbox" name="hobby" value="烫头"> <br> <!-- submit 提交form表单域数据到后台 --> <input type="submit" value="注册"> <input type="reset" value="重新填写"> <!-- button 普通按钮 发送手机验证码 后期搭配js使用 --> <input type="button" value="发送手机验证码"> <br> <!-- 文件域 file 上传文件 --> <input type="file"> ? </form> </body> </html>
4.2. label标签
-
<label>标签不是表单元素，但经常与表单元素配合使用。
-
<label>用于绑定一个表单元素，当鼠标点击上图中文本"男"或者图片时，可以直接选定该表单元素，不需要精确的点击圆框按钮，增加用户体验。
语法：
<label for="sex">男</label> <input type="radio" id="sex">
注意：<label>标签内的for与相关元素内的id属性值必须一致
4.3.select表单元素
-
多选项，节约页面空间，定义下拉列表
-
语法：
<select> <option>--请选择地区--</option> <option>河南</option> <option>北京</option> <option selected="selected">广州</option> </select>
-
至少包含一对option
-
在<option>中定义selected="selected",表默认选择此项。
-
4.4.textarea表单元素
-
用户输入内容较多的情况不宜使用文本框标签，应使用<textarea>文本域标签
-
定义多行文本输入的控件
-
语法：
<textarea>请输入留言</textarea>
5.注册案例
code:
<!DOCTYPE html> <!-- --author:TSCCG --date:2021/04/10 --> <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> <h2>青春不常在，抓紧谈恋爱</h2> <table width="500" border="0"> <!-- 第一行 性别--> <tr> <td>性别</td> <td> <input type="radio" name="sex" id="nan" value="男" checked="checked"> <label for="nan"><img src="images/man.jpg"> 男</label> <input type="radio" name="sex" id="nv" value="女"> <label for="nv"><img src="images/women.jpg"> 女</label> </td> </tr> <!-- 第二行 生日--> <tr> <td>生日</td> <td> <select> <option>--请选择年--</option> <option>1999</option> <option>2000</option> <option>2001</option> </select> <select> <option>--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select> <option>--请选择日--</option> <option>1</option> <option>2</option> <option>3</option> </select> </td> </tr> <!-- 第三行 所在地区--> <tr> <td>所在地区</td> <td> <input type="text" value="请输入您所在城市"> </td> </tr> <!-- 第四行 婚姻状况--> <tr> <td>婚姻状况</td> <td> <input type="radio" value="未婚" name="marrey" id="unmarry" checked="checked"><label for="unmarry">未婚</label> <input type="radio" value="已婚" name="marrey" id="marry"><label for="marry">已婚</label> <input type="radio" value="离婚" name="marrey" id="broken"><label for="broken">离婚</label> </td> </tr> <!-- 第五行 学历--> <tr> <td>学历</td> <td> <input type="text" value="本科"> </td> </tr> <!-- 第六行 喜欢的类型--> <tr> <td>喜欢的类型</td> <td> <input type="checkbox" name="lovertype" id="height"> <label for="height">高的</label> <input type="checkbox" name="lovertype" id="low"> <label for="low">矮的</label> <input type="checkbox" name="lovertype" id="fat"> <label for="fat">胖的</label> <input type="checkbox" name="lovertype" id="unfat"> <label for="unfat">瘦的</label> <input type="checkbox" name="lovertype" id="alive" checked="checked"> <label for="alive">活的</label> </td> </tr> <!-- 第七行 自我介绍--> <tr> <td>自我介绍</td> <td> <input type="textarea" value="请简单的描述一下"> </td> </tr> <!-- 第八行 免费注册--> <tr> <td></td> <td> <input type="submit" value="免费注册"> </td> </tr> <!-- 第九行 我同意隐私注册条款--> <tr> <td></td> <td> <input type="checkbox" checked="checked" id="agree"> <label for="agree">我同意隐私注册条款</label> </td> </tr> <!-- 第十行 已有账号，点击登陆--> <tr> <td></td> <td> <a href="#">已有账号，点击登陆</a> </td> </tr> </table> <h3>我承诺</h3> <ul> <li>年满18岁、单身</li> <li>态度严肃</li> <li>真心寻找另一半</li> </ul> </body> </html>