1. 表单
表单：用于搜集不同类型的用户输入。
表单元素：表单包含表单元素都有特俗的外观和默认的功能，
例：input、复选框、单选按钮、提交按钮等等。
格式：
<form action="">
<!-- 表单元素-->
</form>
2. input输入框标签
input输入框标签。
<input type="text">
3. type属性
type属性：决定input标签的功能和外观。
type="texe" 明文框
type="password" 暗文框/密文框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入框</title>
</head>
<body>
<form action="">
账户：<input type="text">
<br>
密码：<input type="password">
</form>
</body>
</html>
4. value默认值属性
value属性：设置默认值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>默认值</title>
</head>
<body>
<form action="">
账户：<input type="text" value="admin">
<br>
密码：<input type="text">
</form>
</body>
</html>
5. radio单选框属性
radio属性：设置单选框。
注意点：默认情况下单选框不会互斥。
设置互斥：每个单选框设置一个name属性，name属性的值必须相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选框</title>
</head>
<body>
<form action="">
性别：
<input type="radio">男
<input type="radio">女
<br>
性别：
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</form>
</body>
</html>
6.checked默认选择属性
checked属性：设置默认选择。
checked="checked"
在HTML中，如果属性和取值名称相同可以只写属性名称。
例：
checked="checked"
checked
但是在开发中推荐不使用省略写法。
注意：测试中两组选项框的name值做好区分！
如果两组的name值都是设置gender后会出现两个checked属性，以会最后一次的设置为主。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>默认单选框</title>
</head>
<body>
<form action="">
性别：
<input type="radio" name="gender1" checked="checked">男
<input type="radio" name="gender1">女
<br>
性别：
<input type="radio" name="gender2" checked>男
<input type="radio" name="gender2">女
</form>
</body>
</html>
7. checkbox多选框属性
checkbox属性设置选框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多选框</title>
</head>
<body>
<form action="">
你想关注的板块:
<br>
<input type="checkbox">IT
<br>
<input type="checkbox">C语言
<br>
<input type="checkbox">Python
<br>
<input type="checkbox">Linux
<br>
<input type="checkbox">后端开发
<br>
<input type="checkbox">数据库
</form>
</body>
</html>
8. 多选框默认选中
使用checked属性设置一次就默认选中一个。
多选中可以默认选一个，也可以默认多个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多选框默认</title>
</head>
<body>
<form action="">
你想关注的板块：
<br>
<input type="checkbox">IT
<br>
<input type="checkbox">C语言
<br>
<input type="checkbox" checked="checked">Python
<br>
<input type="checkbox">Linux
<br>
<input type="checkbox">后端开发
<br>
<input type="checkbox" checked="checked">数据库
</form>
</body>
</html>
9. 按钮
未定义按钮
type="button" 设置文字按钮，value属性置按钮的名称。
type="images" 设置图片按钮，src属性设置图片的地址，height/width属性设置图片高/宽。
默认功能按钮
type="reset" 设置重置按钮，清空表单的数据，默认有名称也可以通过value设属性置按钮的名称。
type="submit" 设置提交按钮，提交表单的数据并刷新网页。
注意点：
默认带功能的按钮名字在不同的渲染引擎会有不同解释的名称，
想要名称在任何浏览器都显示相同的名称就需要设置vaule属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
</head>
<body>
<form action="">
<h1>账户注册</h1>
名称：<input type="test">
<br>
密码：<input type="password">
<br>
<input type="button" value="登入">
<input type="image" src="image/login.jpg" height="30px" width="50px">
<input type="reset">
<input type="reset" value="清空">
<input type="submit">
</form>
</body>
</html>
10. action属性
action属性：设置接受form表单数据提交地址。
注意事项：
1.服务器的地址，action="提交地址"
2.需要提交哪些数据，设置name属性。
数据以 name的值="对应的表单数据" 的形式提交。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交地址</title>
</head>
<body>
<form action="https://www.baidu.com">
<h1>账户注册</h1>
名称：<input type="text" name="name">
<br>
密码：<input type="password" name="password">
<br>
<input type="submit">
</form>
</body>
</html>
https://www.baidu.com/?name=kid&password=123
在action中这种百度的地址，表单提交的数据会跟着这个地址的问号的后面。
11. midded隐藏域
type="midden" 设置隐藏域，不会显示在页面中，一般用于悄悄的收集用户信息。（钓鱼网站的常用套路）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏域</title>
</head>
<body>
<form action="https://www.baidu.com">
<h1>账户注册</h1>
名称：<input type="text" name="name">
<br>
密码：<input type="password" name="password">
<input type="hidden" name="lv" value="0">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
https://www.baidu.com/?name=kid&password=123&lv=0
隐藏域的表单数据跟随着被提交。
12. label 光标聚焦
默认情况下input的文字提示信息和输入框是没有关系的。
label标签：将文字提示信息和输入框进行绑定,点击input的文字提示信息，将光标聚焦到框内。
方式1：
lebel标签中写文字提示信息。
input标签中设置id属性。
lebel标签的for属性的值设置对应input中的id属性的值。
<label for="account">账户：</label>
<input type="text" id="account" name="name">
方式2：
lebel标签将input的文字提示信息和输入框括起来。
<label>账户：<input type="text" name="name"></label>
方式3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>光标聚焦方式1</title>
</head>
<body>
<form action="">
<h1>账户注册</h1>
<label for="account">账户：</label>
<input type="text" id="account" name="name">
<br>
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>光标聚焦方式2</title>
</head>
<body>
<form action="">
<h1>账户注册</h1>
<label>账户：<input type="text" name="name"></label>
<br>
<label>密码：<input type="password" name="password"></label>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>光标聚焦方式3</title>
</head>
<body>
<form action="">
<h1>账户注册</h1>
<label for="account">账户：<input type="text" name="name" id="account"></label>
<br>
<label for="pwd">密码：<input type="password" name="password" id="pwd"></label>
<br>
<label for="B">A：<input type="text" name="B" id="A"></label>
<br>
<label for="A">B：<input type="password" name="A" id="B"></label>
</form>
</body>
</html>
13. datalist单选列表标签
datalist标签：在input框中提供单选列表。
这个标签早某些浏览器上不支持。
设置绑定关系：
1.先设置一个input框。
2.设置datalist标签，并设id值。
3.datalist标签内设置option标签，option标签为列表内容。
4.input的list属性的值设置对应设置datalist标签的id属性的值。
input的name的值为option的value属性为值，在选中时确定等于关系。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>待选框</title>
</head>
<body>
<form action="https://www.baidu.com">
你的班级：<input type="text" list="list" name="class">
<datalist id="list">
<option value="一年级">一年级</option>
<option value="二年级">二年级</option>
<option value="三年级">三年级</option>
<option value="四年级">四年级</option>
<option value="五年级">五年级</option>
<option value="六年级">六年级</option>
</datalist>
<input type="submit">
</form>
</body>
</html>
下面5个为html5新增。
14. email邮箱
type="email" 邮箱格式，自动校验输入的内容是否符合邮箱的格式。
邮箱格式需要包含@符号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮箱</title>
</head>
<body>
<form action="">
邮箱： <input type="email">
<br>
<input type="submit">
</form>
</body>
</html>
15. URL地址
type="url" url格式，自动检验输入的内容是否符合url格式。
https://xxx.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>url格式</title>
</head>
<body>
<form action="">
域名：<input type="url">
<br>
<input type="submit">
</form>
</body>
</html>
16. number数字
type="number" 输入格式，非数字无法输入，带有一组↕符号，可以上下按序列切换数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字格式</title>
</head>
<body>
<form action="">
数字：<input type="number">
</form>
</body>
</html>
17. date日历
type="date" 提供一个日历，可通过日历选择时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日历</title>
</head>
<body>
<form action="">
你的生日：<input type="date">
</form>
</body>
</html>
18.color颜色
type="color" 提供一个颜色板，可以选择颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色</title>
</head>
<body>
<form action="">
颜色：<input type="color">
</form>
</body>
</html>
19.select下拉列表
select标签：下拉列表 不能输入内容，直接在列表中选择内容。
格式：
<select name="value" id="">
<option value="xx">xx</option>
</select>
默认选中的是第一个option标签的内容。
在option中设置selected属性修改默认选中。
selected="selected" 修改默认选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<form action="">
城市：<select name="value" id="">
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="深圳">深圳</option>
</select>
通道：<select name="value" id=" ">
<option value="通道1">通道1</option>
<option value="通道2" selected="selected">通道2</option>
<option value="通道3">通道3</option>
</select>
</form>
</body>
</html>
20.optgroup下拉列表分组
optgroup标签 为option标签进行分组。
被optgroup标签包裹的option标签为一组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表分组</title>
</head>
<body>
<form action="">
<select name="value">
<optgroup label="字母街">
<option value="A街道">A街道</option>
<option value="B街道">B街道</option>
<option value="C街道">C街道</option>
<option value="D街道">D街道</option>
</optgroup>
<optgroup label="数字街">
<option value="1街道">1街道</option>
<option value="2街道">2街道</option>
<option value="3街道">3街道</option>
<option value="4街道">4街道</option>
</optgroup>
</select>
</form>
</body>
</html>
21.textarea 文本框
textarea标签 设置文本框
有一个固定的大小，会自动换行。
cols属性设置文本区内的可见宽度，超过就换到下一行。
rows属性设置文本区内的可见高度，（行数没有限制可以向下继续写入）
手动拉伸文本框：右下角处可以选中拖动文本框，可以通过cs代码关闭这个分功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框</title>
</head>
<body>
<form action="">
内容：<textarea name="" id="" cols="3" rows="3">
</textarea>
</form>
</body>
</html>
22.表单的边框/标题
fieldset标签 设置表单的边框，将表单的所有标签括起来。
legend标签 设置表单的标题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的边框和标题</title>
</head>
<body>
<form action="">
<fieldset>
<legend>账户注册</legend>
账户：<input type="text">
<br>
密码：<input type="password">
<br>
<input type="submit">
</fieldset>
</form>
</body>
</html>
23.练习
在单选款和多选框中name属性的值必须一致。
在表单标签中,使用value来指定提交的数据。
按钮标签的数据值不会随表单提交。
先不要设置value值为中文，涉及字符编码的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lj</title>
</head>
<body>
<form action="https://www.baidu.com">
<fieldset>
<legend>账户注册</legend>
<p>
<label for="account">账户： <input type="text" id="account" name="name"></label>
</p>
<p>
<label for="pwd">密码： <input type="password" id="pwd" name="password"></label>
</p>
<p>
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="secrecy" checked="checked">保密
</p>
<p>
关注板块：
<input type="checkbox" name="modular" value="C">C
<input type="checkbox" name="modular" value="Python" checked="checked">Python
<input type="checkbox" name="modular" value="Linux"> Linux
</p>
<p>
简介：
<textarea name="introduction" cols="27" rows="1"></textarea>
</p>
<p>
生日：
<input type="date" name="date">
</p>
<p>
邮箱：
<input type="email" name="email">
</p>
<p>
个人主页：
<input type="url" name="my_url">
</p>
<p>
页面颜色：
<input type="color" name="color">
</p>
<p>
手机号：
<input type="number" name="phone">
</p>
<p>
所在城市：
<select name="city">
<option value="A">A城市</option>
<option value="B">B城市</option>
</select>
</p>
<p>
会员：
<select name="vip">
<optgroup label="按年">
<option value="one_year">一年</option>
<option value="two_year" selected="selected">两年</option>
</optgroup>
<optgroup label="按月">
<option value="one_mouth">一个月</option>
<option value="two_mouth">两个月</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="清除">
</p>
</fieldset>
</form>
</body>
</html>
https://www.baidu.com/?name=kid&password=123&gender=male&modular=Python&modular=Linux&introduction=123&date=2021-09-15&email=10086%40qq.com&my_url=https%3A%2F%2Fwww.baidu.com&color=%23bf4545&phone=18177354117&city=B&vip=two_year