当需要向服务器提交数据时，我们一般会选择使用form表单来实现数据的提交。
<form>标签用来表示一个需要向服务器提交的数据表单，在这个form表单的子标签里，需要实现让用户 输入、单选、多选(input标签)，下拉选择(select标签)，点击(button标签或者input标签)，输入大段文字(textarea标签)等操作。
一.form标签的使用
<form action="http://www.baidu.com" method="post">
<!-- 在这里放入input/select/textarea等子标签，用来让用户输入内容 -->
</form>
常见属性
| 属性名 | 取值 | 含义 |
|---|---|---|
| action | url | 表示当点击提交按钮时，form表单里的数据要提交到的服务器地址 |
| method | get或post | 表示向服务器提交数据时的方式，支持get和post提交，默认提交方式是get |
二. form表单的常见属性
| 属性名 | 取值 | 含义 |
|---|---|---|
| type | text | 默认值，显示一个普通的文本输入框 |
| button | 显示一个普通按钮 | |
| submit | 显示一个提交按钮，点击时，会提交所在form表单里的数据 | |
| image | 根据src属性指定的图片路径，加载显示一张图片，作为提交按钮 | |
| reset | 显示一个重置按钮，点击时，会重置所在form表单里的数据 | |
| radio | 显示一个单选框，多个相关联的单选框name属性值要一样，否则无法实现多选 | |
| checkbox | 显示一个复选框 | |
| file | 显示一个文件按钮，点击时可以选择电脑上的文件 | |
| password | 显示一个密码输入框，当用户输入时，会显示成为密文 | |
| number | 显示一个输入框，用户只能输入数字、正负号和字母e,其他非数字无法输入 | |
| 显示一个文本输入框，用户输入的内容要符合电子邮箱地址，否则点击提交按钮时会出现错误提示，无法提交数据 | ||
| tel | 控制用户输入手机号，当用户使用手机访问网页，点击文本框时，会弹出拨号键盘 | |
| name | 任意文本 | 设置input的名称，当提交给服务器时，会作为key提交 |
| value | 任意文本 | 当提交给服务器时，会作为value提交 当input为文本输入框时，设置文本输入框上的内容；当input为按钮时，用来设置按钮上的显示文字 |
| checked | checkeck或者不设置 | 当type为radio或者checkbox时，用来设置默认选中 |
| autofocus | autofocus或者不设置 | 设置当打开页面时，文本输入框是否自动获取焦点 |
| autocomplete | autocomplete或者不设置 | 设置是否自动补全，注意，只有input标签设置了name属性以后，autocomplete才有效 |
| required | required或不设置 | 表示该输入框必须要填写，否则无法提交 |
| readonly | readonly或不设置 | 表示该输入框里的数据不可修改 |
| disabled | disabled或不设置 | 表示禁用文本输入框，多用于按钮 |
| max/min | 数字 | 当type为number时，用来设置最大值和最小值区间 |
| placeholder | 任意文本 | 当input的类型为输入框时，用来在输入框中显示提示信息 |
三 .form表单的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
form 表单
action: 作用是提交给服务器的地址
method: 指定以哪种方式向服务器提交数据
get:所有的请求参数直接拼接到地址栏
post:单独
-->
<!-- <input type="text"> -->
<form action="https://www.baidu.com" method="get">
<!--
input:用来接收用户的输入
type属性,用来接收规定输入的类型
常见的可选值如下:
text:默认值,显示一个普通的文本输入框
number: 允许用户输入数字,包括 . - e
tel: 只在移动端有效
button: 显示一个按钮
radio: 用来显示一个单选按钮,如果想要实现联动,需要给input添加相同的name属性
checkbox:用来显示一个多选框
reset:重置当前form表单里的数据
submit: 用来向服务器提交数据(form 表单的地址),
value属性,用来设置input标签的内容
当type = button 时,用来表示在按钮上显示文字
placeholder属性,用来显示input的输入提示信息
name属性，设置input的名字，当提交给服务器时，会作为key提交
-->
<!-- select标签用来显示一个下拉选择框-->
<span>用户名:</span> <input type="text" value="zhangsan" name="username" accesskey="u"><br>
<span >密码:</span> <input type="password" placeholder="请输入密码" name="password"> <br>
<span>性别:</span>
<!--
label 标签.使用label 标签的for属性和另一个标签的id属性进行关联
-->
<input type="radio" name="sex" id="nan" value="male"> <label for="nan" >男</label>
<input type="radio" name="sex" id="nv" value="female"> <label for="nv">女</label>
<input type="radio" name="sex" id="secret" value="secret"> <label for="secret">保密</label><br>
<span>爱好:</span>
<input type="checkbox" id="tubu" name="hobbies" value="hiking" checked> <label for="tubu">徒步</label>
<input type="checkbox" id="paobu" name="hobbies" value="running"> <label for="paobu">跑步</label>
<input type="checkbox" id="pashan" name="hobbies" value="climbing"> <label for="pashan">爬山</label><br>
<span>手机号:</span> <input type="tel" name="phone">
<input type="button" value="点击发送验证码" id=""><br>
<span>文件:</span> <input type="file" ><br>
<span>照片</span> <input type="image"><br>
<span>省份</span>
<select name="province" >
<option value="hubei">湖北</option>
<option value="henan" selected>河南</option>
<option value="sichuan">四川</option>
<option value="shanxi">陕西</option>
<option value="sx">山西</option>
</select><br>
<input type="reset" value="重置">
<input type="submit" value="注册">
</form>
</body>
</html>
效果图
