1、表单标签<form>
- 在日常浏览网页时,很多网站都会有:会员注册、登录功能
- 想要把浏览器客户端中的账号、密码等信息,发送给服务器,就需要使用到表单
- 如果数据需要提交到服务器,负责收集数据的标签必须存放在表单标签体内。格式如下:
<html>
<head></head>
<body>
<!--表单-->
<form action="" method="">
<!--此处的内容可能被提交到服务器-->
</form>
<!--此处的内容在<form>标签外部,此处数据不能随着表单提交到服务器-->
</body>
</html>
- form的常用属性:
常用属性 | 作用 |
---|---|
action | 请求路径,确定表单提交到服务器的地址(路径) 【必备的属性】 |
method | 提交数据的方式。有两种方式:GET或POST |
2、输入域标签
- 在<form>表单中,负责采集用户数据的标签,最常用的是<input>
- <input> 标签用于获得用户输入信息,随着type属性值不同,采集方式也不同
- 语法格式:<input type=”” name=”” value=””>
属性 | 说明 |
---|---|
type | 指定表单控件的类型。例:type=”text”,表示文本框; type=”radio”,表示单选框 |
name | 设置input标签的名称。 可以通过名称获得当前input标签元素 |
value | 数据值。 通过value可以拿到要采集的数据 |
- type属性值:(指定是哪种表单控件)
type属性 | 说明 | 示例 |
---|---|---|
text | 普通文本 | <input type=”text” > |
password | 密码输入框,里边的密码以黑色的小圆点显示 | <input type=”password” > |
radio | 单选框 | <input type=”radio” value=”男”>男 <input type=”radio” value=”女”>女 |
checkbox | 多选框 | <input type=”checkbox” value=”游戏”>游戏<input type=”checkbox” value=”音乐”>音乐 |
file | 上传文件 | <input type=”file” > |
hidden | 隐藏域。存储数据使用,不会在浏览器页面显示 | <input type=”hidden” > |
button | 普通按钮,配合js使用 | <input type=”button” value=”确定”> |
reset | 重置按钮,把表单的恢复到默认状态(清空表单) | <input type=”reset” value=”重置”> |
submit | 提交按钮,把表单的数据,提交到服务器 | <input type=”submit” value=”提交”> |
案例1:模拟用户登录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<!-- action:指定数据提交的服务器地址
method:指定提交方式
-->
<form action="http://www.hanjiaxiaozhi.cn" method="post">
<!-- 文本框 -->
账号:<input type="text" name="userName" value="初始值"><br>
<!-- 密码框 -->
密码:<input type="password" name="userPwd"> <br>
<!-- 提交按钮 -->
<input type="submit" name="login" value="登录">
</form>
</body>
</html>
扩展:from表单中的属性
- readonly:是否只读
- disabled:是否可用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="" method="">
账号:<input type="text" name="username" value="请输入用户名" readonly="readonly"/>
<br/>
密码:<input type="password" name="password" value="请输入密码" disabled="disabled"/>
<br/>
<hr/>
<br/>
账号:<input type="text" name="username" placeholder="请输入用户名"/><br/>
密码:<input type="password" name="password" placeholder="请输入密码"/>
<br/>
</form>
</body>
</html>
案例2:模拟会员注册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模拟会员注册</title>
</head>
<body>
<form action="" method="">
账号:<input type="text"/>
<br/>
密码:<input type="password"/>
<br/>
性别:男<input type="radio" name="sex" checked="checked"/>
女<input type="radio" name="sex"/>
<br/>
爱好:篮球<input type="checkbox"/>
足球<input type="checkbox"/>
羽毛球<input type="checkbox"/>
乒乓球<input type="checkbox"/>
<br/>
<input type="file"/><br/>
<input type="hidden" value="我是隐藏的你看不到我"/><br/>
<input type="button" value="点我试试"/><br/>
<input type="reset"/><br/>
<input type="submit"/><br/>
</form>
</body>
</html>
3、文本域标签
-
前面学习的<input type=”text”>是表单文本框控件,只能输入一行文本内容。
-
大家如果有浏览论坛的经验,那么在回复帖子时,是可以输入多行文本内容
-
在HTML中使用<textarea>文本域,进行多行文本输入
-
语法格式:<textarea rows=”行” cols=”列”></textarea>
- rows属性:文本域的显示行(高)
- cols属性:文本域的显示列(宽)
-
参考代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="#" method="get">
<!--
textarea:是form子标签
属性:
rows: 设置文本域显示行 (高)
cols: 设置文本域显示列 (宽)
-->
个人简介:<textarea rows="3" cols="5"></textarea>
<br/>
<input type="submit">
</form>
</body>
</html>
4、下拉列表标签
- 在HTML中<select>标签属于下拉列表。当在表单中使用选项操作时,使用select标签。
- 语法:
<select name="">
<option> --请选择-- </option>
<option> Java </option>
<option> HTML </option>
</select>
- 参考代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="#" method="get">
<!--
下拉框:
作用:提供一个可供下拉选择的组件
组成:
select: name属性
option: value属性
特殊属性:selected="selected"
-->
城市:<select name="city">
<option>---请选择城市---</option>
<option selected value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
<option value="hz">杭州</option>
</select>
</form>
</body>
</html>
- <option>是<select>标签的子标签,option的属性有:
属性 | 说明 |
---|---|
value | 发送给服务器的数据值 |
selected | 默认当前option列表项,为选中状态 |
- 在使用select下拉列表时,可以选择多个option选项。需要使用标签的属性:
- multiple属性:不写默认单选,取值为“multiple”表示多选。
- size属性:多选时,可见选项的数目。
- 参考代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="#" method="get">
<!--
下拉框:
作用:提供一个可供下拉选择的组件
组成:
select: name属性
option: value属性
特殊属性:selected="selected"
-->
城市:
<select name="city">
<option>---请选择城市---</option>
<option selected value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
<option value="hz">杭州</option>
</select>
<br/><br/>
城市(多选):
<select name="address" multiple="multiple" size="3">
<option>---请选择城市---</option>
<option selected value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
<option value="hz">杭州</option>
</select>
</form>
</body>
</html>
5、表单的提交方式
- 表单标签form的属性method设置表单的提交方式
GET 默认值
提交的数据追加在请求路径上
。数据格式k = v,追加是使用?
连接;之后每一对数据使用&连接。如:http://www.baidu.com/register.html?name=hanjiaxiaozhi&pwd=123&e=xx- 因为不同的浏览器对请求路径长度有限制,
所以GET请求提交的数据有限
。 不安全
。(敏感数据会在地址栏显示,不适合做密码等数据提交)
POST
- 提交的数据不再请求路径上追加(及
不显示在地址栏上
) - 提交的数据
大小不限制
- 数据相对
安全