HTML5基础 | (四)HTML常用表单元素和HTML5新增表单元素介绍

1.什么是表单？

2.表单组成部分

3.表单标签form

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	email	限定必须输入电子邮箱地址，如*@*
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开发人员必备的基本技能～～