HTML+CSS网页设计实践教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.3 新增的表单类型

HTML 5兼容HTML 4的大部分内容，同时也对HTML 4中的内容进行了改进。在HTML 5中，HTML 5的表单定义了一些新的表单类型，这些表单类型在一定程度上方便了程序员的开发。

3.3.1 email类型

验证用户在文本框中输入的内容是否是邮箱有多种方法，例如，可以通过JavaScript脚本进行判断，也可以通过JQuery进行判断。HTML 5中新增加了email类型，该类型是input元素专门用来输入E-mail地址（例如，QQ邮箱、网易邮箱）的文本框。基本语法如下：

    <input type="email" name="email"></input>

直接将input元素的type类型指定为email，该类型会自动要求输入的地址格式正确，否则浏览器不允许提交，并且会有一个错误信息提示。

【练习6】

用户在一些招聘网站上注册时都会要求填写正确的邮箱地址，这样可以方便企业向邮箱中投递信息，下面将输入邮箱地址的文本框的type类型指定为email。代码如下。

    <input name="user_mail" type="email" id="user_mail" style="background-color:#EBF8FF;
    border-color:#ABDAFE; border-width:1px; border-style:solid;height:21px; width:214px;">

目前，并不是所有的浏览器全部都兼容email类型，不同的浏览器内核，可能导致所显示的效果不太一样。如图3-6所示为在Maxthon浏览器中的效果，如图3-7所示为在Opera浏览器中的效果。

图3-6 Maxthon浏览器显示效果

图3-7 浏览器显示效果

注意

email类型可以检测用户输入的E-mail地址是否合法，但是它的有效性并不会判断输入框的内容是否为空，而是针对非空的内容进行格式检测。简单来说，如果要检测输入框中输入的地址是否合法，必须确保输入框的内容不为空。

email类型的文本框具有一个multiple属性，该属性允许在文本框中输入使用逗号分隔的有效的E-mail地址的一个列表。例如，重新更改练习6中的代码，为email类型的input元素添加multiple属性，将此属性的值指定为true。代码如下。

    <input name="user_mail" type="email" multiple="true" id="user_mail" style="background-color:#EBF8FF; border-color:#ABDAFE;   border-width:1px; border-style:solid;height:21px; width:214px;">

重新在浏览器中运行查看效果，在Chrome浏览器中的效果如图3-8所示，在Firefox浏览器中的效果如图3-9所示。

图3-8 Chrome浏览器运行效果

图3-9 Firefox浏览器运行效果

提示

用户可以手动使用逗号分隔邮箱地址列表，但是，通常情况下，浏览器可能使用复选框从用户邮件客户端或者手机通讯录中很好地取出用户的联络人列表。

3.3.2 url类型

url类型的input元素是一种专门用来输入url地址的输入框，例如百度地址和谷歌地址等。如果某个浏览器不支持该类型，则浏览器会自动将其识别为普通输入框。与email类型一样，url类型的检测并不会判断输入框是否为空。因此，如果要检测url地址是否正确，必须确保输入框中的内容不为空。

【练习7】

经常用微博的用户可以知道，更改用户资料或发表博客时通常会需要用户的个人博客地址。例如，在腾讯微博的用户个人资料页面输入用户个人主页。相关代码如下。

    <input id="homepage" name="homepage" type="url" class="inputTxt en">

运行页面并在不同的浏览器中查看效果，在Maxthon或Chrome浏览器中必须输入完整的URL地址，它会自动忽略前面的空格。如Maxthon浏览器中输入地址不完整时的效果如图3-10所示。Opera浏览器不需要输入完整的路径，它会自动在开始处添加“http://”，但是对空格非常敏感。如果URL地址文本框中存在空格，则会提示错误，如图3-11所示。

图3-10 Maxthon浏览器运行效果

图3-11 Opera浏览器效果

3.3.3 number类型

number类型的input元素是一种专门用来输入数字的文本框，在表单提交时会检查其中的内容是否为数字。如果浏览器不支持该类型时，会自动显示为一个文本框，number类型和一些常用的属性结合使用，如表3-4所示。

表3-4 number类型的常用属性

【练习8】

本次练习主要演示用户的当前年龄显示，将用户输入的文本框的类型设置为number，然后设置最大值和最小值等属性。代码如下。

    <input id="age" name="age" type="number" class="inputTxt en" max="120" min="15" value="23">

运行网页查看在不同浏览器中的效果，如果输入的内容不是数字，显示错误提交，在Chrome浏览器中的效果如图3-12所示。如果输入的内容不在某个范围内也会显示错误，在Opera浏览器中的效果如图3-13所示。

图3-12 输入的内容不是数字时的提示

图3-13 输入的内容超出范围

3.3.4 range类型

range类型的input元素是一种只允许输入一段范围内数值的文本框，它与number类型类似，都具有max、min、step和value属性。但number类型和range类型的显示方式有所不同：该类型在页面的输入框为微调格式显示，而range类型以滑动条的形式展示数字，通过拖动滑块实现数字的改变。

【练习9】

本次练习向页面显示一个滑动条，然后通过拖动滑动条更改其值，达到设置元素的透明度，实现步骤如下。

（1）在页面中通过滑动条控制透明度，且为input元素添加onClick事件属性。代码如下。

    <input type="range" value="1" max="1" min="0" step="0.1" onClick="Change Opacity(this.value)" />

（2）当用户单击更改滑动条的值时会触发Click事件调用JavaScript脚本中的ChangeOpacity()函数，该函数中的代码用于更改指定元素的透明度。代码如下。

    function ChangeOpacity(val){
        document.getElementById("firstContent").style.opacity = val;
    }

（3）在浏览器中拖动滑动条查看效果，如图3-14所示。

图3-14 range类型的显示效果

3.3.5 tel类型

tel类型的input元素是一种用来输入电话号码的专用文本框。它没有特殊的校验规则，甚至不强调只输入数字，因为很多电话号码常常含有数字以外的字符，如410-331245**。

tel类型的文本框通常用来验证固定电话和手机号码，如果只将input元素的类型设置为tel类型，并不会达到验证电话的效果，它必须和pattern属性（3.4.5节详细介绍）一块使用。

【练习10】

本次练习将tel类型和pattern属性结合使用，验证用户输入的固定电话是否是“010-12345678”或“0371-1234567”的格式。在页面中添加相关代码，如下所示。

    <input id="oldtel" name="oldtel" type="tel" class="inputTxt en" pattern="^\d{3}-\d{8}|\d{4}-\d{7}$">

运行网页查看效果，如图3-15和图3-16所示分别为在Chrome浏览器和Opera浏览器中的验证效果。

图3-15 Chrome浏览器运行效果

图3-16 Opera浏览器运行效果

3.3.6 color类型

将input元素设置为color类型就是用来选取颜色的，它提供了一个颜色选取器用来选取。如果浏览器不支持color类型，则会自动显示为普通的文本框。

【练习11】

用户通过color类型选择的颜色值将保存到它的value属性中，本次练习就简单演示了该类型的使用。用户通过选中的值，更改指定内容的背景颜色，实现的具体步骤如下所示。

（1）添加新页面并且进行设计，在页面的合适位置添加用于加载显示颜色的color类型的input元素和执行更改颜色的button类型的input元素，并且为按钮添加onClick事件属性。代码如下。

    <input type="color" name="chgcolor" id="chgcolor" width="200px;" />
    <input type="button" onClick="ChangeColor()" value=" Change "/>

（2）用户单击页面中的按钮时调用ChangeColor()函数更改背景颜色，在该函数中首先获取用户设置的颜色的值，然后再进行更改。代码如下。

    function ChangeColor(){
        var colorval = document.getElementById("chgcolor").value; //获取设置的颜色
        document.getElementById("firstContent").style.backgroundColor = colorval; //设置背景色
    }

（3）运行页面单击颜色按钮进行测试，如果是Maxthon浏览器，直接单击颜色选项框弹出【颜色】对话框。用户可以根据系统提供的颜色进行选择，也可以自定义颜色样式，然后单击对话框中的【添加到自定义颜色】按钮将设置好的颜色添加到自定义颜色列表中，如图3-17所示。Opera浏览器中首先显示一些系统列表，然后单击【其他】按钮弹出【颜色】对话框，如图3-18所示。

图3-17 Maxthon浏览器效果

图3-18 Opera浏览器效果

3.3.7 search类型

search类型是一种专门用来输入搜索关键词的文本框，比如站点搜索或Google搜索等。search类型的文本框与普通文本框没有太大的区别，最大的不同在于：在部分浏览器中，会自动把search类型的文本框使用圆角边框，当用户开始输入时，输入框的右边会出现一个用于清除内容的图标，单击这个图标可以快速清除内容。

【练习12】

几乎所有的网站和系统都离不开搜索的功能，本次练习简单使用search类型。首先在创建的静态页面中添加搜索框，并且将其类型设置为search。相关代码如下。

    <input class="search_text" id="query" name="query" style="margin-top:2px; margin-left: 10px;width: 110px;" type="search">

运行页面查看效果，向页面中输入内容进行测试，如图3-19所示。

图3-19 search类型的使用

3.3.8 日期和时间类型

在传统的网页设计中，相关人员只能通过JavaScript或JQuery等其他方法实现日期的选择，它们虽然有封闭好的代码或控件，但是使用起来还是比较麻烦，没有直接显示选择日期的文本框。

HTML 5中新增加了与日期有关的类型，这些类型不用任何脚本就可以实现日期的选择。HTML 5新增的日期类型有6个，它们分别是date、time、datetime、datetime-local、month和week。

1．date类型

date类型是目前比较受欢迎的一种元素，该类型以日历的形式方便用户输入。一般情况下，用户生日、购买日期和订票日期等都可以指定为date类型。

【练习13】

随着社会的发展和生活水平的提高，越来越多的公司开始向海外发展业务，飞机成为这些地方快速转换的交通工具。在本次练习中，通过date类型指定从一个城市到另一个城市所出发的航班信息。代码如下。

    <input type="date" style="ime-mode: disabled;" class="input06" name="dtGoDate" id="txtAirplaneTime1">

不同浏览器所显示的效果可能不同，如图3-20和如图3-21所示分别为在Maxthon浏览器和Chrome浏览器中的效果。

图3-20 Maxthon浏览器运行效果

图3-21 Chrome浏览器运行效果

2．time类型

time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查。

【练习14】

本次练习在练习13的基础上进行扩展，为机票查询的内容添加具体时间。代码如下：

    <input type="time" id="txtAirplaneTime2" name="dtBackDate" class="input06" holder="小时/分钟">

与其他类型一样，支持time类型的浏览器不同，其所显示的外观也会有所不同。显示时可能会显示简单的文本框，只是在提交时检查是否输入有效的时间；也可以以时钟形式出现；还可以显示时区。如图3-22和图3-23所示分别为time类型在Maxthon浏览器和Chrome浏览器中的显示效果。

图3-22 Maxthon浏览器运行效果

图3-23 Chrome浏览器运行效果

3．datetime类型

datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，它不仅可以显示年、月、日，还可以显示具体时间。设置datetime类型完成后，在提交时会对用户输入或选择的日期和时间进行有效性检查。

【练习15】

用户可以查询在某个时期内所有的车辆售票情况，在页面中添加类型是datetime的input元素。代码如下。

    出发日期和时间：
    <input type="datetime" name="train_startdate" value="" id="startdatepicker" style="width: 150px;" />
    到达日期和时间：
    <input type="datetime" name="train_enddate" id="enddatepicker" style="width: 150px;">

在不同的浏览器中查看页面的运行效果，如图3-24和图3-25所示分别为在Maxthon浏览器和Opera浏览器中的效果。

图3-24 Maxthon浏览器的效果

图3-25 Opera浏览器的效果

4．datetime-local类型

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

【练习16】

继续利用前几个练习的页面进行更改，设置datetime-local类型的input元素效果。代码如下。

    <input type="datetime-local" name="startdate" id="startdate" style="width: 150px;" class="input_20txt">
    <input type="datetime-local" name="enddate" id="enddate" style="width: 150px;" class="input_20txt">

在Maxthon浏览器中，datetime和datetime-local两种类型的input元素的效果基本上没有区别，如图3-26和图3-27所示分别为Chrome和Opera浏览器中的显示效果。

图3-26 Chrome浏览器效果

图3-27 Opera浏览器效果

5．month类型

month类型的input元素是一种专门用来输入月份的文本框，并且在提交时会对输入的月份的有效性进行检查。

month类型的使用非常简单，代码如下。

    <input name="monthSel" type="month" value="2013-12" />

6．week类型

week类型的input元素是一种专门用来输入周的文本框，并且在提交时会对输入的周的有效性进行检查。它可能是一个简单的输入文本框，允许用户输入一个数字；也可能是更复杂、更精确的内容。

例如，2013-W10表示2013年第10周。如下代码直接定义了一个week类型的输入框。

    <input name="weekSel" type="week" value="2013-W12" />
上一章目录下一章