目录
1.什么是表单?
表单是网页中数据采集的工具。
2.表单组成部分
3.表单标签form
- <form>属性
序号 | 属性名称 | 描述 |
1 | name | 表单名称 |
2 | action | 当表单提交时向何处发送表单数据 |
3 | target | 在何处打开action属性的url,_blank新窗口,_self当前窗口 |
4 | method | get:通过url地址传送参数到服务器;post:后台传送到服务器 |
5 | enctype | 发送前如何将数据进行编码,仅与method="post"配对使用 |
6 | application/x-www-form-urlencoded | 默认值,发送前对所有字符进行编码:空格转+号,特殊字符转ASCII 16进制值 |
7 | mutipart/form-data | 不对发送字符进行编码,在上传文件时,必须设置 |
8 | text/plain | 纯文本方式,仅将空格转为"+"号,不对特殊字符编码 |
- <form>语法
最常用的就是name,action,method三个属性,必须牢记。
4.表单域input
- <input>属性
序号 | 属性名称 | 描述 |
1 | type | 元素的类型,如text文本框、radio单选、select下拉框等 |
2 | name | 元素的名称,主要用与服务器端数据传送 |
3 | value | 元素的默认值,可当占位符 |
4 | size | 以字符计算的元素可见宽度,注意,不是像素或百分比 |
5 | maxlength | 元素允许的最大字符长度 |
6 | disabled | 禁用该控件,此时,既不能选择,也不能点击 |
7 | readonly | 该控件字段内容只读,不允许修改 |
- <input>语法举例
<input>是单标签,结尾不需要封闭,这与xhtml不同。xhtml要求所有标签都要封闭:<input type="text"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="" method="post" name="form1">
<!-- value为输入的默认值(html5中被placeholder属性替换) size为单行文本框的最大长度(默认20) maxlength为最多输入的字符数 disabled禁用不能再输入 readonly只读不能再输入 -->
姓名:<input type="text" name="login" value="SDU" size="15" maxlength="10">
</form>
</body>
</html>
网页显示效果:
- <input> type属性值
序号 | 属性值名称 | 描述 |
1 | text | 单行文本框,默认20个字符 |
2 | password | 密码框,与text类型很相似,区别是字符非明文,以*号代替 |
3 | radio | 单选按钮,name值必须相同,checked为默认值 |
4 | checkbox | 复选框,name值必须相同,返回数组,checked为默认值 |
5 | button | 自定义按钮,多与JavaScript配合使用 |
6 | submit | 提交按钮,向服务器发送数据,value是按钮上的文字 |
7 | reset | 重置按钮,将当前表单所有控件中的值恢复到默认值 |
8 | file | 文件上传按钮,multiple允许批量上传,与multipart/form-data配对 |
9 | image | 设置图像为提交按钮,必须放在<form>中,src为源,alt为说明 |
10 | hidden | 通常用于向服务器传送预设值或者由JavaScript处理 |
- <input> type类型实例
(1)单行文本:
(2)密码字段:
(3)单选按钮:
(4)复选框:
(5)自定义按钮:
(6)提交按钮:
(7)重置按钮:
(8)文件上传:
(9)图像按钮:
(10)隐藏字段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="" method="post" name="form1" enctype="multipart/form-data">
姓名:<input type="text" name="text" id="text" value="请输入姓名">
<!-- 显示为密文 -->
密码:<input type="password" name="pwd" id="text">
<br>
<!-- id必须不同 checked为默认勾选-->
性别:<input type="radio" name="sex" id="nan">男
<input type="radio" name="sex" id="nv" checked>女
<br>
<!-- checked为默认勾选-->
爱好:<input type="checkbox" name="ah">旅游
<input type="checkbox" name="ah">唱歌
<input type="checkbox" name="ah" checked>下棋
<input type="checkbox" name="ah">打游戏
<br>
<input type="button" value="点击查看">
<input type="submit" value="提交">
<!-- 将所有的值恢复为默认值,不是清空 -->
<input type="reset" value="重置">
<!-- 上传文件时,<form>中必须增加enctype="multipart/form-data" 避免对上传内容编码 -->
<!-- 批量上传增加 multiple属性 -->
<input type="file" name="文件上传" multiple>
<!-- 点击图片提交 width限制图片大小 等比缩放 src可以为本地,也可以为网上图片 -->
<input type="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539617853963&di=228198167ab63db69c86eedb9fba2f7f&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3Daa4887c27ccb0a468577833d5e53da12%2F0b55b319ebc4b745e512d22ec8fc1e178a821507.jpg" alt="提交" width="50">
</form>
</body>
</html>
网页显示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="" method="get" name="form1">
<input type="submit" value="提交">
<!-- 通过隐藏域的方式传给服务器,不在页面显示 -->
<input type="hidden" name="country" value="china">
</form>
</body>
</html>
网页显示效果:
- 下拉框与分组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="" method="get" name="form1">
<select name="hefei">
<option value="town" selected>合肥市</option>
<option value="changfeng">长丰县</option>
<option value="feixi">肥西县</option>
<option value="feidong">肥东县</option>
<option value="lujiang">庐江县</option>
<option value="caohu">巢湖市</option>
</select>
<select name="hefei">
<optgroup label="合肥市">
<option value="baohe" selected>包河区</option>
<option value="luyang">庐阳区</option>
<option value="yaohai">瑶海区</option>
<option value="shushan">蜀山区</option>
</optgroup>
<optgroup label="县市">
<option value="town">合肥市</option>
<option value="changfeng">长丰县</option>
<option value="feixi">肥西县</option>
<option value="feidong">肥东县</option>
<option value="lujiang">庐江县</option>
<option value="caohu">巢湖市</option>
</optgroup>
</select>
</form>
</body>
</html>
网页显示效果:
5.文本域textarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<label for="mess">请留言:</label>
<textarea name="name" rows="8" cols="80" id="mess" style="resize:vertical;"></textarea>
</form>
</body>
</html>
网页显示效果:
6.表单元素描述标签label
<label>用于对控制内容进行说明:如用户名,密码等
(1)格式一
优点:<label>与<input>同级,适合表格布局 缺点:<input>必须要有id属性与<label>的for属性关联
(2)格式二
优点:代码更加紧凑,适合<div>布局 缺点:<label>是<input>父标签,增加了层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="" method="get" name="form1">
<!-- 使用label时,点击文字(姓名:)也能激活控件 -->
<label for="name">姓名:</label>
<input type="text" name="name" id="name">
<br>
<label>姓名:<input type="text" name="name" id="name"></label>
</form>
</body>
</html>
网页显示效果:
7.表单元素分组标签fieldset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset style="border:none;background:#eee">
<legend>基本信息</legend>
<div>
<label for="name">用户名称</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="pwd">用户密码</label>
<input type="password" name="pwd" id="pwd">
</div>
<div>
<label for="email">电子邮箱</label>
<input type="email" name="email" id="email">
</div>
</fieldset>
</form>
</body>
</html>
网页显示效果:
8.HTML5新增表单属性
- 新增属性表
序号 | 属性名称 | 描述 |
1 | placeholder | 占位符,类似于value属性,设置默认值可提示信息 |
2 | autofocus | 自动焦点,页面渲染时自动获取焦点 |
3 | required | 必填项,如果为空则无法提交并将焦点自动定位在上面 |
4 | pattern | 对输入内容进行正则验证 |
5 | list | 限定输入内容的列表,列表由<datalist>创建 |
6 | height和width | <input type="image">input类型为图像时,设置图像的宽高 |
7 | min、max和step | input类型为数字或日期类型时,设置取值范围与步长(间隔) |
8 | novalidate | 用在<form>中,提交时不对数据进行验证 |
- 新增属性实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 对比value属性和新增的placeholder属性 -->
<label for="name">姓名:</label>
<input type="text" name="name" id="name" value="8-15个字符">
<br>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="8-15个字符" autofocus>
<br>
<label for="age">年龄:</label>
<input type="text" name="age" id="age" placeholder="8-15个字符" required>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
网页显示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<label for="name">国家代码:</label>
<input type="text" name="country" id="name" pattern="[A-Z]{3}" title="三字母国家代码">
<input type="submit" value="提交">
</form>
</body>
</html>
网页显示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<label for="search">搜索:</label>
<input type="text" id="search" list="keyword">
<datalist id="keyword">
<option value="html">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
<option value="php">php</option>
<option value="python">python</option>
</datalist>
</form>
</body>
</html>
网页显示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<label for="gongzi">工资:</label>
<input type="number" name="gongzi" id="gongzi" min="1000" max="15000" step="500">
</form>
</body>
</html>
网页显示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 不再客户端验证,在服务器端验证,此时输入任何字符都不会报错 -->
<form action="" novalidate>
<label for="name">国家代码:</label>
<input type="text" name="country" id="name" pattern="[A-Z]{3}" title="三字母国家代码">
<input type="submit" value="提交">
</form>
</body>
</html>
网页显示效果:
9.HTML5新增表单类型
- 新增表单类型
序号 | 属性名称 | 描述 |
1 | number | 仅限数值型数据,可设置区间范围与步长增量:1988 |
2 | date | 仅限日期型数据,可设置区间范围与步长增量: 2017-03-22 |
3 | time | 仅限时间型数据,可设置区间范围与步长增量:22:34 |
4 | 限定必须输入电子邮箱地址,如***@*** | |
5 | search | 不限定内容,当有内容时,控件尾部有一个:取消符号 |
6 | url | 限定必须是以http://或https://开头的合法的url地址 |
7 | color | 自动打开系统的色板或拾色器,进行颜色选择 |
- 新增表单类型实例
效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<label for="age">年龄:</label>
<input type="number" name="age" id="age" min="18" max="120" step="5">
<br>
<label for="date">出生日期:</label>
<input type="date" name="date" id="date" min="2015-10-20" max="2018-9-10" value="2016-3-8">
<br>
<label for="time">上课时间</label>
<input type="time" name="time" id="time" min="12:10" max="16:20" value="13:45">
</form>
</body>
</html>
网页显示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<div>
<label for="email">电子邮箱:</label>
<input type="email" name="email" id="email" placeholder="[email protected]">
</div>
<div>
<label for="key">请输入搜索关键字:</label>
<input type="search" name="key" id="key" placeholder="请输入关键字">
</div>
<div>
<label for="url">网站地址:</label>
<input type="url" name="url" id="url" placeholder="请输入网址">
</div>
<input type="submit" value="提交">
</form>
</body>
</html>
10.HTML表单总结
表单是网页获取用户数据的重要手段,也是影响网站安全的重要入口,因此,设计一个安全可靠并且人性化的表单,是web开发人员必备的基本技能~~