HTML表单标签
表单
1.概念:用于采集用户输入的数据的。用于和服务器进行交互
2.form:用于定义一个范围,范围代表采集用户数据的范围
2.1 属性:
2.1.1 action;提交数据的URL
2.1.2 method:指定提交方式
2.1.2.1 分类:一共7种,2种比较常用
- get:
1.请求参数会在地址栏中显示,会封装到请求行中(HTTP协议后讲解)
2.请求参数的大小是有限制的
3.不太安全 - post:
1.请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议后讲解)
2.请求参数的大小没有限制
3.较为安全
2.2 表单项中的数据要想被提交:必须指定name属性
3.表单项标签:
3.1 <input>
:可以通过type属性值,改变元素展示的样式
3.1.1 type属性:
- text:文本输入框,默认值
placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息 - password:密码输入框
- radio:单选框
注意:
1.要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样
2.一般会给每一个单选框提供value属性,指定其被选中后提交的值
3.checked属性,可以指定默认值 - checkbox:复选框
1.一般会给每一个单选框提供value属性,指定其被选中后提交的值
2.checked属性,可以指定默认值 - file:文件选择框
- hidden:隐藏域,用于提交一些信息
- 按钮:
submit:提交按钮,可以提交表单
button:普通按钮
image:图片提交按钮 src属性指定图片的路径
3.1.2<label>
:指定输入项的文字描述信息
注意:
label的for属性一般会和input的id属性值对应。如果对应了 ,则点击label区域,会让imput 输入框获取焦点。
3.2 <select>
:下拉列表
子元素:option,指定的列表项
3.2<textarea>
:文本域
cols:指定列数,每一行有多少个字符
rows:默认多少行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--
form:用于定义一个范围,范围代表采集用户数据的范围
*属性:
*action;提交数据的URL
*method:指定提交方式
*分类:一共7种,2种比较常用
get:
1.请求参数会在地址栏中显示,会封装到请求行中(HTTP协议后讲解)
2.请求参数的大小是有限制的
3.不太安全
post:
1.请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议后讲解)
2.请求参数的大小没有限制
3.较为安全
*表单项中的数据要想被提交:必须指定name属性
-->
<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>男
<input type="radio" name="gender" value="female">女
<br>
爱好:<input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="java" checked="checked">Java
<input type="checkbox" name="hobby" value="game">游戏
<br>
图片:<input type="file" name="file">
<br>
隐藏域:<input type="hidden" name="id" value="aaa"><br>
取色器<input type="color" name="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>
省份:<select name="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2" selected>贵州</option>
<option value="3">四川</option>
</select><br>
自我描述:
<textarea cols="20" rows="5" name="des"></textarea>
<input type="submit" value="登录">
<input type="button" value="一个按钮"><br>
<input type="image" src="img/regbtn.jpg">
</form>
</body>
</html>