内容:
1 | from的概念 |
---|---|
2 | get和post的区别 |
3 | input:type=text/password/radio/checkbox/按钮/h5标签 |
4 | lable标签 |
5 | selected、textarea |
概念:用于采集用户输入的数据,用于和服务器交互
from:用于定义一个表达那,可以定义一个范围,范围代表采集用户数据的范围
属性:
action:指定提交数据的URL
method:指定提交方式,一共7种,2种比较常用
get:
1、请求参数会在地址栏中显示,会封装到请求行种
2、请求参数是有大小限制的
3、不太安全
post :
1、请求参数不会在地址栏种显示,会封装在请求体种
2、请求参数的大小没有限制
3、较为安全
注意:表单项中的数据想要被提交:必须指定其name属性,我自己的猜测,指定了name属性提交的时候会放到request域中,可以被后台获取,这个地方还需要查资料核实
表单项标签:
input
<input>:可以通过改变type属性值,改变元素展示的样式
type属性:
text:文本输入框,默认值
placehold:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
password:输入的数据展示小点点
radio:单选框
注意:
1、要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样
2、一般会给一个单选框提供**value**属性,指定其被选中后提交的值
3、checked属性,可以指定默认值
checkbox:
1、要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样
2、一般会给一个单选框提供**value**属性,指定其被选中后提交的值
3、checked属性,可以指定默认值
file:文件选择框
hidden:隐藏域,用于提交一些信息
**按钮:
submit:提交按钮,可以提交表单
button:普通按钮
image:用src指定一张图片,图片按钮
<label></label>:指定输入项的文字描述信息
**label的for属性一般会和input的id属性值对应**,点击label对应区域光标会到input输入框去
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="#">
<label for="username">用户名:</label><input type="text" name="username" id="username" placeholder="请输入用户名"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
性别:<input type="radio" name="gender" value="male"> 男
<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">游戏
<br>
图片:<input type="file" name="file">
<br>
隐藏域:<input type="hidden">
<input type="submit" value="登录">
h5定义的标签
取色器:<input type="color" name="color">
生日:<input type="date" name="birthday">
邮箱:<input type="email" name="email">
年龄:<input type="number" name="age">
</form>
</body>
</html>
select:下拉表标签
option指定备选项,selected指定默认值
<select name="province">
<option>--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
</select>
textarea:文本域
cols:指定列数,每一行有多少字符
rows:有多少行
<textarea cols="20" rows="5" name="des"></textarea>