文章目录

网页制作语言HTML5的应用
- 一. HTML5语言基础
- - 1.1 HTML文件的基本结构和W3C标准
  - - 1.1.1 什么是HTML？
    - 1.1.2 W3C标准的由来
    - 1.1.3 HTML5文件基本结构
  - 1.2 制作网页的基本标签
  - - 1.2.1 标题标签
    - 1.2.2 段落标签和换行标签
    - 1.2.3 水平线标签
  - 1.3 图像标签
  - - 1.3.1 常用的图像格式
    - 1.3.2 图像标签的基本语法
  - 1.4 超链接标签
  - - 1.4.1 超链接的基本语法
    - 1.4.2 超链接的使用
  - 1.5 行内元素和块元素
- 二. 列表、表格与、媒体元素
- - 2.1 列表
  - - 2.1.1 无序列表及其应用
    - 2.1.2 有序列表及其应用
    - 2.1.3 定义列表及其应用
    - 2.1.4 注意
  - 2.2 表格
  - - 2.2.1 使用表格的优点
    - 2.2.2 表格的基本结构
    - 2.2.3 表格的基本语法
    - 2.2.4 表格的跨列与跨行
    - - 1.跨列
      - 2.跨行
      - 3.跨行与跨列的综合应用
  - 2.3 HTMl5中的媒体元素
  - - 2.3.1 视频元素
    - 2.3.2 音频元素
  - 2.4 HTMl5中的结构元素
  - - 2.4.1 结构元素的使用
  - 2.5 < iframe >框架
- 三. 表单
- - 3.1 什么是表单
  - 3.2 表单的结构与使用
  - - 3.2.1 表单的内容
    - 3.2.2 表单标签及表单属性
    - 3.2.3 表单元素及其格式
    - - 1.文本框
      - 2.密码框
      - 3.单选按钮
      - 4.复选框
      - 5.列表框
      - 6.按钮
      - 7.多行文本域
      - 8.文件域
      - 9.邮箱
      - 10.网址
      - 11.数字
      - 12.滑块
      - 13.搜索框
  - 3.3 表单的高级应用
  - - 1.设置表单的隐藏域
    - 2.表单的只读与禁用设置
    - 3.表单元素的标注
  - 3.4 表单的成绩验证
  - - 3.4.1 表单验证的好处
    - 3.4.2 表单验证初级方法
    - - 1.placeholder
      - 2.required
      - 3.pattern
- 四. 总结
- - 2.required
  - 3.pattern
- 四. 总结

网页制作语言HTML5的应用

在现代社会，网络已经和我们无法相离，而网站已经成为了网络购物、企业办公、产品宣传、信息咨询展示等方面的工具。接下来，让我们来学习如何利用HTMl5语言来制作网页。

一. HTML5语言基础

1.1 HTML文件的基本结构和W3C标准

1.1.1 什么是HTML？

它是用来描述网页的一种语言，它是一种超文本标记语言，换句话说，它不是一种编程语言，仅仅是一种标记语言。所以HTML是由一套标记标签组成的。你可以在任意一个浏览器中使用F12按钮就能显示这个网页的源文件。

HTML5是目前最新版本，它提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素和规则的建立提供了许多新的网页功能。

1.1.2 W3C标准的由来

在互联网的世界里，主要是实现信息的传播与共享，而HTML也是由此发明而来。但是在被发明的初期，各个浏览器厂商的激烈竞争导致HTML的标签使用并未统一，所以后来万维网联盟(World wide web alliance ，W3C)成立了。

W3C不是一个标准，而是一系列标准的集合。包括了结构、表现和行为，分别对应了HTML、CSS、JavaScript，这里现在只说明HTML。

1.1.3 HTML5文件基本结构

标记在有的地方称为标签或者元素，其实他们都是指同一种东西，标签都是成对出现的，有开头就有结尾，最基本的语法是<标记>内容</标记>，其中整个HTML包括头部（head）和主体（body）两部分，头部还包括网页标题（title）等基本信息，主体还包括网页的内容信息，如图片文字等。

在编写HTML时一定要注意以下方面：

1.DOCTYPE声明

约束HTML文档结构，检查是否符号相关Web标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE必须位于HTML文档的第一行。

<!DOCTYPE html><!DOCTYPE html>
</!doctype>

2.< title>标签

使用< title>标签描述网页的标题,类似一篇文章的标题，一般为一个简介的主题，并能使读者有兴趣读下去。

<title>搜狐-中国最大的门户网站</title>

3.标签

使用该标签描述网页的摘要信息,包括文档内容的信息，字符编码信息,搜索关键字，网站提供的功能和服务的详细描述等。

(1)文档内容类型,字符编码信息如下：

<meta chareset =UTF-8/></meta>

属性:char表示字符集编码,常用的编码有以下几种：

gb312：简体中文,一般用于包含中文和英文的页面
ISO-885901：纯英文,一般用于只包含英文的页面
big5：繁体,一般用于带有繁体字的页面
UTF-8：国际通用的字符编码,同样适用于中文和英文页面，和gb312编码相比,国际通用性更好

在保存文件时编码方式一定要与HTML5页面中标签中的编码方式保持一致，否则，将会出现乱码。

(2)搜索关键字和内容描述信息书写如下：

<meta name="keywords"  content="北大青鸟,it培训机构"/>
<meta name="discription"  content="北大青鸟是国内最大的it教育集团,致力于为中国培养优秀的it技术人才/>

实现的方式仍然为，"名称/值"对的形式,其中keywords表示搜索关键字，discription表示网站内容的具体描述.通过提供关键字和内容描述信息,方便搜索引擎的搜索。

1.2 制作网页的基本标签

1.2.1 标题标签

标题标签一般用于各个重点的展现，在标签中的文字加粗并单独在一行显示。例如示例 1,一级标题采用< h1>,二级标题采用< h2>,其他级别依次类推.HTML一共采用了六级标签< h1>~< h6>,< h6>字号最小。

示例1

<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8" /><title>不同等级的标题标签对比</title></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body>
</html>

1.2.2 段落标签和换行标签

示例2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>段落标签的应用</title></head><body><h1>北京欢迎你</h1><p>北京欢迎你,有梦想谁都了不起</p><p>有勇气就有奇迹.</p></body>
</html>

段落标签< p>…< /p>表示一段文字等内容。例如希望描述"北京欢迎你"这首歌。包括歌名(标题)和歌词(段落)，

1.2.3 水平线标签

水平线标签< hr/>表示一条水平线,该标签与< br/>一样比较特殊，没有结束标签。

示例3

<!DOCTYPE html>
<html><head><head lang="en"><meta charset="UTF-8"><title>换行标签的应用</title></head><body><h1>北京欢迎你</h1><p>北京欢迎你,有梦想谁都了不起!<br/>有勇气就会有奇迹.<br/>北京欢迎你,为你开天辟地<br/>流动中的魅力充满着朝气.<br/>北京欢迎你,在太阳下分享呼吸<br/>在黄土地刷新成绩.<br/>北京欢迎你,像音乐感到你<br/>让我们加油自己去超越.<br/></p></body>
</html>

HTML中常用的特殊符号及其对应的字符实体

特殊符号	字符实体	示例
空格		百度
大于号(>)	>	如果时间>晚上6点,就坐车回家
小于号(<)	&It;	如果时间⁢早上7点就走路去上学
引号(")	"	W3C规范中,HTML的属性值必须要用成对的&quot
版权符号(@)	©	©200013-2018北大青鸟

示例4

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><title>特殊符号的应用</title></head><body>&copy;20013-2018&nbsp;Beijing Aptech Beida Jade Bird Information TechnllotyCo.Lad<br />北京阿博泰克北大青鸟信息技术有限公司&nbsp;&nbsp;</body>
</html>

1.3 图像标签

在日常生活中，使用比较多的图像格式有四种：

JPG格式：JPG格式图像是在Internet上被广泛支持的图像格式，它是联合图像专家组格式的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用。
GIF格式：GIF格式图像是网页中使用最广泛、最普遍的一种图像格式，它是图像交换格式的英文缩写。GIF格式文件支持透明色，是的GIF格式在网页的背景和一些多层特效的显示上用的非常多，还支持动画，这是它最突出的一个特点。
BMP格式：BMP格式图像在Windows操作系统中使用得比较多，它是位图的英文缩写。BMP格式图像文件格式与其他Microsoft Windows程序兼容。它不支持压缩，也不适用于Web页。
PNG格式：PNG格式是20世纪90年代中期开始开发的图像文件存储格式，它兼有GIF格式和JPG格式的优势，同时具备GIF格式不具备的特性。

1.3.1 常用的图像格式

在日常生活中，使用比较多的图像格式有四种：

JPG格式：JPG格式图像是在Internet上被广泛支持的图像格式，它是联合图像专家组格式的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用。
GIF格式：GIF格式图像是网页中使用最广泛、最普遍的一种图像格式，它是图像交换格式的英文缩写。GIF格式文件支持透明色，是的GIF格式在网页的背景和一些多层特效的显示上用的非常多，还支持动画，这是它最突出的一个特点。
BMP格式：BMP格式图像在Windows操作系统中使用得比较多，它是位图的英文缩写。BMP格式图像文件格式与其他Microsoft Windows程序兼容。它不支持压缩，也不适用于Web页。
PNG格式：PNG格式是20世纪90年代中期开始开发的图像文件存储格式，它兼有GIF格式和JPG格式的优势，同时具备GIF格式不具备的特性。

1.3.2 图像标签的基本语法

示例5

<html><head lang="en"><meta charset="UTF-8"><title>图像标签的应用</title></head><body><p><img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃"title="无漂白薄皮核桃" /></p><p>楼兰蜜语 新疆野生<br />无漂白薄皮核桃 500g*2包<br />￥48.8</p></body>
</html>

其中，src属性表示图片路径，alt属性指定的替代文本，表示图像无法显示时替代的文本，这样即使当图像无法显示时，用户还是可以看到网页丢失的信息内容，所以alt属性在制作网页时和src属性配合使用。width和heigth两个属性分别表示图片的宽度和高度，如果不设置那么图片默认显示原始大小。

1.4 超链接标签

1.4.1 超链接的基本语法

链接包含俩部分,一是链接地址,即链接的目标,可以是某个网址或文件的路径,对应位< a>标签的属性,二是链接文本或图像,单击该文本或图像,将跳转到“href”属性指定的链接地址,超链接的基本语法如下:

语法：

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

href：表示链接地址的路径

target：表示链接在哪个窗口打卡,常用的取值有_self(自身窗口）， _blank(新建窗口位置)

超链接也可以是文本超链接，也可以是图像超链接。根据链接的地址是指向站外文件还是站内文件，链接又分为绝对路径和相对路径：

绝对路径：指向目的地址是完整描述，一般指向本站点外的文件.
相对路径：相对于当前页面的路径，一般指向本站点内的文件,所以一般不需要完整的url地址的形式。

另外，站内使用相对路径时常用到两个特殊符号："…/“表示当前目录的上级目录，”…/…/"表示当前目录的上上级目录。

1.4.2 超链接的使用

大家在上网时，会发现不同的链接方式，有的链接到其他页面，有的链接到其他页面，有的链接到当前页面，还有单击一个链接直接打开邮件，实际上根据超链接的应用场合，可以吧链接分为三类。

页面间链接：A页到B页，最常用，用于网站导航。

示例6

<html><head lang="rn"><meta charset="UTF-8"><title>页面间链接</title></head><body><p><a href="elearing/index.html"target="_blank">YL在线学习平台</a></p><p><a href="elearing/couresList.html" target="_blank">YL在线学习课程列表</a></p></body>
</html>

锚链接：A页甲位置到A页乙位置或A页甲位置到B页乙位置，常用于目标页内容很多，需定位到目标页内容中的某个具体位置时。

示例7

<html><head lang="en"><meta charset="UTF-8"><title></title></head><body><!--省略部分HTML代码--><p><img src="image/logo.jpg" width="305" height="104" alt="logo"/>[<a href="#register">新用户注册帮助</a>] [<a href="#;ogin">用户登录帮助</a>]</p><h1>新手指南</h1><!--省略部分HTML代码--><h2>a name="register">登录</a></h2><!--省略部分HTML代码--><h2>a name="login">登录</a></h2><!--省略部分HTML代码--></body>
</html>

功能性链接：在页面中调用其他程序功能，如电子邮件、QQ、MSN等，以最常用的电子邮件链接为例，当单击“联系我们”邮件链接时，将打开用户的电子邮件程序，并自动填写“收件人”文本框中的电子邮件地址。

示例8

<html><head lang="en"><meta charset="UTF-8"><head><meta http-equiv="content-type" content="text/html"; charset="gb2312" /><title>邮件链接</title></head><body><p><img src="image.jpg" width="305" height="104" alt="logo"/>[<a href="msilto:bfqnWebmaster@bdqn.cn">联系我们</a>]</p></body>
</html>

1.5 行内元素和块元素

这两个元素其实非常好区分，只要记住以下两点：

块元素特性：无论内容多少，该元素独占一行。
行内元素特性：内容撑开宽度，左右都是行内元素的可以排在一行。

二. 列表、表格与、媒体元素

2.1 列表

什么是列表？简单来说，列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式出来，以便浏览者能更快捷的获得相应的信息。其中，列表也有分类，可以在其中使用合适的列表帮助我们排列网页里的内容。

2.1.1 无序列表及其应用

无序列表由< ul>标签和< li>标签组成，使用< ul>标签作为无序列表的声明，使用< li>标签作为每个列表项的起始。

示例9

<body><h3>热搜</h3><ul><li>范冰冰演藏族女孩</li><li>撞死两个人后自拍</li><li>诗隆甜蜜出游</li><li>一线城市楼市退烧</li></ul></body>

注意：

遵循W3C标准，< ul>标签里面中呢过嵌套li标签，不能嵌套其他标签。
li标签里面可以嵌套任意标签。

无序列表的特性如下：

没有顺序，每个< li>标签独占一行(块元素)。
默认li标签项前面有个实心小圆点。
一般用于无序类型的列表。如导航，侧边栏新闻，有规律的图文组合模块等。

2.1.2 有序列表及其应用

有序列表由< ol>标签和li标签组成，使用< ol>标签作为有序列表的声明，使用< li>标签作为每个列表项的起始，有序列表嵌套如同无序列表一样，只能< ol>标签里嵌套< li>标签。

示例10

<body><h3>热搜</h3><ol><li>范冰冰演藏族女孩</li><li>撞死两个人后自拍</li><li>诗隆甜蜜出游</li><li>一线城市楼市退烧</li></ol></body>

有序列表特性如下：

有顺序，每个li标签独占一行(块元素)。
默认每个li标签独占一行(块元素)。项前面有顺序标记。
一般用于排序类型的列表，如试卷，问卷选项等。

2.1.3 定义列表及其应用

定义列表是一种很特殊的列表形式。它是标题及列表项的结合。定义列表的语法相对于无序和有序列表不太一样，它使用< dl>标签作为列表的开始，使用< dt>标签作为每个列表项的起始，而对于每个列表项的定义则使用< dd>标签来完成。

示例11

<body><dl><dt>水果</dt><dd>苹果</dd><dd>桃子</dd><dd>李子</dd><dt>蔬菜</dt><dd>白菜</dd><dd>黄瓜</dd><dd>西红柿</dd></dl></body>

定义列表的特性如下：

没有顺序，每个dt标签，dd标签独占一行(块元素)。
默认没有标记。
一般用于(一个标题下有一个或多个列表项)*n的情况。

2.1.4 注意

无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容。有序列表会依据列表项的顺序进行显示。
在实际的网络应用中，无序列表比有序列表应用得更加广泛，有序列表ol-li一般用于展示带有倒序编号的特定场合。
定义列表一般适用于带有标题和标题解释性内容的场合。

2.2 表格

2.2.1 使用表格的优点

表格也是数据的一种良好的表达方式，使用表格的优点有：

简单通用：由于表格行列的简单结构，以及在生活中的广泛使用，因此对它的理解和编写都很方便。
结构稳定：表格通常每行的列数一致，同行单元格高度一致且水平对齐，同列单元格高度一致且垂直对齐。这种严格的约束形成了一个不易变形的长方形盒子结构，堆叠排列起来结构很稳定。

2.2.2 表格的基本结构

单元格：单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格。
行：一个或多个单元格横向堆叠形成了行。
列：由于表格单元格的宽度必须一致，因此单元格纵向排列形成了列。

2.2.3 表格的基本语法

创建表格一般分为下面四步：

第一步：创建表格标签< table>…< /table>。

第二步：在表格标签< table>…< /table>里创建行标签< tr>…</ tr>，可以有多行。

第三步：在第一行标签< tr>…< /tr>里创建单元格标签< th>…< /th>，用于创建表格标题。

第四步：在行标签< tr>…< /tr>里创建单元格标签< td>…< /td>，可以有多个单元格。

为了显示表格的轮廓，一般还需要设置< table>里的border边框属性，指定边框的亮度。例如，在页面中添加一个2行3列的表格，就如以下代码所示。

示例12

<body><table border="2"><tr><th>1行1列的标题</th><th>1行2列的标题</th><th>1行3列的标题</th></tr><tr><th>1行1列的单元格</th><th>1行2列的单元格</th><th>1行3列的单元格</th></tr><tr><th>2行1列的单元格</th><th>2行2列的单元格</th><th>2行3列的单元格</th></tr></table></body>

2.2.4 表格的跨列与跨行

1.跨列

跨列就是指单元格的横向合并。

示例13

<body><table border="1"><tr><td colspan="2">学生成绩</td></tr><tr><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr></table></body>

col为colum(列)的缩写，span为跨度，所以colspan的意思为跨列。

2.跨行

跨行是指单元格在垂直方向上的合并。

示例14

<body><table border="1"><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr></table></body>

row为行的意思，rowspan即跨行。

一般而言，跨行或跨列操作时，需要以下两个步骤：

在需合并的第一个单元格，设置跨列或跨行属性，如colspan=“3”。
删除被合并的其他单元格，即把某个单元格看成多个单元格合并后的单元格。

3.跨行与跨列的综合应用

有时表格中既有跨行又有跨列的情况，从而形成了相对复杂的表格显示。

示例15

<body><table border="1"><tr><td colspan="3">学生成绩</td><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr></table></body>

跨行和跨列以后，并不改变表格的特点，同行的总高度一致，同列的总宽度一致。因此，表格中各单元格的宽度或高度互相影响，结构相对稳定，但缺点是不能灵活地进行布局控制。

2.3 HTMl5中的媒体元素

2.3.1 视频元素

Web上的视频播放从来都没有一个固定的标准，大多数视频都是通过想Flash这样的插件来显示的，不同的浏览器往往拥有不同的插件。HTML5中的video元素是现在播放视频的一种标准方法。

HTML5中的video元素是用来播放视频文件的，支持Ogg、MPEG4、WebM等视频格式。

示例16

<body><video controls="controls"><source src="../css/video.webm"></source><source src="../css/video.mp4"></source>你的浏览器不支持video标签</video></body>

其中src属性用于指定要播放的视频文件的路径，controls属性用于提供播放、暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度。如果浏览器不支持video元素，可以在video元素中间插入一段文字用于提示，这样，旧的浏览器就可以显示这段文字给用户。

在video中虽然可以用src属性连接视频路径，可是只能链接一种格式的视频，很难让每种浏览器都支持这种格式(不同浏览器支持度视频格式见下表)。所以就出现了source元素来解决这一问题，source元素嵌套在video里面，并且可以出现多次，每个source元素对应一种格式的视频。这样，浏览器会在这些格式中自己选择可以识别的一种来进行播放。

各大厂商浏览器支持的格式

浏览器	IE	Firefox	Opera	Chrome	Safari
视频格式
Ogg	不支持	3.5+	10.5+	5.0+	不支持
MPEG4	9.0+	不支持	不支持	5.0+	3.0+
WecM	不支持	4.0+	10.5+	6.0+	不支持

还有一种方法可以解决页面内播放视频的问题，即在video元素里设置另一个属性autplay。

示例17

<body><video autoplay><source src="../css/video.webm"></source><source src="../css/video.mp4"></source>你的浏览器不支持video标签</video></body>

设置autplay属性后，不需要与用户进行任何交互，就可以让视频文件加载完成后自动播放，所以大部分用户对这个功能很反感，应该慎用。

2.3.2 音频元素

HTML5中的audio元素是用来播放音频文件的，支持Ogg、MP3、WAV等音频格式。

示例18

<body><audio controls="controls"><source src="../css/music.mp3"></source><source src="../css/music.ogg"></source></audio></body>

其中src属性用于指定要播放的视频文件的路径，controls属性用于提供播放、暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度。

2.4 HTMl5中的结构元素

2.4.1 结构元素的使用

结构元素的解释

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于页面或页面中的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

接下来就使用这几个结构元素来布局网易邮箱页面结构。

示例19

<head lang="en"><meta charset="UTF-8"><title>网易邮箱页面布局</title><style>header,section,footer{height: 200px;border: 1px solid red;}</style></head><body><header><h2>网页头部</h2></header><section><h2>网页主体部分</h2></section><footer><h2>网页底部</h2></footer></body>

这样就能把一个页面的结构划分出来，分别在每块对应的部分添加相应的内容。通过这些有语义化的结构标签不仅可以使网页结构更清晰、明确，还有利于搜索引擎的检索。

2.5 < iframe >框架

示例20

<iframe src="y1.html" width="500px" height="236px" name="firstPage"></iframe>

< iframe >内联框架常用属性包括name、width、heigth。其中name属性可以和前面学过的锚链接结合起来实现页面间的相互跳转。具体步骤如下：

1.在被打开的框架上加name属性，关键代码如下：

<iframe name="mainFrame" src="subframe/the_second.html" />

2.在超链接上设置target目标窗口属性为希望显示的框架窗口名，关键代码如下：

<a href="subframe/the_second.html" target="mainFrame" >下面显示第二页</a>

具体实现如以下代码所示：

<body><h1>上方导航条</h1><p><a href="y1.html" target="mainFrame">下边显示第一页</a><br /><a href="y2.html" target="mainFrame">下边显示第二页</a><br /><a href="y3.html" target="mainFrame">下边显示第三页</a><br /></p><iframe name="mainFrame" width="800px" height="150px" src="y1.html"></iframe></body>

三. 表单

3.1 什么是表单

通俗地讲，表单就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中，当用户单击"提交"按钮的时候，表单会将数据统一发给服务器。

表单可以让服务器的运载压力降低，可以让用户和运用商的双方的感觉变得更好。

3.2 表单的结构与使用

3.2.1 表单的内容

创建表单后，就可以在表单中防止控件以接收用户的输入。这些控件通常放在<form.>…</from.>标签对之间，也可以在表单之外用来创建用户界面。

3.2.2 表单标签及表单属性

在HTML5中，使用<form.>标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效，<input.>便是其中一个，用于设定各种输入资料的方法。<form.>标签有两个常用的属性，如下表所示：

属性	说明
action	此属性指示服务器上处理表单输出的程序。一般来说，当用户单击表单上的”提交”按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。语法为action = “URL”。如果action属性的值为空，则默认表单提交到本页。
method	此属性告诉浏览器如何将数据发给服务器，它指定向服务器发送数据的方法。语法为method=(get\|post)。

示例21

<body><form method="post" action="result.html"><p>名字：<input name="post" 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>
</body>

在以上这个示例中，若把method="post"改为method="get"就变成了使用get方法将表单提交给"result.html"页面处理。

两种提交方式的区别如下：

podt方法提交方式不会改变地址状态，表单数据不会被显示。
使用get方法提交方式，地址栏状态栏会发生变化，表单数据会在URL信息中显示。

基于以上两点区别，post方法提交的数据安全性明显高于get方法提交的数据。

3.2.3 表单元素及其格式

如何在表单中添加表单元素，最简单的方法就是使用<input.>标签，它有很多属性，下面将对一些较常用的属性进行整理：

属性	说明
type	此属性指定表单元素的类型，可用的类型有text,password,checkbox,radio,submit,reset,file,email,bumber,url,hidden,image和button。默认为text
name	此属性指定表单元素的名称
value	此属性是可选属性，它指定表单元素的初始数值。如果type为radio类型，必须指定一个值
size	此属性指定表单元素的初始宽度。如果type为text或password类型，则表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位。
maxlength	此属性用于指定可在text或password元素中输入的最大字符数。默认值无限大
checked	此属性用于指定按钮是否是被选中的。当输入类型为radio或checkbox时，使用此属性

1.文本框

在表单中最常用、最常见的表单输入元素就是文本框(text)，它用于输入单行文本信息，乳痈户名的输入文本框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text类型就可以了。

示例22

<body><form method="post" action=""><p>名字：<input name="fname" type="text" value=""/></p><p>姓氏：<input type="text" name="lname" value="张"/></p><p>登录名：<input type="password" name="sname" size="30" /></p></form>
</body>

2.密码框

密码框与文本框类似，区别在于需要设置文本框控件的type属性为password。设置了type属性后，在密码框输入的字符全都以黑色实心的圆点来显示，从而实现了对数据的处理。

示例23

<body><form method="post" action=""><p>名字：<input name="post" type="text" size="21"/></p><p>密码：<input name="pass" type="password" size="22"/></p></form>
</body>

3.单选按钮

单选按钮控件用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选中一个单选按钮，只有从组中选中的单选按钮才会在提交的数据中提交对应的数值，在使用单选按钮时，需要一个显式的value属性。

示例24

<body><form method="post" action="">性别：<input name="gen" type="radio" value="男"/>男<input name="gen" type="radio" value="女"/>女</form>
</body>

4.复选框

复选框与单选框类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框了。

示例25

<body><form method="post" action="">爱好：<input name="interest" type="checkbox" value="spoorts"/>运动<input name="interest" type="checkbox" value="talk"/>聊天<input name="interest" type="checkbox" value="play"/>玩游戏</form>
</body>

5.列表框

列表框的目的主要是使用户快速、方便、正确地选择一些选项，并且节省页面空间。它是通过< select>标签和< option>标签来实现的。< select>标签用于显示可供用户选择的列表框，每个选项由一个< option>标签表示，< select>标签必须至少包含一个< option>标签。

示例26

<body><form method="post" action="">出生日期：<input name="byear" type="text" value="yyyy" size="4" maxlength="4"/>运动<select name="bmon"><option value="">[选择月份]</option><option value="1">一月</option><option value="2">二月</option><option value="3">三月</option><option value="4">四月</option><option value="5">五月</option><option value="6">六月</option><option value="7">七月</option><option value="8">八月</option><option value="9">九月</option><option value="10">十月</option><option value="11">十一月</option><option value="12">十二月</option></select>月<input name="bday" type="text" value="dd" size="2" maxlength="2"/></form>
</body>

6.按钮

按钮在表单中经常用到，在HTML5中按钮分为三种，分别是普通按钮(button)、提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填的信息。

示例27

<body><form method="post" action=""><p>用户名：<input name="post" type="text" /></p><p>密码：<input name="pass" type="password" /></p><p><input type="reset" name="butReset" value="reset按钮" /><input type="submit" name="butSubmit" value="submit按钮" /><input type="button" name="butButton" value="button按钮" onabort="alert(this.value)"/></p></form>
</body>

reset按钮：用户单击按钮后，无论表单中是否已经填写或输入数据，表单中各个表单元素都会被重置到最初状态，而填写或输入的数据都将被清空。
submit按钮：用户单击按钮后，表单将会提交到action属性所指定的URL，并传递表单数据。
button按钮：属于普通按钮，需要与事件关联使用。

7.多行文本域

当需要在网页中输入两行或两行以上的文本时，就需要使用多行文本框，它的标签是< textarea>。

示例28

<body><form method="post" action=""><h4>填写个人评价</h4><p><textarea name="textarea" cols="40" rows="6">  自信、活泼、善于思考...</textarea></p></form>
</body>

其中，cols属性用来指定多行文本框的列的宽度；rows属性用来指定多行文本框的行数。在< textarea>…< /textarea>标签对中不能使用value属性来赋初始值。

8.文件域

文件域的作用是用于实现文件的选择，在应用时只需把type属性设为file即可。在实际应用中，文件域通常应用于文件上传的操作，如选择需要上传的文本、图片等。

示例29

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

9.邮箱

email类型的input元素是一种专门用于输入Email地址的文本框，与上面表单元素不同的是email在提交表单的时候会自动验证email文本框的值。如果不是一个有效的邮箱地址，则该输入不允许提交表单。

示例30

<body><form method="post" action="" ><p>邮箱：<input type="email" name="email" /></p><input type="submit" /></form>
</body>

10.网址

url类型的input元素提供输入URL地址这类特殊文本的文本框，提交表单时，如果输入的内容不是URL地址格式的文本，将不允许提交表单。

示例31

<body><form method="post" action="#" ><p>请输入数字：<input type="number" name="num"  min="0" max="100" step="10"/></p><input type="submit" /></form>
</body>

11.数字

number类型的input元素提供用于输入数字的文本框，我们还可以对所接收的数字进行限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定的范围之内，则会出现错误提示。

示例32

<body><form method="post" action="#" ><p>请输入数字：<input type="number" name="num"  min="0" max="100" step="10"/></p><input type="submit" /></form>
</body>

number类型使用下表所示的属性来规定对数字的限定

属性	值	描述
value	number	规定的默认值
min	number	规定允许的最小值
max	number	规定允许的最大值
step	number	规定合法的数字间隔

12.滑块

range类型的input元素提供用于输入包含一定范围内的数字值的文本框。子啊网页中显示为滑动条。用法与上面的number类似。

示例33

<body><form method="post" action="#" ><p>请输入数字：<input type="range" name="range1"  min="0" max="100" step="2"/></p><input type="submit" /></form>
</body>

13.搜索框

search类型input元素提供用于输入搜索关键词的文本框。虽然外观看起来search类型和input的普通text类型差不多，但实现起来却并不那么容易。search类型提供的搜索框不只是Google或百度的搜索框，而是任意页面的一个搜索框。

示例34

<body><form method="post" action="#" ><p>请输入数字：<input type="search" name="sousuo" /><input type="submit" value="Go"/></p></form>
</body>

3.3 表单的高级应用

1.设置表单的隐藏域

网站服务器端发送到客户端的信息，除了用户直观看到的页面内容外，可能还包含一些"隐藏"信息。将type属性设置为hidden隐藏类型即可创建一个隐藏域。

示例35

<body><form method="post" action="result.html"><p>用户名：<input name="post" type="text" /></p><p>密码：<input name="pass" type="password" /></p><p><input type="submit" value="提交" /></p><p><input type="hidden" name="userid" value="666"/></p></form>
</body>

2.表单的只读与禁用设置

在某些情况下，需要对表单元素进行限制，即设置表单元素为只读或禁用。他们常见的应用场景如下：

只读场景：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示。
禁用场景：只有满足某个条件后，才能选用某项功能。

只读和禁用效果分别通过设置readonly属性和disabled属性来实现。

示例36

<body><form method="get" action="result.html"><p>用户名：<input name="name" type="text" value="张三" readonly/></p><p>密码：<input name="pass" type="password" /></p><p><input type="submit" value="修改" disabled/></p></form>
</body>

通常只读属性用于不希望用户对数据进行修改的场合，禁用属性则可以配合其他控件使用。最常见的就是在安装程序时，如果用户不选中"同意安装许可协议"复选框，则"安装"按钮或"下一步"按钮无法使用。

3.表单元素的标注

对表单元素进行标注，这样做的目的就是为了增强鼠标的可用性。这是因为使用表单元素标注时，在客户端呈现的效果不会有任何特殊的改进如果当用户使用鼠标单击标注的文本内容时，浏览器会自动将焦点转移到与该标注相关的表单元素上。

示例37

<body><form method="post" action="">请选择性别：<label for="male">男</label><input name="gender" type="radio" value="male"/><label for="female">女</label><input name="gender" type="radio" value="female"/></form>
</body>

3.4 表单的成绩验证

3.4.1 表单验证的好处

减轻服务器的压力。
保证数据的可行性和安全性。

3.4.2 表单验证初级方法

1.placeholder

placeholder属性用于为input类型的文本框提供一种提示(hint)，这种提示可以描述文本框期待

用户输入何种内容，在输入为空时显示，当在文本框中写入内容时消失。placeholder属性适合于input标签：text、search、url、email、password等类型。

示例38

<body><form method="post" action="#" ><p>请输入搜索的关键字：<input type="search" name="sousuo" placeholder="请输入搜索的关键字？"/><input type="submit" value="Go"/></p></form>
</body>

2.required

required属性用于规定文本框填写内容不能为空，否则不允许用户提交表单。该属性适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型。

示例39

<body><form method="post" action="#" ><p>用户名：<input type="search" name="sousuo" required/><input type="submit" value="提交"/></p></form>
</body>

3.pattern

pattern属性用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配。用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单。

示例40

<body><form method="post" action="#" ><p>电话号码：<input type="text" name="tel" required pattern="^1[35]\d{9}"/>*以13、15、18888开头的11位数字<br /><input type="submit" value="提交"/></p></form>
</body>

四. 总结

期待