<!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>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。