CH04_HTML表单

本章目标

掌握表单的基本标签（重点）

掌握表单的基本验证（重点、难点）
掌握语义化布局页面（重点）
掌握H5常用表单属性（重点）

一、什么是表单？

大家上网时看到的表当在网页中的应用有那些?

拿百度注册举例说明

二、表单的作用

表当可以用来收集用户的数据,提交表单时,可以向服务器法总请求,并且还可以携带用户填写的数据

总结到目前为止我们一共永几种方式可以向服务器发送请求呢?

三种方式

第一种：直接在浏览器的地址栏上输入URL.回车.

第二种：用户直接点击超链接.

第三种：用户填写表单,然后点击提交按钮,发送请求,并且提交数据给服务器.

三、表单的基本语法：

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交">
      <input type="reset" name="Reset" value="重填"> 
   </p>
</form>

3.1 from标签属性：

method属性：用来指定表单提交方式/方法,常用的包括两种

get方式提交：提交的时候,提交的数据会直接显示在浏览器的地址栏上.

post方式提交：提交到时候,提交的数据不会直接显示在浏览器的地址栏上

注意：当method缺省到时候,默认采用get方式提交,只用设置成post到时候,表单才会采用post方式提交

3.2 input标签属性：

input被称为输入域,规定了用户可以在其中输入数据的字段,在网页中使用的非常多,基本的登录注册输入信息包括网页中的搜索框都会使用它

3.3 input的属性

type属性指定用户的类型：
- text：默认值,定义一个当行文本字段(默认宽度为20个字符).
- passwoed：定义密码字段(字段的字符会被遮蔽)
- checkbox：定义复选框
- radio：定义单选按钮
- submit：定义提交按钮
- reset：定义重置按钮(重置所有的表单值为默认值)
- file：定义文件选择字段和”浏览..”按钮,供文件上传
- hidden：定义隐藏输入字段
- image：定义图像作为提交按钮
- button：定义可点击的按钮(通常与javaScript一起使用来启动脚本)
- email：限制用户输入必须为Email类型
- search：这是一个搜索栏。如有文本输入的话，很多浏览器都会在最右边提供一个清空搜索栏的小叉，点了就清空该搜索栏。
- url：限制用户输入必须为URL类型
- number：限制用户输入必须为数字类型
- color：生成一个颜色选择表单
- range ：生成一个滑动条
- datetime-local：显示完整日期不含时区
- date：限制用户输入必须为日期类型
- time：限制用户输入必须为时间类型
- month：限制用户输入必须为月类型
- week：限制用户输入必须为周类型
name：指定表当元素的名称
value：元素的初始值.type为radio时必须指定一个值
size：指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength：type为text 或 password 时，输入的最大字符数
checked：type为radio或checkbox时，指定按钮是否是被选中
required：内容不能为空
placeholder：表单提示信息
readonly：表单只读，无法修改
disabled：表单禁用，无法修改值、点击
autofocus：自动聚焦
pattern：正则表达式输入的内容必须匹配到指定正则范围
autocomplete：是否保存用户输入值
- 默认为on，关闭提示选择off
list：输入框选择列表配合datalisti标签，使用 list属性绑定datalist的id值

3.4 文本框

进场在页面中用来输入账户或者账户名等操作语法如下

1	<input type="text" name="userName" value="用户名" size="30" maxlength="20" >

在type属性中放入值”text”

name：文本框名称(建议必须加上名字)

value：文本框初始值(也是默认值)

size：文本框拆长度,通过它控制文本框有多长

maxlength：文本框可输入最大的字符,控制文本框最多可以输入多少字符

3.5 密码框

密码框与文本框拽在输入时展示的是不一样的,我们在网页登录或者用户登录时输入用户名都是可以看见内容的而密码框是看不见内容的,用黑色实心的圆点来显示(如图所示)密码框我们一般都是不设置默认值的

区别：文本框内容可见,密码框内容被代替了

1	<input type="password " name="pass" size="20" />

在type属性中放入值”passwrod(密码)”

name：密码框的名称(建议必须加上)

size：控制密码框长度

3.6 单选按钮

单选按钮,单选单选顾名思义就是说只可以选择一个不可以选择多个,一般应用在用户注册的时候不是通常都会让选择性别”男”或者”女”没有说两个都选择上把!它的应用场景还有很多地方如图所示

1 2	<input name="gen" type="radio" value="男" checked="checked" >男 <input name="gen" type="radio" value="女" >女

在type属性中放入值”radio”

name：单选框名称,同一组单选框必须要一个name名称才能达到互相排斥

value：值一定要给值不然提交数据时会提交空的过去

checked：单选按钮选择状态,同一组单选框必须要一个是选中状态并且只能有一个

3.7 复选框

复选框可以选择多个内容,通常应用到收集用户爱好场景

区别：复选框可以选择多个内容单选框一次只能选择一个内容

代码如下

1
2
3

<input type="checkbox" name="interest" value="sports">运动
<input type="checkbox" name="interest" value="talk" checked="checked" >聊天
<input type="checkbox" name="interest" value="play">玩游戏

在type属性中放入值”checkbox”

name：名称,同一组多选框可以设置相同的name也可以不同但必须要有

value：值,(必须)

checkbox：复选框选择状态,必须要有一个默认有,同一组可以有多个

3.8 列表框

列表框不像之前一样了,在input里面通过input更改它有自己的标签组成”select”和”option”,通常运用在用户注册时选择出生年月日等场景语法如下

<!--创建列表框-->
<select name="列表名称" size="行数">
    <!--选项-->
	<option value="选项的值" selected="selected">…</option >
	<option value="选项的值">…</option >
</select>

select：用来创建下拉列表

name：列表名称(必须)

size：控制列表都长度,使用该属性后列表框有变化

option：定义了列表中的可选项

value：值(必须)

selected：默认选中项,规定选项（在首次显示在列表中时）表现为选中状态(必须要选择一项)

3.9 数字框

number：限制用户输入必须为数字类型

step：数字步进值

max：最大值

min：最小值

value：初始值

1	数量：<input type="number" value="1" min="1" max="100" step="2">

四、表单按钮

在表单中按钮起到关键的作用提交重启等,没有按钮表单无法进行提交数据,按钮大致分为重置按钮提交按钮图像按钮普通按钮等

4.1 重置按钮

重置所有的表单值为默认值,当你想重置表单中使用

在type属性中放入值”reset”

4.2 提交按钮

给表单所有的数据进行提交,当你想要提交表单时使用

在type属性中放入值”submit”

4.3 普通按钮

普通按钮是需要添加onclick事件的，后期课程会讲解，这里稍微了解一下就可以了

在type属性中放入值”button”

4.4 图片按钮

定义图像作为提交按钮

在type属性中放入值”iamge”

src：图片的路径

4.5 按钮其它属性

name：定义按钮的名称(必须)

value：定义按钮值同时定义按钮显示的文字

五、表单域

5.1 多行文本域

在使用表单时，例如姓名、年龄字段我们可以使用单行文本框，但是当涉及到描述信息，内容比较多时，单行文本框很有可能放不下所有的内容，这时就需要用到多行文本框。在 HTML 中，使用 <textarea> 标签来表示多行文本框，又叫做文本域。与其它 <input> 标签不同，<textarea> 标签是成对标签，它包含起始标签和结束标签，文本内容需要写在两个标签中间。具体语法格式如下：

1	<textarea name="showText" cols="x" rows="y">文本内容 </textarea >

cols ：属性用来指定每行可以显示的字符数，也就是文本域的可见宽度。一般情况下，如果内容超出文本域宽度，会自动换行显示，但是如果文本内容较长，而且在大于文本域宽度时，还没有空格可以进行换行，就会出现横向滚动条。

rows：属性用来设置文本域的可见行数，也就是文本域的高度。当文本内容超出设置高度时，会出现纵向滚动条。用户拖动滚动条可以查看全部内容

id：属性用来定义文本域的唯一 id 值。

5.2 文件域

定义文件选择字段和 “浏览…” 按钮，供文件上传,在页面中我们可能会经常上传一些文件例如我们写一个考试页面是不是试卷完成后需要提交到教师或者你们的作业完成了这个时候需要使用文件域了

<form action="" method="post" enctype="multipart/form-data">
  <p>
  <input type="file" name="files" />
  <input type="submit" name="upload" value="上传" />
   </p>
</form>

注意：在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。

type属性值为file即为文件域

name：定义文件域的名称

5.3 隐藏域

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。

1	<input type="hidden" value="666" name="userid">

type属性值为hidden即为文件域

value：定义隐藏域值

name：定于隐藏域名称

六、H5新增表单属性

6.1 只读和禁用

不能单写readonly或disabled，必须写readonly＝”readonly”和disabled=“disabled”，介绍只读和禁用的使用场合

1 2	<input name="name" type="text" value="张三" readonly="readonly"> <input type="submit " disabled="disabled" value="保存" >

6.2 表单输入提示

placeholder 属性提供一种提示（hint），描述输入域所期待的值。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失

1 2	账号：<input type="text" placeholder="请输入账号"><br/> 密码：<input type="text" placeholder="请输入密码">

6.3 表单自动获得光标焦点

autofocus：自动获得表单光标焦点

1	<input type="text" autofocus="autofocus">

6.4 表单必须填写内容

required：在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户必须输入内容

1	<input type="text" required="required">

6.5 保存用户输入的值

autocomplete：是否保存用户输入值
- on：默认为on，保存用户输入的值
- off：关闭提示，不保存用户输入的值

1 2	用户名：<input type="text" autocomplete="on"> 昵称：<input type="text" autocomplete="off">

6.6 表单输入关联搜索

list：输入框选择列表配合datalisti标签，使用 list属性绑定datalist的id值

6.10 表单正则匹配

pattern：正则表达式，输入的内容必须匹配到指定正则范围

1	QQ号码：<input type="text" pattern="[1-9][0-9]{4,}">

七、正则表达式

7.1 什么是正则表达式？

正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为”元字符”），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。

7.2 正则表达式作用

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑

7.3 正则表达式语法

正则表达式修饰符

修饰符与其他语法特殊，字面量方法声名的时候放到//后，构造函数声明的时候，作为第二个参数传入。整个正则表达式可以理解为正则表达式规则字符串+修饰符

g：global全局匹配，查找所有的匹配项。
i：ignore不区分大小写，将匹配设置为不区分大小写，搜索时不区分大小写: A 和 a 没有区别。
m: multiple lines多行匹配，使边界字符 ^ 和 $ 匹配每一行的开头和结尾，记住是多行，而不是整个字符串的开头和结尾。

正则表达元字符

\：将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。
^：匹配输入字符串的开始位置。
$：匹配输入字符串的结束位置。
*：匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。
+：匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。
?：匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 。? 等价于 {0,1}。
{n}：n 是一个非负整数。匹配确定的 n 次。
{n,}：n 是一个非负整数。至少匹配n 次。
{n,m}：m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。
?：当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。
.：匹配除换行符（\n、\r）之外的任何单个字符。
[a-z]：字符范围。匹配指定范围内的任意字符。
[^a-z]：	负值字符范围。匹配任何不在指定范围内的任意字符。
\b：匹配一个单词边界，也就是指单词和空格间的位置。
\B：匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。
\d：匹配一个数字字符。等价于 [0-9]。
\D：匹配一个非数字字符。等价于 [^0-9]。
\f：匹配一个换页符。等价于 \x0c 和 \cL。
\n：匹配一个换行符。等价于 \x0a 和 \cJ。
\r：匹配一个回车符。等价于 \x0d 和 \cM。
\s：匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S：匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\t：匹配一个制表符。等价于 \x09 和 \cI。
\w：匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。
\W：匹配非字母、数字、下划线。等价于 '[^A-Za-z0-9_]'。

7.4 常用正则表达式

一、校验数字的表达式
1 数字：^[0-9]*$
2 n位的数字：^\d{n}$
3 至少n位的数字：^\d{n,}$
4 m-n位的数字：^\d{m,n}$
5 零和非零开头的数字：^(0|[1-9][0-9]*)$
6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
7 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$
8 正数、负数、和小数：^(-|+)?\d+(.\d+)?$
9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
11 非零的正整数：^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]*$
12 非零的负整数：^-[1-9][]0-9"$ 或 ^-[1-9]\d$
13 非负整数：^\d+$ 或 ^[1-9]\d*|0$
14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
15 非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$

二、校验字符的表达式
1 汉字：^[\u4e00-\u9fa5]{0,}$
2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3 长度为3-20的所有字符：^.{3,20}$
4 由26个英文字母组成的字符串：^[A-Za-z]+$
5 由26个大写英文字母组成的字符串：^[A-Z]+$
6 由26个小写英文字母组成的字符串：^[a-z]+$
7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
8 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
12 禁止输入含有~的字符：[^~\x22]+

三、特殊需求表达式（重点）
1 Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
3 网址URL：[a-zA-z]+://[^\s] 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=])?$
4 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
5 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
6 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
7 身份证号(15位、18位数字)：^\d{15}|\d{18}$
8 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
9 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
10 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
12 日期格式：^\d{4}-\d{1,2}-\d{1,2}
13 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
14 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
15 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
16 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
17 IP地址：\d+.\d+.\d+.\d+ (提取IP地址时有用)

八、时间表单控件

datetime-local：显示完整日期不含时区
date：限制用户输入必须为日期类型
time：限制用户输入必须为时间类型
month：限制用户输入必须为月类型
week：限制用户输入必须为周类型

完整日期：<input type="datetime-local" name="" id=""><br/>
年/月/日时间：<input type="date" name="" id=""><br/>
月份时间：<input type="month" name="" id=""><br/>
周时间：<input type="week" name="" id=""><br/>
时/分：<input type="time" name="" id="">

九、域,域标题

可以将表单内的相关元素分组,标签会在相关表单元素周围绘制边框,再给一个标题

<form action="" method="post" >
    <!--定义一个域-->
	<fieldset>
        <!--定义域标题-->
    	<legend>用户信息</legend>
        	姓名：<input type="text"/>
    </fieldset>
</form>