HTML标签_表单标签_概述与标签_表单标签_表单项input1 与 HTML标签_表单标签_表单项input2
HTML标签_表单标签_概述
内容：
1. HTML标签 ：表单标签
2. CSS：
HTML标签 ：表单标签
表单：
概念：用于采集用户输入的数据的，用于和服务器进行交互
使用的标签：form
form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
属性：
action：指定提交数据URL
method：指定提交方式
分类：一共7种，2种比较常用的
get：
1.请求参数会在地址栏中显示。会封装到请求行中(Http协议后讲解)
2.请求参数大小是有限制的
3.不太安全
post：
1.请求参数不会在地址栏中显示，会封装在请求中（HTTP协议后讲解）
2请求参数的大小没有限制
3.比较安全
表单项中的数据要想被提交：必须指定其name属性
标签_表单标签_表单项input1
表单项标签：
input：可以通过type属性值，改变元素展示的样式
type属性：
text：文本输入框，默认值
placeholder：指定输入框的提示信息，当前输入框的内容发生变化，会自动清空提示信息
password：密码输入框
radio：单选框
注意：
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
3.checked属性，可以指定默认值
checkbox：复选框
注意：
1.要想让多个单选框实现单选效果，则多个单选框的name属性值必须一样
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
label：的指定输入项的文字描述信息
注意：
lable的for属性一般会和input的id属性值对应。如果对应了，则点击lable区域，会让input输入框获取焦点
效果图：
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <!-- 属性： action：指定提交数据URL method：指定提交方式 分类：一共7种，2种比较常用的 get： 1.请求参数会在地址栏中显示。会封装到请求行中(Http协议后讲解) 2.请求参数大小是有限制的 3.不太安全 post： 1.请求参数不会在地址栏中显示，会封装在请求中（HTTP协议后讲解） 2.请求参数的大小没有限制 3.比较安全 --> <!-- form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围--> <!--action：指定提交数据URL--> <!--method：指定提交方式 分类：一共7种，2种比较常用的 get post--> <form action="#" method="get"> <!--label：的指定输入项的文字描述信息--> <!--able的for属性一般会和input的id属性值对应。如果对应了，则点击lable区域，会让input输入框获取焦点--> <!-- input：可以通过type属性值，改变元素展示的样式--> <!--text：文本输入框，默认值--> <!-- placeholder：指定输入框的提示信息，当前输入框的内容发生变化，会自动清空提示信息--> <label for="username">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br> <!-- password：密码输入框--> 密码:<input type="password" name="password" placeholder="请输入密码"> <br> <!-- radio：单选框 --> <!-- 1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样 2.一般会给每一个单选框提供value属性，指定其被选中后提交的值 3.checked属性，可以指定默认值 --> 性别:<input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="famale" checked> 女 <br> <!-- checkbox：复选框--> <!-- 1.要想让多个单选框实现单选效果，则多个单选框的name属性值必须一样 2.一般会给每一个单选框提供value属性，指定其被选中后提交的值 --> 爱好<input type="checkbox"name="hobby" value="没事干"> 没事干 <input type="checkbox"name="hobby" value="加油干"> 加油干 <input type="checkbox"name="hobby" value="死里干" checked> 死里干 <br> <input type="submit" value="登录"> </form> </body> </html>
HTML标签_表单标签_表单项input2
file：文件选择框
hidden：隐藏域，用于提交一些信息
按钮：
submit：提交按钮。可以提交表单
button：普通按钮
image：图片提交按钮
src：属性指定按钮
<!--file 上传文件--> 图片：<input type="file" name="file"><br> <!--hidden：隐藏--> 隐藏域:<input type="hidden" name="id" value="隐藏域"><br> <!-- color：取色器--> 取色器:<input type="color" name="color"><br> <!--年，月，日：date--> 生日:<input type="date" name="生日日期"><br> <!--年，月，日：datetime-local--> 生日:<input type="datetime-local" name="具体生日时间"><br> <!--email：邮箱--> 邮箱：<input type="email"name="你的qq邮箱" ><br> <!--number：数字--> 年龄：<input type="number" name="你的年龄"> <!--submit：提交表单--> <input type="submit" value="登录"><br> <!--button：普通按钮--> <input type="button" value="一个按钮"><br> <!--image：图片按钮 src：源路径 width：宽度 height：高度： --> <input type="image" src="image/炽阳神光.png" width="380px" height="286px"> </form> </body> </html>
select：下拉列表
textarea：文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--
属性：
action：指定提交数据URL
method：指定提交方式
分类：一共7种，2种比较常用的
get：
1.请求参数会在地址栏中显示。会封装到请求行中(Http协议后讲解)
2.请求参数大小是有限制的
3.不太安全
post：
1.请求参数不会在地址栏中显示，会封装在请求中（HTTP协议后讲解）
2.请求参数的大小没有限制
3.比较安全
-->
<!-- form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围-->
<!--action：指定提交数据URL-->
<!--method：指定提交方式 分类：一共7种，2种比较常用的 get post-->
<form action="#" method="get">
<!--label：的指定输入项的文字描述信息-->
<!--able的for属性一般会和input的id属性值对应。如果对应了，则点击lable区域，会让input输入框获取焦点-->
<!-- input：可以通过type属性值，改变元素展示的样式--> <!--text：文本输入框，默认值-->
<!-- placeholder：指定输入框的提示信息，当前输入框的内容发生变化，会自动清空提示信息-->
<label for="username">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br>
<!-- password：密码输入框-->
密码:<input type="password" name="password" placeholder="请输入密码"> <br>
<!-- radio：单选框 -->
<!--
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
3.checked属性，可以指定默认值
-->
性别:<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="famale" checked> 女
<br>
<!-- checkbox：复选框-->
<!--
1.要想让多个单选框实现单选效果，则多个单选框的name属性值必须一样
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
-->
爱好<input type="checkbox"name="hobby" value="没事干"> 没事干
<input type="checkbox"name="hobby" value="加油干"> 加油干
<input type="checkbox"name="hobby" value="死里干" checked> 死里干
<br>
<input type="submit" value="登录">
</form>
</body>
</html>
