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
- 提交的数据不再请求路径上追加（及
不显示在地址栏上） - 提交的数据
大小不限制 - 数据相对
安全
扫一扫
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
