4.2 增加与改良的input元素_HTML5程序开发范例宝典-QQ阅读男生都市网

书名：HTML5程序开发范例宝典
作者名：韩旭高飞孙桂杰编著
本章字数：10字
更新时间：2024-12-21 21:58:43

4.2 增加与改良的input元素

实例077 验证邮件地址是否合法

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\077

实例说明

HTML5 中大幅度地增加与改良了 input元素的种类，可以简单地使用这些元素来实现HTML5之前需要使用JavaScript才能实现的许多功能。本实例将通过email类型的input元素来验证输入的邮件地址格式是否合法，其在Opera浏览器中的运行结果如图4.10所示。

图4.10 验证E-mail 地址格式

技术要点

email类型的input元素是一种专门用来输入E-mail地址的文本框。提交时如果该文本框中内容不是E-mail地址格式的文字则不允许提交，但是它并不检查E-mail地址是否存在，和所有的输入类型一样，用户可能提交带有空字段的表单，除非该字段加上了required属性。

email类型的input元素的语法格式如下：

说明：到目前为止，对于这些input的种类来说，支持得最多、最全面的是Opera浏览器。因此，请在Opera浏览器中运行本实例。

实现过程

创建index.html文件，在文件中创建一个用户注册表单，并设置“email地址”文本框的type属性值为email。具体代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>验证email地址格式</title>

<styletype="text/css">

<!-

body,td,th {

font-size: 12px;

}

.STYLE1 {color: #990000}

-->

</style></head>

<body>

<formid="form1" name="form1" method="post" action="">

<tableid="__01" width="501"height="494" border="0" cellpadding="0" cellspacing="0">

<tr>

</tr>

<tr>

<tr>

</label></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

男

女</label></td>

</tr>

<tr>

<td align="left">email地址：</td>

<span class="STYLE1">*请输入正确email</span></td>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在注册页面中验证邮件地址是否有效。

在登录页面中验证邮件地址是否有效。

实例078 验证URL地址

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\078

实例说明

本实例将通过url类型的input元素来验证用户输入的URL地址是否正确。本实例在Firefox 浏览器中的运行结果如图4.11所示，在文本框中输入一个错误的URL地址，单击“提交”按钮，将弹出如图4.11所示的提示框。

图4.11 验证URL 地址

技术要点

url类型的input元素是一种专门用来输入URL地址的文本框。提交时如果该文本框中内容不是URL地址格式的文字，则不允许提交。url类型的input元素的使用方法如下：

实现过程

创建index.html文件，在文件中创建表单以及表单元素，并设置文本框的type类型为url。代码如下：

<html>

<head>

<title>验证URL</title>

<styletype="text/css">

<!-

.style1{

font-size: 13px

}

.style2{

font-size: 12px;

color:#FF0000;

}

.style3{

font-size: 12px

}

-->

</style>

</head>

<body>

<tablewidth="384"border="1"cellpadding="0"cellspacing="0">

<formname="form1" method="post"action="">

<td height="24" colspan="2" class="style1">验证URL</td>

</tr>

<tr>

<td width="119" height="20" align="center" class="style1">请输入URL地址:</td>

</tr>

<tr>

</td>

</tr>

</form>

</table>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在注册页面中验证个人空间的URL地址是否正确。

实例079 验证在文本框中输入数字的大小

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\079

实例说明

本实例将通过number类型的input元素验证在文本框中输入数字的大小是否符合要求。其在Chrome浏览器中的运行结果如图4.12所示。

图4.12 验证输入数字的大小

技术要点

本实例应用number类型的input元素。number类型的input元素是一种专门用来输入数字的文本框，并且在提交时会检查其中的内容是否为数字。表4.5 所示的属性可以规定对数字类型的限制。

表4.5 number类型支持的属性

在number 类型的输入框中，用户不可以输入其他非数字型的字符，并且当输入的数字大于设定的最大值或小于设定的最小值时，都将出现输入出错的提示信息。

实现过程

（1）创建index.html文件，在文件中创建表单以及3个number类型的input元素，分别用于输入出生日期中的“年”、“月”、“日”数字。然后在表单中创建一个“提交”按钮，单击该按钮将检测3个输入框中的数字是否符合各自设置的数值范围，不符合则显示提示信息。代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>使用number类型</title>

</head>

<body>

<formid="myform">

<legend>输入您的出生日期：</legend>

<input name="txtYear" type="number" class="inputtxt"min="1950" max="2000"step="1" value="1990"/>年

<input name="txtMonth" type="number" class="inputtxt" min="1" max="12"step="1"value="3"/>月

<input name="txtDay" type="number" class="inputtxt"min="1" max="31"step="1" value="26"/>日

</fieldset>

</form>

</body>

</html>

（2）创建css.css样式文件，具体代码如下：

@charset"utf-8";

/* CSS Document */

body{

font-size:12px

}

.inputbtn {

border:solid 1px #ccc;

background-color:#eee;

line-height:18px;

font-size:12px

}

.inputtxt {

border:solid 1px #ccc;

padding:3px;

line-height:18px;

font-size:12px;

width:160px

}

fieldset{

padding:10px;

width:280px;

float:left

}

举一反三

根据本实例，读者可以进行以下操作。

设置number类型的input元素的数字间隔。

实例080 通过滑动条设置颜色

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\080

实例说明

在HTML5中，range类型的input元素可以实现滑动条的效果。本实例将通过range类型的input元素实现的滑动条来设置颜色。其在Opera浏览器中的运行结果如图4.13所示。当拖动3个滑动条时可以设置不同的颜色，并且在右侧区域可以预览生成的颜色，如图4.14所示。

图4.13 页面运行初始效果

图4.14 通过滑动条设置颜色

技术要点

本实例主要应用range类型的input元素。range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性与max属性，可以设定最小值与最大值（默认为0与100）；它还具有step属性，可以指定每次拖动的步幅。在Opera浏览器中，用滑动条的方式进行值的指定。range类型支持的属性和number类型所支持的属性相同。

实现过程

（1）创建index.html文件，在文件中创建表单以及3个range类型的input元素，分别用于设置颜色中的“红色”、“绿色”和“蓝色”；然后创建一个<span>元素，用于预览生成的颜色；再创建一个<p>元素，用于显示对应的颜色值(rgb)。代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>通过滑动条设置颜色</title>

</script>

</head>

<body>

<formid="myform">

<legend>请选择颜色值：</legend>

</span>

</fieldset>

</form>

</body>

</html>

（2）创建js.js文件，在文件中定义函数setColor()，该函数可以根据获取的滑动条的值动态地改变生成的颜色。代码如下：

function$$(id){

return document.getElementById(id);

}

//定义变量

var intR,intG,intB,strColor;

//根据获取的滑动条的值，设置生成颜色的函数

functionsetColor(){

intR=$$("txtR").value;

intG=$$("txtG").value;

intB=$$("txtB").value;

strColor="rgb("+intR+","+intG+","+intB+")";

$$("showColor").innerHTML=strColor;

$$("spnPrev").style.backgroundColor=strColor;

}

//初始化预览生成的颜色

setColor();

（3）创建css.css样式文件，代码如下：

@charset"utf-8";

/* CSS Document */

body{

font-size:12px

}

fieldset{

padding:10px;

width:280px;

float:left

}

#spnColor{

width:150px;

float:left

}

#spnPrev{

width:100px;

height:70px;

border:solid 1px #ccc;

float:right

}

#showColor{

font-weight:bold;

clear:both;

text-align:center

}

clear:both;

padding:0px;

margin:8px;

}

举一反三

根据本实例，读者可以进行以下操作。

通过滑动条改变数值。

实例081 自动弹出日期和时间输入框

本实例可以提高计算机安全性

实例位置：光盘\mingrisoft\04\081

实例说明

本实例将通过使用datetime类型的input元素自动弹出日期和时间输入框，其在Opera浏览器中的运行结果如图4.15所示。

图4.15 自动弹出日期和时间输入框

技术要点

datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。datetime类型的input元素的语法如下：

实现过程

创建 index.html 文件，在文件中创建表单以及表单元素，并设置文本框的 type属性值为datetime。具体代码如下：

<html>

<head>

<title>自动弹出日期和时间输入框</title>

<styletype="text/css">

<!-

.style1 {font-size: 13px}

.style2 {font-size: 12px;

color:#FF0000;

}

.style3 {font-size: 12px}

-->

</style>

</head>

<body>

<tablewidth="384"border="1"cellpadding="0"cellspacing="0">

<formname="form1" method="post"action="">

<td height="24" colspan="2" class="style1">自动弹出日期和时间输入框</td>

</tr>

<tr>

<td width="119" height="20" align="center" class="style1">请选择时间：</td>

</tr>

<tr>

</td>

</tr>

</form>

</table>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

通过date类型的input元素自动弹出日期输入框。

通过month类型的input元素自动弹出月份输入框。

实例082 显示文本框中的搜索关键字

本实例可以提高计算机安全性

实例位置：光盘\mingrisoft\04\082

实例说明

本实例利用表单中新增的表单元素——search输入类型的input元素将要搜索的内容填入文本框中，并通过提交将内容输出到浏览器。其运行结果如图4.16所示。

图4.16 search 搜索类型的input元素

技术要点

本实例主要应用表单中新增的 search类型的 input元素，它是一种专门用来输入搜索关键词的文本框。在本实例中应用的关键代码如下：

实现过程

（1）创建index.html文件，在页面中定义一个用于输入关键字的search输入类型文本框和一个提交按钮，然后载入CSS文件和JavaScript文件，当输入搜索内容并单击提交按钮后，使搜索内容输出到浏览器中。代码如下：

<html>

<head>

<title>search搜索类型的input元素</title>

</script>

</head>

<body>

<formid="frmTmp"onSubmit="return ShowKeyWord();">

<legend>请输入搜索关键字：</legend>

<input id="txtKeyWord" type="search"

class="inputtxt">

<input name="frmSubmit" type="submit"

class="inputbtn"value="提交">

</fieldset>

</form>

</body>

</html>

（2）创建js1.js文件，存放于js目录下，具体代码如下：

//JavaScript Document

function$$(id){

return document.getElementById(id);

}

//将获取的内容显示在页面中

functionShowKeyWord(){

var strTmp="<b>您输入的查询关键字是：</b>";

strTmp=strTmp+$$('txtKeyWord').value;

$$('pTip').innerHTML=strTmp;

return false;

}

（3）创建css1.css文件，存放于Css目录下，具体代码如下：

@charset"utf-8";

/* CSS Document */

body{

font-size:12px

}

.inputbtn {

border:solid 1px #ccc;

background-color:#eee;

line-height:18px;

font-size:12px

}

.inputtxt {

border:solid 1px #ccc;

padding:3px;

line-height:18px;

font-size:12px;

width:160px

}

fieldset{

padding:10px;

width:280px;

float:left

}

/*实例4增加样式*/

#spnColor{

width:150px;

float:left

}

#spnPrev{

width:100px;

height:70px;

border:solid 1px #ccc;

float:right

}

#pColor{

font-weight:bold;

clear:both;

text-align:center

}

/*实例6增加样式*/

clear:both;

padding:0px;

margin:8px;

}

/*实例10增加样式*/

.p_center{

text-align:center

}

/*实例11增加样式*/

.p_color{

color:#666

}

举一反三

根据本实例，读者可以进行以下操作。

通过search类型的input元素实现站点搜索。

实例083 使元素自动获取焦点

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\083

实例说明

本实例将通过元素的autofocus属性使元素自动获取焦点。在Opera浏览器中运行本实例，可以看到当页面载入完成或单击“提交”按钮后，“姓名”文本框会自动获取焦点，效果如图4.17所示。

图4.17 自动获取焦点

技术要点

本实例主要是通过input元素的autofocus属性实现的。在input元素中，如果将autofocus属性值设置为true或直接输入属性名称，那么当页面载入完成时，对应的元素将自动获取焦点。autofocus属性的使用方法如下：

实现过程

（1）创建index.html文件，在文件中创建表单，在表单中定义两个文本框，一个用于输入姓名，一个用于输入密码，为“姓名”文本框设置autofocus属性。代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>使用autofocus属性</title>

</head>

<body>

<formid="myform">

<legend>autofocus属性</legend>

</p>

</fieldset>

</form>

</body>

</html>

（2）创建css.css样式文件，具体代码如下：

@charset"utf-8";

/* CSS Document */

body{

font-size:12px

}

.inputbtn {

border:solid 1px #ccc;

background-color:#eee;

line-height:18px;

font-size:12px

}

.inputtxt {

border:solid 1px #ccc;

padding:3px;

line-height:18px;

font-size:12px;

width:160px

}

fieldset{

padding:10px;

width:280px;

float:left

}

clear:both;

padding:0px;

margin:8px;

}

.p_center{

text-align:center

}

举一反三

根据本实例，读者可以进行以下操作。

在注册表单中使input元素自动获取焦点。

使文本域自动获取焦点。

实例084 验证表单中输入的数据是否合法

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\084

实例说明

在HTML5中，通过对元素使用属性的方法，可以实现在表单提交时执行自动验证的功能。本实例将实现验证表单中输入的数据是否合法，其在Opera浏览器中的运行结果如图4.18所示。

图4.18 验证表单中输入的数据是否合法

技术要点

本实例主要应用input元素的pattern属性。pattern属性主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。其语法如下：

参数regexp规定用于验证输入内容的正则表达式。

在本实例中要求输入的内容格式为一个数字和一个大写字母，因此定义的正则表达式为[0-9][A-Z]。

实现过程

创建index.html文件，在文件中创建表单以及表单元素，并设置文本框的pattern属性值为[0-9][A-Z]。具体代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>验证表单中输入的数据是否合法</title>

<styletype="text/css">

<!-

.style1 {font-size: 14px;}

.style2 {font-size: 12px;}

.style3 {font-size: 12px;}

-->

</style>

</head>

<body>

<tablewidth="339"border="1"cellpadding="0"cellspacing="0">

<formname="form1" method="post"action="">

<td height="34" colspan="2" class="style1">请输入一个数字和一个大写字母</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</form>

</table>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

通过pattern属性验证输入的IP地址是否有效。

通过pattern属性验证输入的电话号码是否有效。

实例085 在文本框中显示提示信息

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\085

实例说明

当用户还没有输入值的时候，输入型控件可以通过placeholder属性向用户显示描述性说明或者提示信息。本实例就来实现在文本框中显示提示信息。在Firefox4等支持placeholder特性的浏览器中运行本实例，提示信息会以浅灰色的样式显示在输入框中，如图4.19所示。当页面焦点切换到输入框中，或者输入框中有值了以后，该提示信息就会消失，如图4.20所示。

图4.19 文本框中的输入提示信息

图4.20 提示信息自动消失

技术要点

本实例主要使用输入框的placeholder属性显示提示信息。使用该属性只需要将说明性文字作为该属性值即可。除了普遍的文本输入框外，email、number 等其他类型的输入框也都支持placeholder特性。placeholder属性的语法如下：

实现过程

创建index.html文件，在文件中创建表单和一个文本框，并设置文本框的placeholder属性值为提示信息“请输入内容”，代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>在文本框中显示提示信息</title>

</head>

<body>

<formid="form1" name="form1" method="post" action="">

请输入用户名：

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在文本域中显示提示信息。

在url类型的输入框中显示提示信息。

实例086 验证文本框中的内容是否为空

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\086

实例说明

验证表单中输入的内容是否为空通常都是应用JavaScript 脚本实现的。而在本实例中，将通过HTML5中的新增属性required来实现验证文本框中的内容是否为空，其在Opera浏览器中的运行结果如图4.21所示。

图4.21 验证文本框中的内容是否为空

技术要点

本实例主要应用input元素的required属性。required属性主要目的是确保表单控件中的值已填写。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素中必须输入内容。语法如下：

实现过程

创建index.html文件，在文件中创建表单以及表单元素，并设置文本框的required属性值为required，代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>验证文本框中的内容是否为空</title>

</head>

<body>

<formid="form1" name="form1" method="post" action="">

用户名：<input type="text" name="user" required="required"/>

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

验证文本域中的内容是否为空。

验证单选按钮是否被选中。

实例087 开启表单的自动完成功能

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\087

实例说明

HTML的表单和输入文本框有自动完成的功能，当向输入文本框输入内容的时候，浏览器会从以前的同名输入框的历史记录中查找出相似的内容并列在输入框下面，这样就不用全部输入，直接选择列表中的项目就可以了。本实例将介绍如何开启表单的自动完成功能，在Chrome 浏览器中运行本实例，在文本框中分别输入“mr”和“mrsoft”并进行提交，然后在文本框中输入“m”时，可以看到之前输入的内容并列显示在文本框下面，如图4.22所示。

图4.22 开启表单的自动完成功能

技术要点

本实例使用<form>标签的 autocomplete属性来开启表单的自动完成功能。autocomplete属性的语法格式如下：

<formautocomplete="on|off">

属性值说明如下：

● on：默认值，规定启用自动完成功能。

● off：规定禁用自动完成功能。

实现过程

创建 index.html文件，在文件中创建表单、一个“用户名”文本框和一个“提交”按钮，并设置表单的autocomplete属性值为on，代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>开启表单的自动完成功能</title>

<body>

<h3>开启表单的自动完成功能</h3>

<formaction="" method="get" autocomplete="on">

用户名：<input type="text" name="name"/><br/>

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

开启文本框的自动完成功能。

在登录表单中开启表单的自动完成功能，并关闭“电子邮箱”文本框的自动完成功能。

实例088 重写表单中的某些属性

本实例可以方便操作、提高效率

实例位置：光盘\mingrisoft\04\088

实例说明

本实例将实现重写表单中某些属性的功能。在Chrome浏览器中运行实例，结果如图4.23所示。在文本框中输入“mr”，然后单击“提交”按钮，可以看到数据被提交到 action.html 页面，并且该页面是在新窗口打开的，如图4.24所示。

图4.23 实例运行结果

图4.24 在新窗口打开action.html 页面

技术要点

本实例应用表单重写属性（form override attributes）。表单重写属性允许用户重写 form元素的某些属性设定。表单重写属性及其说明如表4.6所示。

表4.6 表单重写属性及其说明

表单重写属性适用于submit和image类型的<input>标签。

实现过程

创建index.html文件，在文件中创建表单以及表单元素，并设置“提交”按钮的formaction属性值为action.html，以及formtarget属性值为_blank，代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>重写表单中的某些属性</title>

</head>

<body>

<formaction="index.html" method="get">

请输入用户名:<input type="text" name="name"/>

</form>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

通过formmethod重写表单的method属性。

通过formenctype重写表单的enctype属性。

实例089 验证表单中的数据是否为网址格式

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\089

实例说明

在动态网站的用户注册页面中，为了保证用户输入网址的有效性，需要验证用户输入的网址是否合法。在Opera浏览器中运行本实例，在“个人空间”文本框中输入“http://www”后，单击“提交”按钮，将弹出如图4.25所示的提示信息。

图4.25 验证输入数据是否为网址格式

技术要点

本实例主要应用input元素的pattern属性和验证网址格式的正则表达式共同完成表单中输入数据的验证。关于pattern属性的介绍请参考实例084，这里不再赘述。

验证网址格式的正则表达式如下：

http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?

实现过程

创建index.html文件，在文件中创建表单以及表单元素，完成用户注册页面的设计。在“个人空间”文本框中设置pattern属性值为“http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?”，代码如下：

<html>

<head>

<styletype="text/css">

<!-

.style1 {font-size: 13px}

.style2{

font-size: 12px;

color:#FF0000;

}

.style3 {font-size: 12px}

-->

</style>

</head>

<body>

<tablewidth="450"border="1"cellpadding="0"cellspacing="0"background="images/sss.JPG">

<formname="form1" method="post"action=""><tr align="center">

</tr>

<tr>

<span class="style2">用户名长度限制为0-30字节</span></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

女

男</span></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td height="20" align="center" class="style1">身份证号码:</td>

</tr>

<tr>

<tdclass="style3"><input name="www"type="text"id="www"pattern="http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?">

<span class="style2">*请输入正确的个人空间地址</span></td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

<span class="style2">　　(*为必填项目)</span>　　<input type="reset" name="Submit2"value="重置">

</td>

</tr>

</form>

</table>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

验证邮政编码格式是否正确。

验证输入的数据是否为数值型。

实例090 自动设置表单中传递的数字

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\090

实例说明

本实例将通过number类型的input元素自动设置表单中传递的数字。在Opera浏览器中运行本实例，可以使用小箭头自动输入从0开始逐步递增3的数字，如图4.26所示。如果输入的数字不符合要求，单击“提交”按钮，将弹出对应的提示信息，如图4.27所示。

图4.26 使用小箭头变换数字

图4.27 弹出对应的提示信息

技术要点

本实例主要应用number类型的input元素。关于number类型的input元素的介绍请参考实例079，这里不再赘述。

实现过程

（1）创建index.html文件，在文件中创建表单，在表单中创建一个number类型的文本框和一个“提交”按钮，关键代码如下：

<!DOCTYPEhtml>

<html>

<head>

</head>

<body>

<formaction=""method="get">

请输入数字:<inputtype="number" name="points" min="0" max="10" step="3"/>

</form>

</body>

</html>

（2）创建css.css文件，代码如下：

@charset"utf-8";

/* CSS Document */

body{

font-size:12px

}

form{

margin-left:20px;

}

举一反三

根据本实例，读者可以进行以下操作。

设置以10递增的number类型的input元素。

设定number类型的input元素的初始值。

实例091 在表单中选择多个上传文件

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\091

实例说明

在HTML5中新增了许多与表单相关的属性。本实例将通过新增的multiple属性在表单中选择多个上传文件。在Opera浏览器中运行本实例，当单击“添加文件”按钮后弹出文件选择对话框，在此可选择多个上传文件，如图4.28所示。

图4.28 选择多个上传文件

技术要点

本实例主要应用HTML5中新增的multiple属性。multiple属性规定输入域中可选择多个值。multiple属性适用于以下类型的<input>标签：email和file。

multiple属性的使用方法如下：

实现过程

（1）创建index.html文件，在文件中创建表单、文件域和一个“提交”按钮，并设置文件域的multiple属性，关键代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>选择多个上传文件</title>

</head>

<body>

<formaction=""method="get">

请选择上传文件:<inputtype="file"name="file" multiple="multiple"/>

</form>

<p>您可以选择多个文件。</p>

</body>

</html>

（2）创建css.css文件，代码如下：

@charset"utf-8";

/* CSS Document */

body{

font-size:12px

}

clear:both;

padding:0px;

margin:8px;

}

举一反三

根据本实例，读者可以进行以下操作。

在email类型的input元素中输入多个E-mail地址。

在表单中选择上传多个图片。

实例092 实现播放器样式的按钮

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\092

实例说明

常用播放器的播放按钮的样式都是相似的。本实例将通过HTML5+CSS技术实现播放器中的按钮样式。运行实例，结果如图4.29所示。

图4.29 实现播放器中的按钮样式

技术要点

本实例主要应用CSS来实现播放器中的按钮样式。CSS代码如下：

<styletype="text/css">

body{

background:#000;

}

header{

font-family:"MicroSoftYaHei";

font-size:30px;

color:#ffffff;

}

.circle{

width:120px;

height:120px;

-webkit-border-radius:60px;

-moz-border-radius:60px;

border-radius:60px;

border:2px #FFF solid;

float:left;

margin:10px;

cursor:pointer;

}

.circle:hover,.circle1:hover{

-webkit-box-shadow:rgba(255,255,255,0.6) 0 015px;

-moz-box-shadow:rgba(255,255,255,0.6) 0 015px;

box-shadow:rgba(255,255,255,0.6) 00 15px;

}

.circle1{

width:140px;

height:140px;

-webkit-border-radius:70px;

-moz-border-radius:70px;

border-radius:70px;

border:2px #FFF solid;

float:left;

cursor:pointer;

}

.right{

width: 0;

height:0;

border-left: 60px solid #FFF;

border-top: 30pxsolid transparent;

border-bottom: 30px solid transparent;

-webkit-transform:scale(0.6,1.2);

-moz-transform:scale(0.6,1.2);

transform:scale(0.6,1.2);

}

.next1{

margin:30px-10px0 20px;

float:left;

}

.next2{

margin:30px 0 0-20px;

float:left;

}

.left{

width: 0;

height:0;

border-Right: 60pxsolid #FFF;

border-top: 30pxsolid transparent;

border-bottom: 30px solid transparent;

-webkit-transform:scale(0.6,1.2);

-moz-transform:scale(0.6,1.2);

transform:scale(0.6,1.2);

}

.pre1{

margin:30px-10px0 10px;

float:left;

}

.pre2{

margin:30px 0 0-20px;

float:left;

}

.pause{

width:20px;

height:80px;

background:#FFF;

float:left;

}

.pause1{

margin:30px 10px0 40px;

}

.pause2{

margin:30px 10px0 10px;

}

</style>

实现过程

（1）创建index.html文件，在文件中定义3个<div>标签，分别作为播放器的3个按钮，在每个<div>标签中再创建两个<div>标签，并为这些<div>标签设置对应的class属性值。代码如下：

<header>播放器按钮</header>

</div>

</div>

</div>

</section>

（2）在页面中编写实现播放器按钮样式的代码。具体代码如“技术要点”中所示。

举一反三

根据本实例，读者可以进行以下操作。

实现播放器“停止”按钮的样式。

实现遥控器样式的按钮。

实例093 一个简单的乘法计算器

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\093

实例说明

本实例实现一个简单的乘法计算器的功能。在Opera浏览器中运行本实例，在两个文本框中输入数字后可以显示计算结果。当改变两个文本框中任意一个数值时，显示的计算结果也随之变化，如图4.30所示。

图4.30 计算两个数字的相乘

技术要点

本实例主要应用HTML5中的表单新增元素output元素。应用output元素可以显示出一些计算的结果或者脚本的输出。该元素可以在页面中显示各种不同类型表单元素的内容，如文本框的值和JavaScript脚本执行后的结果值等。为了获取值，需要设置output元素的onFormInput事件。在文本框中输入内容时触发该事件，从而得到想要的结果。

实现过程

（1）创建index.html文件，在文件中创建表单，在表单中创建两个文本框，分别用于输入两个数字。然后创建一个<output>元素，用于显示两个文本框中的数字相乘后的结果。关键代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>两个数字的相乘</title>

</head>

<body>

<formid="myform">

<legend>两个数字相乘的结果</legend>

<input id="num1" type="text" class="inputtxt"/>*

<input id="num2" type="text" class="inputtxt"/>=

</output>

</fieldset>

</form>

</body>

</html>

（2）创建css.css文件，代码如下：

@charset"utf-8";

/* CSS Document */

body{

font-size:12px

}

.inputtxt {

border:solid 1px #ccc;

padding:3px;

line-height:18px;

font-size:12px;

width:160px

}

fieldset{

padding:10px;

width:280px;

float:left

}

举一反三

根据本实例，读者可以进行以下操作。

实现多个数字的混合运算。

通过JavaScript脚本函数绑定onFormInput事件，实现数字的运算。

实例094 在网页中生成一个密钥

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\094

实例说明

在HTML5中，使用keygen元素可以提供一种验证用户的可靠方法。本实例将通过keygen元素在网页中生成一个密钥。在Chrome浏览器中运行本实例，结果如图4.31所示。可以看到，keygen元素在表单中以列表的形式显示提供的密钥位数的选择。

图4.31 在网页中生成密钥

技术要点

本实例主要应用HTML5中新增的keygen元素，该元素用于生成页面的密钥。一般情况下， 如果在表单中创建该元素，在表单提交时该元素将生成一对密钥，一个保存在客户端，称为私密钥；另一个发送到服务器，由服务器进行保存，称为公密钥，公密钥可以用于客户端证书的验证。

实现过程

（1）创建index.html文件，在文件中创建表单，在表单中创建一个keygen元素，并设置其name属性值为key。关键代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>keygen元素的使用</title>

</head>

<body>

<formid="myform">

<legend>请选择你的密钥位数</legend>

</fieldset>

</form>

</body>

</html>

（2）创建css.css文件，代码如下：

@charset"utf-8";

/* CSS Document */

body{

font-size:12px

}

.inputbtn {

border:solid 1px #ccc;

background-color:#eee;

line-height:18px;

font-size:12px

}

.inputtxt {

border:solid 1px #ccc;

padding:3px;

line-height:18px;

font-size:12px;

width:160px

}

fieldset{

padding:10px;

width:280px;

float:left

}

举一反三

根据本实例，读者可以进行以下操作。

在注册页面中应用keygen元素生成密钥。

实例095 验证输入的密码是否合法

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\095

实例说明

在创建动态网站的会员注册模块中，对用户输入的用户名和密码的位数进行限制，这样可以规范用户的注册信息，有助于管理员对用户信息的管理。本实例向用户展示了如何限制密码的位数及密码可以由哪些字符组成。本实例要求密码由6～20位的字母、数字、下划线和点“.”组成，但必须是字母开头。在Opera浏览器中运行本实例，在“密码”文本框中输入不合法的密码后，单击“提交”按钮，将弹出图4.32所示的提示信息。

图4.32 验证输入的密码是否合法

技术要点

本实例主要应用input元素的pattern属性和正则表达式来验证用户输入的密码是否合法。关于pattern属性的介绍请参考实例084，这里不再赘述。

验证本实例中密码格式的正则表达式如下：

^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,19}$

实现过程

创建index.html文件，在文件中完成表单以及表单元素的设计，并设置密码域的pattern属性值为“^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,19}$”，完整代码如下：

<html>

<head>

<title>验证输入的密码是否合法</title>

<styletype="text/css">

<!-

.style1 {font-size: 13px}

.style2 {font-size: 12px;

color:#FF0000;

}

.style3 {font-size: 12px}

-->

</style>

</head>

<body>

<tablewidth="575"border="1"cellpadding="0"cellspacing="0">

<formname="form1" method="post"action="">

<td height="24" colspan="2" class="style1">验证密码是否合法</td>

</tr>

<tr>

<span class="style2">*

密码由6-20位的字母、数字、下划线和点“.”组成，必须字母开头</span></td>

</tr>

<tr>

<span class="style2">(*为必填项目)</span>

</td>

</tr>

</form>

</table>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

验证输入的用户名是否合法。

验证输入的文本是否为汉字。

实例096 验证两次输入的密码是否一致

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\096

实例说明

在网站注册过程中，通常都需要用户输入两次密码，如果两次输入的密码不一致将会给出提示信息。本实例将使用JavaScript调用各input元素的setCustomValidity方法来自定义密码不一致的错误信息。本实例在Opera浏览器中的运行结果如图4.33所示。

图4.33 两次输入的密码不一致

技术要点

本实例主要使用JavaScript脚本调用input元素的setCustomValidity方法来自定义密码不一致的错误信息。其关键代码如下：

function check(){

var pass1=document.getElementById("pass1");

var pass2=document.getElementById("pass2");

if(pass1.value!=pass2.value)

pass2.setCustomValidity("密码不一致。");

else

pass2.setCustomValidity("");

}

</script>

实现过程

（1）创建index.html文件，在文件中创建表单、两个密码域以及“提交”按钮，当单击“提交”按钮时将触发onsubmit事件并执行JavaScript函数check()。代码如下：

<formid="testform" onsubmit="returncheck();">

密码：<input type="password" name="pass1" id="pass1"/><br/>

确认密码：<input type="password" name="pass2" id="pass2"/><br/>

</form>

（2）编写JavaScript脚本，定义check()函数，判断两次输入的密码是否一致，代码如下：

function check(){

var pass1=document.getElementById("pass1");

var pass2=document.getElementById("pass2");

if(pass1.value!=pass2.value)

pass2.setCustomValidity("密码不一致。");

else

pass2.setCustomValidity("");

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

验证用户注册信息是否正确。

验证用户输入的验证码是否正确。

实例097 取消表单验证

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\097

实例说明

如果想要提交表单，但是不想让浏览器验证它，该怎么做呢？在本实例中将创建一个用户登录表单，利用form元素的novalidate属性关闭整个表单验证。其在Chrome浏览器中的运行结果如图4.34所示。

图4.34 取消表单验证

技术要点

本实例主要应用form元素的novalidate属性，把该属性值设为true，即可关闭表单验证，把该属性值设为false，即可以打开表单验证，本实例中关闭表单验证的关键代码如下：

<formid="frmTmp"novalidate></form>

实现过程

首先在页面中创建登录表单，表单中包括“姓名”、“密码”文本框以及“登录”和“取消”按钮；然后在“姓名”和“密码”文本框中通过pattern属性对输入的姓名和密码进行验证，同时设置文本框的required属性验证输入内容是否为空；最后在form元素中设置novalidate属性关闭整个表单验证。关键代码如下：

<body>

<formid="frmTmp"novalidate>

<p>姓名:

<input name="UserName" id="UserName" type="text" class="inputtxt"pattern="^[a-zA-Z]\w{3,5}$"required/>*

</p>

<p>密码:

<input name="PassWord" id="PassWord" type="password"class="inputtxt"pattern="^[a-zA-Z]\w{3,5}$" required/>*

</p>

</p>

</fieldset>

</form>

</body>

当单击“登录”按钮时可以看到，虽然在文本框中设置了pattern属性和required属性，但由于在form元素中设置了novalidate属性，文本框中的内容并没有经过任何验证就可以提交。

举一反三

根据本实例，读者可以进行以下操作。

利用novalidate属性先关闭表单验证再打开表单验证。

利用input元素的formnovalidate属性让表单验证对单个input元素失效。

实例098 实现一个精美的登录表单界面

这是一个可以提高基础技能的实例

实例位置：光盘\mingrisoft\04\098

实例说明

表单的用途很多，它是用户和网站之间进行交互的主要途径，在现实网站应用中也比较常见。本实例将通过HTML5+CSS技术实现一个精美的登录表单界面。运行实例，结果如图4.35所示。

图4.35 登录表单界面

技术要点

本实例主要应用CSS来实现登录表单的样式。CSS代码如下：

html {

background-color: #CCCCCC;

}

.box {

margin:140px auto;

width: 884px;

}

.loginBox {

background-color: #FEFEFE;

border: 1px solid #BfD6E1;

border-radius:5px;

font: 14px 'MicrosoftYaHei','微软雅黑';

margin:0auto;

width: 388px

}

.loginBox .loginBoxCenter {

border-bottom: 1pxsolid #DDE0E8;

padding: 24px;

}

.loginBox .loginBoxCenter p {

margin-bottom: 10px

}

.loginBox .loginBoxButtons {

background-color: #F0F4F6;

border-top: 1pxsolid #FFF;

border-bottom-left-radius:5px;

border-bottom-right-radius: 5px;

line-height: 28px;

overflow: hidden;

padding: 20px24px;

vertical-align: center;

}

.loginBox .loginInput {

border: 1px solid #D2D9dC;

border-radius:2px;

color:#444;

font: 12px 'MicrosoftYaHei','微软雅黑';

padding: 8px 14px;

margin-bottom: 8px;

width: 310px;

}

.loginBox .loginInput:focus {

border: 1px solid #B7D4EA;

box-shadow:0 0 8px #B7D4EA;

}

.loginBox .loginBtn{

background-image:-moz-linear-gradient(tobottom,#B5DEF2,#85CFEE);

border: 1px solid #98CCE7;

border-radius:20px;

box-shadow:insetrgba(255,255,255,0.6)0 1px 1px,rgba(0,0,0,0.1) 01px 1px;

color:#666666;

cursor: pointer;

float: right;

font: bold13pxArial;

padding: 5px 14px;

}

.loginBox .loginBtn:hover {

background-image:-moz-linear-gradient(to top,#B5DEF2,#85CFEE);

}

.loginBox a.forgetpwd {

color:#999999;

cursor: pointer;

float: right;

font: 11px/20pxArial;

text-decoration: none;

vertical-align: middle;

}

.loginBox a.forgetpwd:hover {

text-decoration: underline;

}

.loginBox input#remember {

vertical-align: middle;

}

.loginBox label[for="remember"]{

font: 11pxArial;

}

实现过程

（1）创建index.html文件，在文件中创建登录表单，应用<div>标签对表单元素进行布局，并为这些<div>标签设置对应的class属性值。代码如下：

<formaction=""method="post">

</div>

<label for="remember">记住登录状态</label>

</div>

</form>

</div>

（2）在页面中编写实现登录表单样式的代码。具体代码如“技术要点”中所示。

举一反三

根据本实例，读者可以进行以下操作。

设计一个精美的用户注册表单界面。

实现一个精美的用户留言板表单界面。

本周热推：

智能手机故障检测与维修从入门到精通 JavaScript DOM编程艺术(第2版)精通MATLAB（第3版）Python数据可视化之美：专业图表绘制指南（全彩）算法超简单：趣味游戏带你轻松入门与实践