六、表单
1.简介
表单是一个包含若干表单元素的区域，用于回去不同类型东东用记信息
表单元素是允许用户在表单中输入信息的元素，如：文本框、密码框、单选按钮、复选框、下拉按钮、列表等
2.表单结构
2.1表单的语法
<form acition="" method="">
多个表单元素
</form>
2.2form标签
用来定义表单，可以包含多个表单元素
常用属性：
-
action提交数据给处理，即处理数据的程序，默认为当前页面，并且以查询字符串的形式来表现 （此处暂时先了解便可）
-
method提交数据的方式，取值：get（默认）、post
get和post的区别：
get：以查询字符串形式提交，在地址栏中能够看到，长度有限制，不安全
post：以表单数据组形式提交，在地址栏中看不到，长度无限制，安全
-
enctype：提交数据的编码，取值：application/x-www-form- urlencode（默认）、multipart/form-data（文件上传) (此处暂时先了解便可)
3.表单元素
大多数表单元素都是使用标签来定义，通过设置type属性来定义不同的表单元素
<input type="表单元素的类型" name="名称" value="默认值" size="宽度">
| 表单元素的类型 | 含义 | 说明 |
|---|---|---|
| text | 单行文本框 | 省略时默认就是text |
| password | 密码框 | 输入时以点号显示，安全 |
| redio | 单选按钮 | 只能选择其中一个 |
| checkbox | 复选框 | 可以同时选择多个 |
| submit | 提交按钮 | 提交表单数据 |
| reset | 重置按钮 | 重置表单元素的初始值 |
| image | 图像按钮 | 可以使用图片作为按钮 |
| button | 普通按钮 | 默认情况下无功能 |
| file | 文件选择器 | 选择要上传的文件 |
| hidden | 隐藏域 | 在页面上不显示，但是会提交，可以用来存储数据 |
3.1单行文本框
常用属性：
- name属性：名称，很重要，如果没有指定name，则该表单元素的数据是无法提交的
- value属性：当用户没有输入数据时，文本框中的默认值
- size文本框显示宽度
- maxlength最大字符数，默认字符数
- readonly：只读readonly=“readonly”，可以简写readonly，即只写属性名
- disabled：不可用，禁用disbled=“disabled” 可以简写disabled，完全被禁用
readonly和disabled的区别：readonly的数据会提交，而disabled的数据不会提交
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用户注册</h2>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
用户名：<input type="text" name="usr_name" value="张杰" size="4" maxlength="4">
<br>
密码：<input type="password" name="pwd" size="9" maxlength="6">
<br>
年龄：<input type="text" name="age" disabled>
<br>
<input type="submit">
</form>
</body>
</html>
案例：
3.2单选按钮
常用属性
- name：名称，多个radio的name属性必须相同，才可以实现互斥（单选）
- value：值
- checked是否被选中，两种状态，选中，未选中 checked="checked"简写“checked”
3.3 复选框
常用属性与radio类似
3.4 文件选择器
常用属性：
-
name属性：名称
-
accept设置可以选择的文件类型，用来限制上传文件的类型
使用MIME格式字符串对资源类型进行限制
常用MIME类型：
- 纯文本：text/plain text/heml text/xml
- 图像：image/png image/gif image/jpeg
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用户注册</h2>
<form action="" method="get" enctype="multipart/form-data">
用户名：<input type="text" name="usrname" value="张杰">
<br>
密 码：<input type="password" name="pwd">
<br>
年 龄：<input type="text" name="age" value="18" enabled>
<br>
性 别：<input type="radio" name="sex" value="male" checked>
<img src="../../img/male.gif" alt="">
<input type="radio" name="sex" value="female">
<img src="../../img/female.gif" alt="">
<br>
爱 好：
<input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="doudou">打豆豆
<br>
头 像：
<input type="file" name="head" accept="image/jpeg">
<input type="hidden" name="usr_id" value="9528">
<hr>
<input type="submit">
<input type="reset">
<hr>
<input type="image" src="../../img/submit.gif">
<input type="image" src="../../img/reset.gif">
<hr>
<input type="button" value="普通按钮">
</form>
</body>
</html>
案例：
4.特殊表单元素
| 表单元素 | 含义 | 说明 |
|---|---|---|
| select | 下拉列表 | |
| option | 列表选项 | |
| optgroup | 选项组 | 用来对option分组 |
| textarea | 文本域/多行文本框 | 用于创建一个多行文本框，会保留编码的格式 |
4.1 下拉列表
select 常用属性：
- name属性
- size：下拉列表所显示的行数，同时显示多个选项
- multiple允许同时选择多个
option常用属性：
- value选项值
- selected设置默认选中的项
optgroup常用属性：
- table分组的标题
4.2 文本域
常用属性：
- name：名称
- rows行数
- cols列数
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
学历
<select name="degree">
<option value="0">--请选择学历--</option>
<option value="dazhuan">大专</option>
<option value="benke" selected>本科</option>
<option value="yanjiusheng">研究生</option>
<option value="shuoshi">硕士</option>
</select>
<br>
城市：
<select name="">
<optgroup label="山西省">
<option value="taiyuan">太原</option>
<option value="datong">大同</option>
<option value="changzhi">长治</option>
</optgroup>
<optgroup label="山东省">
<option value="jinan">济南</option>
<option value="qingdao">青岛</option>
<option value="nanjing">南京</option>
</optgroup>
<optgroup label="江苏省">
<option value="rizhao">日照</option>
<option value="yangzhou">杨洲</option>
<option value="xuzhou">徐州</option>
</optgroup>
</select>
<br>
个人简介：
<textarea name="intrduce" ></textarea>
<br>
服务协议：
<textarea name="intrduce" rows="10" cols="20" eadonly>
请遵守本网站的相关协议和国家的法律规定
请遵守本网站的相关协议和国家的法律规定
请遵守本网站的相关协议和国家的法律规定
请遵守本网站的相关协议和国家的法律规定
</textarea>
<hr>
<input type="submit">
</form>
</body>
</html>
案例：
5、其他表单元素
5.1 label标签
为表单元素提供标签，当选中label标签中的文本时会自动将焦点切换到与之相关联的表单元素中。
常见属性：
- for必须将该属性值设置为 与之相关联的表单元素 的id属性值 相同
注意：几乎所有的HTML标签都有id属性，且id属性值必须是唯一的
5.2button 标签
也表示按钮，与input按钮类似
语法：
<button type="按钮类型">按钮文本或图像</button>
常用属性：
- type按钮的类型：取值submit（默认）、reset、button
5.3fieldset和legend标签
fieldset标签：对表单元素进行分组
legend标签：对分组进行添加标题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>个人信息</legend>
<label for="name">用户名：</label>
<input type="text" name="usrname" id="name">
<br>
<label for="email">邮 箱：</label>
<input type="text" name="email" id="email">
<hr>
</fieldset>
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="image" src="../../img/submit.gif">
<input type="button" value="普通按钮">
<hr>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button><img src="../../img/submit.gif" alt=""></button>
<hr>
<fieldset>
<legend>学院信息</legend>
学号：<input type="text" name="stuID"><br>
学校：<input type="text" name="stuSchool"><br>
专业：<input type="text" name="stuMajor"><br>
</fieldset>
</body>
</html>
案例：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
