HTML标签表单标签_概述
表单:
概念:用于采集用户输入的数据。用于和服务器进行交互。
form:用于定义表单的,可以定义一个范围,范围代表采集用户数据的范围
属性:
action:指定调教数据的url方式
mehtod:指定提交方式
分类:一共7种,2种比较常用
get:
1、请求参数会在地址栏中显示
2、请求参数大小是有限制的
3、不太安全
post:
1、请求参数不会再地址栏中显示,会封装在请求体中
2、请求参数的大小没有限制
3、较为安全
表单项中的数据要想被提交,必须指定其name属性
<form action="#" method="get">
用户名:<input name="username"><br>
密码:<input name="password"><br>
<input type="submit" value="登录">
</form>
HTML标签表单标签_表单项input
表单项标签:
input:可以通过type属性值,改变元素展示的样式
type属性:
text:文本输入框 默认值
placeholder:指定输入框的提示信息,当输入框的内容发生变化时,会自动清空提示信息
password:密码输入框
radio:单选框
注意:
1、要想让单选框实现单选的效果,则多个单选框的name属性值必须一样
2、一般会给每个单选框提供value属性,指定其被选中后提交的值
3、checked属性可以指定默认值
checkbox:复选框
注意:
1、要想让复选框实现多选的效果,则多个单选框的name属性值必须一样
2、一般会给每个单选框提供value属性,指定其被选中后提交的值
3、checked属性可以指定默认值
file:文件选择框
hidden:隐藏域,用来提交一些信息
按钮:
1、submit:提交按钮
2、button:普通按钮
3、image:图片提交按钮
src属性指定图片的路径
label:指定输入项的文字描述信息
注意:
label的for属性一般会和input的id属性值对应,如果对应了则点击label区域,会让input输入框获取焦点
<form action="#" method="get">
<label for="username">用户名:</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
性别:<input type="radio" name="gender" value="male" checked="checked"> 男
<input type="radio" name="gender" value="female"> 女
<br>
爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java"> JAVA
<input type="checkbox" name="hobby" value="game" checked="checked"> 游戏
<br>
图片:<input type="file"><br>
隐藏域:<input type="hidden" value="aaa"> <br>
取色器:<input type="color"> <br>
生日:<input type="date" name="birthday"> <br>
生日:<input type="datetime-local" name="birthday"> <br>
邮箱:<input type="email" name="email"> <br>
年龄:<input type="number" name="age"> <br>
<br>
<input type="submit" value="登录">
<input type="button" value="一个按钮"><br>
<input type="image" src="img/regbtn.jpg">
</form>
select:下拉列表
textarea:文本域