1.form标签
form标签构成表单框架，一些按钮只有在form标签内，才会显示出该标签的用途效果。
例如：
网址标签
<input type="url">邮箱标签
<input type="email" placeholder="请输入邮箱">2.表单中的控件
主要由input标签加上type属性的更改来实现。
text值
<input type="text" placeholder="请输入账号">password值
<input type="password" placeholder="请输入密码" required> email(邮箱)值
<input type="email" placeholder="请输入邮箱">单选按钮
单选按钮的type属性为：“radio”。为了实现单选的效果，要与"name"属性一起使用。例如：
<label>
<input type="radio" name="gender" value="男">男
</label>
<label>
<input type="radio" name="gender" value="女">女
</label>多选按钮
多选按钮的type属性为：“checkbox”。例如：
爱好：
<label><input type="checkbox" value="打球">打球</label>
<label><input type="checkbox" value="跑步">跑步</label>
<label><input type="checkbox" value="玩游戏">玩游戏</label>
<label><input type="checkbox" value="唱歌">唱歌</label>textarea值
该标签是一个文本域。例如：
<textarea cols="50" rows="10"></textarea>date值
实现选择日期的功能。例如：
<input type="date">time值
实现选择时间的功能。例如：
<input type="time">range值
可以实现拖拽条的功能。其中“max”、“min”是控制其最大最小的值。例如：
<input type="range" min="10" max="20">search值
可以实现出现搜索框的样子。例如：
<input type="search" list="sear-list">datalist值
用datalist可以实现智能感应的效果。比如配合上述的search值，可以实现在搜索框中输入文字，在搜索框下出现相应关键字。当然，相应关键字要求我们直接写入对应列表中。例如：
搜索：
<input type="search" list="sear-list">
<datalist id="sear-list">
<option value="前端">
<option value="html">
<option value="javascript">
<option value="大前端">
</datalist>其中，"list"的值要与“id”的值相匹配，禁止两者写入不符。'option '中的’value‘的值就是我们需要提前写好的值。
3.三个按钮
普通按钮
属性为button。例如：
<button>普通按钮</button>提交按钮
属性为"submit"。 点击该按钮，表单提交。例如：
<input type="submit" value="提交表单">重置按钮
属性为“reset”。点击该按钮，表单重置。例如：
<input type="reset" value="重置表单">4.小demo
源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="#" method="post">
<p>
账号：
<input type="text" placeholder="请输入账号">
</p>
<p>
密码：
<input type="password" placeholder="请输入密码" required>
</p>
<p>
邮箱：
<input type="email" placeholder="请输入邮箱">
</p>
<p>
性别:
<label>
<input type="radio" name="gender" value="男">男
</label>
<label>
<input type="radio" name="gender" value="女">女
</label>
</p>
<p>
省份：
<select name="" id="">
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="广东">广东</option>
<option value="广西">广西</option>
</select>
</p>
<p>
爱好：
<label><input type="checkbox" value="打球">打球</label>
<label><input type="checkbox" value="跑步">跑步</label>
<label><input type="checkbox" value="玩游戏">玩游戏</label>
<label><input type="checkbox" value="唱歌">唱歌</label>
</p>
<p>
其他：
<textarea cols="50" rows="10"></textarea>
</p>
<p>
日期：
<input type="date">
</p>
<p>
时间：
<input type="time">
</p>
<p>
拖拽条：
<input type="range" min="10" max="20">
</p>
<p>
搜索：
<input type="search" list="sear-list">
<datalist id="sear-list">
<option value="前端">
<option value="html">
<option value="javascript">
<option value="大前端">
</datalist>
</p>
<p>
网址：
<input type="url">
</p>
<button>普通按钮</button>
<input type="submit" value="提交表单">
<input type="reset" value="重置表单">
</form>
</body>
</html>