关于HTML的表单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> HTML 表单 </title>
</head>
<body>
<div class="login">
<form action="getInfo" method="get">
<!-- 提交div块 -->
<div class="submit">
<button>提交</button>
</div>
<!-- login输入账户名div块 -->
<div class="username">
<label for="username">账号</label> <!-- label 后面的for可以让光标指到账号2个字的时候也能够进行该行的input输入 -->
<input id="username" type="text" name="username" placeholder="请输入账户"> <!-- placeholder属性设置未输入之前显示内容 -->
</div>
<!-- login输入密码div块 -->
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="请输入密码"> <!-- type="password"让密码输入的时候变成小圆点 -->
</div>
<!-- 多选表单div块 -->
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value="read"> 读书 <!-- 指定value是因为要查看具体返回的值，否则只能看到on-->
<input type="checkbox" name="hobby" value="music"> 听歌
<input type="checkbox" name="hobby" value="study"> 学习
</div>
<!-- 单选表单div块 -->
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="男"> 男 <!-- 指定value的原因同上 -->
<input type="radio" name="sex" value="女"> 女
<!-- 用radio的时候，name相同的为一组，作为单选 -->
</div>
<!-- 上传文件表单div块 -->
<div class="file">
<input type="file" name="myfile" accept="image/png"> <!-- accept属性限制上传的类型和具体格式 -->
</div>
<!-- 下拉选择表单div块 -->
<div class="select">
<select name="city">
<option value="defalut" selected>城市</option> <!-- selected的意思是这个选择单表的默认选择 -->
<option value="beijing">北京</option>
<option value="hangzhou">杭州</option>
<option value="shanghai">上海</option>
</select>
</div>
<!-- 文本输入区域表单div块 -->
<div class="textarea">
<textarea name="article" rows="8" cols="80">
默认内容
</textarea>
</div>
<!-- 隐藏表单div块，可以用来做安全策略，应用案例：csrf -->
<div class="hidden">
<input type="hidden" name="csrf" value="1234567890">
</div>
<!-- 其他表单div块 -->
<div class="others">
<input type="button" value="Button" > <!-- 普通的按钮，无法提交 -->
<input type="submit" value="Submit" > <!-- 可以提交 -->
<input type="reset" value="Reset" > <!-- 重置按钮，用来清空重置这个form中输入的一切东西 -->
</div>
</form>
</div>
</body>
</html>
效果：https://evenyao.github.io/biaodantest/
注意点
注意上面示例中注释的部分基本能够涵盖常用的表单使用方法