表单
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的数据不会提交
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>
案例：
1960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
