3.4 新增的表单属性_HTML+CSS网页设计实践教程-QQ阅读男生玄幻网

书名：HTML+CSS网页设计实践教程
作者名：田中雨
本章字数：3471字
更新时间：2021-03-19 20:43:06

3.4 新增的表单属性

HTML 5增加了许多与表单有关的属性，例如，与number和range类型的input元素结合使用的max、min和step属性，与form有关的form属性、formaction和formmethod属性等，与datalist元素结合使用的list属性，以及与tel元素结合使用的pattern属性等。本节将对一些比较重要的、常用的属性进行介绍。

3.4.1 form属性

HTML 4以及之前的版本中，必须把相关的元素都放在form元素表单下才能顺利地提交到服务器。但是，在实际情况中，由于页面设计与实现的特殊性，会存在一些表单之外的元素也需要一并提交的情况，这时就需要使用HTML 5中新增的form属性。

form属性规定输入框所属的一个或多个表单，它适用于所有input元素的类型。通过使用form属性，可以彻底打破必须将元素写入<form></form>标记之间的限制。

【练习17】

form属性可以让HTML元素孤立于表单之外，但是在提交表单时，不仅可以提交表单内部的元素，也可以将表单外的元素一起提交。本次练习在表单外添加一个普通的输入框，然后通过设置form属性获取内容，实现步骤如下。

（1）添加新的页面并且设计页面，在页面中添加表单，该表单内包含用户名、用于输入的验证码、内容和按钮等。相关代码如下。

    <form name="Comment" id="CommentSubmit" method="post" action="">
        <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tbody>
                <tr><td height="35">用户名：<input name="Author" type="text" class="inputtext" size="13" maxlength="16">&nbsp; <img src="form_files/GetCode.asp" align="absmiddle"> ←请输入左边数字&nbsp;<input name="Code" type="text" class="inputtext" size="6"></td></tr>
                <tr><td><textarea name="Content" cols="54" rows="8" style="background:no-repeat center center; background-image: url(/Images/Text_Bg_1.gif);"></textarea></td></tr>
                <tr><td height="35"><input name="imageField" type="image" id="imageField"src="./form_files/Icon_Button.gif"align="absmiddle" onClick="GetSubmitContent()">&nbsp;（200字以内）<input name="HideID" type="checkbox" id="HideID2" value="ok">匿名发表<input name="SaveID" type="checkbox" id="SaveID2" value="ok" checked="">保存用户名</td></tr>
            </tbody>
        </table>
    </form>

（2）在表单外添加与主题有关的input元素，代码如下。

    <div style="margin-left:20px">内容主题：<input type="text" name="user ContentTitle" /></div>

（3）在第（1）步所示的代码中已经为按钮添加了onClick事件属性，用户单击该按钮时会触发其Click事件调用GetSubmitContent()脚本函数。在该函数中首先获取表单对象，然后分别获取表单内的各个元素，同时也会获取表单外name属性的值是userContentTitle的元素，并且判断其值。代码如下。

    function GetSubmitContent(){
        var formsval = document.forms["Comment"];            //获取表单对象
        var name = formsval["Author"].value;                 //获取用户名
        var content = formsval["Content"].value;             //获取内容
        var contenttitle = formsval["userContentTitle"];     //获取主题
        if(contenttitle==null || contenttitle==undefined)  {//如果主题为空
            alert("没有获取到与发表内容有关的主题信息。");
        }else{
            alert(name+"关于["+contenttitle.value+"]所发表的内容是："+content);
        }
    }

（4）运行页面输入内容后进行测试，效果如图3-28所示。

图3-28 没有使用form属性时的效果

分析图3-28可以知道，在执行脚本代码时并没有获取到与主题有关的信息，这是因为主题内容在表单的外部。

（5）重新为表单外的元素添加form属性，将form属性的值指定为form表单的ID属性的值。代码如下。

    <div style="margin-left:20px">
    内容主题：<input type="text" name="userContentTitle" form="Comment-Submit" />
    </div>

（6）重新运行页面输入内容进行测试，运行效果如图3-29所示。

图3-29 使用form属性后的效果

3.4.2 表单重写属性

HTML 5中新增了多个与表单有关的属性，除了form属性外，还包含其他的属性，如表单重写属性，这些重写属性分别是formaction、formenctype、formmethod、formnovalidate和formtarget，具体说明如下所示。

（1）formaction属性：重写表单的action属性。

（2）formenctype属性：重写表单的menctype属性。

（3）formmethod属性：重写表单的method属性。

（4）formnovalidate属性：重写表单的novalidate属性。

（5）formtarget属性：重写表单的target属性。

【练习18】

表单中的这些重写属性仅适用于submit和image类型的input元素，如下示例代码简单演示了部分属性。代码如下。

    <form id="form1" action="Index.html">
        Email: <input type="email" name="user_email" /><Br/>
        <input type="submit" value="Submit" /><Br/>
        <input type="submit" value="作为管理员提交" formaction="adminIndex.html" /><Br/>
        <input type="submit" value="不需要验证就可以提交" formnovalidate="true" />
    </form>

上述代码在表单中首先添加用于用户输入时的电子邮箱，然后分别添加三个submit类型的input元素的执行按钮。为第二个按钮添加formaction属性，为第三个按钮添加formnovalidate属性。

执行上述代码，向输入框中输入内容后单击不同的按钮进行测试。单击名称是“Submit”的按钮时会验证用户输入的E-mail是否合法，如果合法提交到Index.html页面；单击名称是“作为管理员提交”的按钮时也会自动验证用户输入的E-mail是否合法，如果合法则会跳转到adminIndex.html页面（formaction属性重写提交路径）；单击名称是“不需要验证就可以提交”的按钮时由于使用了formnovalidate属性，所以无论文本框中输入的E-mail是否合法，都会提交到Index.html页面。

HTML 4以及之前的版本中，一个form指定了action后便只能将<form></form>标记中的元素提交到另一个地址。而在HTML 5中可以为所有的按钮添加表单重写属性指定不同的跳转页面。部分代码如下。

    <form id="testform" action="index.html">
        <input type="submit" name="s1" value="v1" formaction="userIndex.html" />提交到s1
        <input type="submit" name="s2" value="v2" formaction="adminIndex.html" />提交到s2
    </form>
    <input form="testform" name="var1" value="val1" />
    <input form="testform" name="var2" value="val2" />

3.4.3 placeholder属性

placeholder属性是HTML 5的新增属性，当用户还没有输入值时，可以通过设置placeholder属性向用户显示描述性说明或者提示信息。placeholder属性只需要将说明性文字作为属性值即可，在字段获得焦点时或者输入内容后提示会自动消失；如果没有输入文本内容，那么提示会再次出现。

placeholder属性不仅适用于普通的文本框，对于其他类型（例如email、url和number等）的输入框也适用。在支持placeholder属性的浏览器中，属性值会以浅灰色的样式显示在输入框中；在不支持placeholder属性的浏览器中，该属性会自动被忽略，以输入框的形式默认显示。

【练习19】

许多网站的页面中都会在输入框内提示一些默认的信息。例如在微博中，用户可以更改个人资料，如果当前某个资料用户没有填写，则通过默认的placeholder属性进行提示。在页面中添加如下代码。

    <input id="homepage" name="homepage" type="url" class="inputTxt en" value="" placeholder="http://">
    <input id="oldtel" name="oldtel" type="tel" class="inputTxt en" pattern="^\d{3}-\d{8}|\d{4}-\d{7}$" placeholder="格式：410-12345678或0371-1234567">
    <textarea name="summary" id="summary" class="inputArea" placeholder="介绍个人资本资料、爱好即可"></textarea><b class="pass" style="display: none"></b> <span rel="140字以内">140字以内</span>

上述代码中的第一个input元素表示用户所输入的个人主页，placeholder属性指定没有内容时的提示；第二个input元素表示固定电话，placeholder属性指定电话的正确格式；textarea表示个人介绍，placeholder属性指定提示。

运行页面查看上述代码的运行效果，如图3-30所示。

图3-30 placeholder属性的使用

3.4.4 required属性

required属性是一个必填项，即输入框的内容不能为空。一旦将输入框的元素的required属性设置为true，那么此项就必须填写，否则无法提交表单。

required属性可以适用于多个类型的input元素，但是button和range除外。在单击按钮执行操作之前，必须对输入的内容进行验证。例如，验证邮箱格式是否正确，在指定input元素的类型是email的同时，同时需要设置required属性的值。

required属性的值是一个布尔类型，因此，使用该属性时有三种方法。代码如下。

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

【练习20】

几乎所有的网站中，与用户输入内容有关的内容多数都是要求必须填写的，例如用户名和联系电话。在微博个人资料修改页面也要求用户的某些内容是必须填写的，例如修改时的用户名、性别和生日。在页面中，为与用户名有关的input元素添加required属性，并指定该属性的值为required。代码如下。

    <input type="text" name="nick" id="nick" class="inputTxt" value="杜飞" required="required">

重新运行页面进行测试，不向用户名输入框中输入内容直接单击按钮进行提交，Chrome浏览器和Opera浏览器中的效果如图3-31和图3-32所示。

图3-31 Chrome浏览器效果

图3-32 Opera浏览器效果

3.4.5 pattern属性

pattern属性定义用于验证input元素的模式，这个模式是正则表达式，只有用户输入的内容与表达式匹配时才会被视为有效。

HTML 5中pattern属性使用的正则表达式与JavaScript中所使用的正则表达式的语法是一样的，但是，该属性要求必须与整个值相匹配，而不仅仅是一个子集。

pattern属性可以匹配许多内容，例如，匹配固定电话、手机号码、电子邮件、身份证号、用户名为中文、密码长度以及日期和时间等。如下代码演示了常用的几种表达式。

    ^\d{3}-\d{8}|\d{4}-\d{7}$                   //匹配固定电话
    ^[\u4e00-\u9fa5\uf900-\ufa2d]$               //匹配是否是中文
    ^(?:\w+\.?)*\w+@(?:\w+\.?)*\w+$              //匹配电子邮箱
    ^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$        //匹配电子邮箱
    ^[A-Za-z0-9]+$                               //匹配由数字和26个英文字母组成的字符串
    ^(\d+)\.(\d+)\.(\d+)\.(\d+)$                 //匹配IP地址是否合法
    ^[1][3][0-9]{9}$                             //匹配输入的手机号是否以13开头
    ^[-]{0,1}(\d+)[\.]+(\d+)$    //匹配输入字符串是否是带小数的数字格式，可以是负数

如果pattern属性所定义的正则表达式内容不是有效的，则该属性不会对输入的内容进行验证。与其他的类型一样，pattern属性不会自动验证内容为空的情况，它可以和required属性结合使用。

pattern属性并不是适用于所有类型的input元素，它的适用类型有text、search、email、url、tel和password。

【练习21】

本次练习继续在练习20的基础上进行更改，使用pttern属性指定用户所输入的用户名只能是中文，并且长度在2～8位之间。相关代码如下。

    <input type="text" name="nick" id="nick" class="inputTxt" placeholder="输入2-8位的中文" required="required" pattern="^[\u4e00-\u9fa5\uf900-\ufa2d]{2,8}$" title="输入2-8位的中文">

运行页面后输入内容进行测试，如图3-33和图3-34所示分别为在Chrome浏览器和Opera浏览器中的效果。

图3-33 Chrome浏览器效果

图3-34 Opera浏览器效果

试一试

pattern属性可以指定不同的正则表达式，感兴趣的读者可以为不同的input元素类型设置pattern属性进行测试。

3.4.6 autocomplete属性

autocomplete属性能够知晓是否应该保存输入值以备将来使用，简单来说，使用该属性可以实现自动完成的功能。该属性可以用来保护敏感数据，避免本地浏览器对它们进行不安全的存储。

autocomplete属性有on和off两个属性值，在对其不指定值时，使用浏览器的默认值。如果把该属性的值设置为on时，可以显示指定候补输入的数据列表。使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以将datalist元素中的数据作为候补输入的数据在文本框中自动显示。

autocomplete属性的使用非常简单，直接在其指定的元素类型上使用即可。支持autocomplete属性的input元素类型可以是text、search、url、tel、email、password、rage、color和日期类型。

【练习22】

autocomplete属性定义的效果要强于form元素，本次练习分别为form表单、用户名输入框和邮箱输入框指定autocomplete属性。代码如下。

    <form id="form1" action="newaction.html" method="get" autocomplete="on">
    用户名：<input type="text"  name="username" id="username" autocomplete="on"/>
        Email：<input type="email" name="email" id="email" autocomplete="off"/><br/>
        <input type="submit" value="Submit" />
    </form>

上述代码将form元素的autocomplete属性的值指定为on，然后再指定表单内的子元素的autocomplete属性的值。用户名可以自动完成，但是E-mail的设置不能自动完成，当用户在自动完成框中开始输入用户名时，浏览器会在该框中显示填写的选项。

试一试

datalist元素和list属性结合使用可以提供数据列表选项，读者可以将它们与autocomplete属性结合起来再运行页面查看效果。

3.4.7 autofocus属性

autofocus属性规定页面加载后是否自动获取焦点，如果将该属性的值设置为true，页面打开时，指定该属性的元素会自动获得焦点。该属性适用于所有input元素的类型，button、input、keygen、select和textarea等元素都可以定义autofocus属性。

例如，网页上有一个搜索框，当网页加载完成后焦点就在搜索框上。代码如下。

    <form action="" method="get">
        <input type="search" name="txtsearch" id="txtsearch" autofocus="true" />
    </form>

注意

一个页面上只能有一个元素具有autofocus属性。只有当一个页面是以使用某个元素为主要目的时，才会对该元素使用autofocus属性，如搜索页面中的搜索文本框。