Form表单
祖先级元素form 属性action 是表示提交地址
Method表示提交方式（显式，隐式）
Get用户输入的信息会显示在提交地址中，post提交地址中不会显示用户输入的内容。
<form action=”#” method=”get/post”>
子元素：
用户名：<input type=”text” placeholder=”请输入” name=”username”>
密码：<input type=”password” placeholder=”只输入数字和字母” name=”pwd”>
手机号：<input type=”text” name=”mobile” maxlength=”11” pattern=””>
性别：男<input type=”radio” name=”gender” value=”male”>
女<input type=”radio” name=”gender” value=”female”>
input输入框
type选取输入框的类型
name当前输入框内容的名称
placeholder提示信息
maxlength最大长度扩展：键值对pattern正则表达式（判断用户输入的内容是否符合规则）
单选框操作步骤：
Step1：type=“radio”
Step2：name的值要相同
由于单选框是用户选择的，而不是用户输入的，
因此，要把相应的值也添加进来，以便进行提交，value表示值。
多选框操作步骤（复选框）：
Step1：type=“checkbox”
Step2：name的值要相同
由于多选框是用户选择的，而不是用户输入的，
因此，也相应的值进行提交。
某一个值想要默认被选中，在input标签中添加checked。
爱好：
吃饭：<label for=”chifan”>吃饭</label>
<input type=”checkbox” name=”hobby” value=”eat” id=”chifan”>
Label标签与input标签相关联，label中的for值与input的id值相同。
实现功能：页面中点击了label元素内容，可以自动激活或选中相关联的input标签。
敲代码：<input type=”checkbox” name=”hobby” value=”code” required>
Required表示此项为必填项，不填会有提醒
下拉列表
父元素：select
子元素：option
属性value是对应元素内容的值。
<select name=”city” id=”city”>
<option value=”CD”>成都市</option>
<option value=”ZG”>自贡市</option>
<option value=”DZ”>达州市</option>
</select>
提交按钮---<input type=”submit” 可设置value=”自定义：搜全部”>
重置按钮---<input type=”reset”>
普通按钮---<input type=”button” value=”普通按钮”>
HTML5 提交按钮---<button>元素内容</button>
Can I use 网站，可以查询标签适用的一些网站。
如果设置必填项，在input中加入required属性。
Textarea多行文本框，可换行输入。
下拉列表进行分组，分组标签optgroup，显示在页面中的分组内容，需要添加到label值当中。
<select name=”city” id=”Department”>
<optgroup label=”市场部”>
<option value=”HW”>户外</option>
<option value=”WL”>网络</option>
</optgroup>
<optgroup label=”教学部部”>
<option value=”XMJL”>项目经理</option>
<option value=”BZR”>班主任</option>
</optgroup>
</select>
身高/体重 <input type=”number” step=”5”(每次增加5) max=“30” min=”5”>
年龄 <input type=”range”>
邮箱 <input type=”mail”>
手机 <input type=”tel”>
扩展：
Pattern正则表达式（判断用户输入的内容是否符合规则）
手机（reg）<input type=”text” maxlength=”11” pattern=” 1 \ d{10}”>
出生年月日<input type=”date” value=”2003-03-05”—设置默认值>
请选择你喜欢的颜色<input type=”color”>
原文：https://www.cnblogs.com/-xmj/p/10591257.html