代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- form标签
1、标签用于为用户输入创建 HTML 表单。
2、表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
3、表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
4、表单用于向服务器传输数据。
-->
<!--
1、action
数据提交位置（后端接收数据的位置）
2、method
数据提交方法
1、post方法
数据在body中，提交时不在url中显示
2、get方法
数据在head中,提交时在url中显示
-->
<form action="http://127.0.0.1:8080/login" method="get">
<!-- input标签
1、input标签是自闭和标签，可以嵌套p标签
2、input标签有多种类型
-->
<!-- text类型
1、用于文本输入
2、name属性的值作为键值对中的key传递给后端
3、输入的内容作为键值对中的value传递给服务器
-->
<p>账号：<input type="text" name="username"></p>
<!-- password类型
1、用于密码输入
2、会隐藏输入内容
3、name属性的值作为键值对中的key传递给后端
4、输入的内容作为键值对中的value传递给服务器
-->
<p>密码：<input type="password" name="password"></p>
<!-- checkbox类型
1、复选框，可以选择多个
2、name属性的值作为键值对中的key传递给后端
3、value属性的值作为键值对中的value传递给服务器
-->
<p>爱好：吃<input type="checkbox" name="hobby" value="101"></p>
<p>爱好：喝<input type="checkbox" name="hobby" value="102"></p>
<p>爱好：玩<input type="checkbox" name="hobby" value="103"></p>
<p>爱好：乐<input type="checkbox" name="hobby" value="104"></p>
<!-- radio类型
1、单选框，只能选择一个
2、通过设置相同的name属性，绑定关系表示是一组radio
3、name属性的值作为键值对中的key传递给后端
4、value属性的值作为键值对中的value传递给后端
-->
<p>性别：男<input type="radio" name="sex" value="male"></p>
<p> 女<input type="radio" name="sex" value="female"></p>
<!-- file类型
1、用于文件上传
2、name指定名字,作为键值对的建传递给后端
3、文件本身作为键值对中的值传递给后端
4、formenctype上传模式
-->
<p>文件上传<input type="file" name="test" formenctype="multipart/form-data"></p>
<!-- rest类型
1、重置页面，清空页面输入的内容
2、可以通过value属性设置按钮显示
-->
<p><input type="reset"></p>
<!-- button类型
1、仅仅是按钮，配合js使用
2、可以通过value属性设置按钮显示
-->
<p><input type="button" value="按钮"></p>
<!-- submit类型
1、用于提交按钮
2、可以通过value属性设置按钮显示
-->
<p><input type="submit" value="登录"></p>
<!-- select
1、select是下拉框标签
2、可以是单选或多选
-->
<!-- select属性
1、通过seletc标签的size属性，可以设置显示条数（默认是1）,通过multiple属性声明是多选，未声明默认单选
2、通过optgroup可以实现三级菜单，其中的label不能在页面被选中
3、通过option设置选项，选项内容在页面可以选中
4、提交时select标签中的name作为键值对的键传递给后端
5、提交时option标签中的value作为键值对中的值传递给后端
-->
<p>城市<select name="city" size="5" multiple>
<optgroup label="北京"></optgroup>
<option value="haidian">海淀</option>
<option value="chaoyang">朝阳</option>
<option value="tongzhou">通州</option>
<option value="xicheng">西城</option>
<optgroup label="河北"></optgroup>
<option value="shijiazhuang">石家庄</option>
<option value="tangshan">唐山</option>
<option value="qinhuangdao">秦皇岛</option>
</select></p>
<!-- textarea
1、文本框，用于文本输入
2、可以设置行数和列数
-->
<textarea cols="5" rows="10">自我介绍</textarea>
<!-- label
1、通常和input标签一起使用
2、将label中的字段和input中的输入框或者按钮关联（通过id），在点击label字段时会自动选中关联的input内容
-->
<label for="beizhu">备注</label>
<input id="beizhu" type="text">
</form>
</body>
</html>
