HTML5中的表单

最新推荐文章于 2025-01-29 17:50:37 发布

阿立聊全栈

最新推荐文章于 2025-01-29 17:50:37 发布

阅读量1.1k

点赞数 9

分类专栏：《HTML5实战》文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_36324341/article/details/142289872

版权

《HTML5实战》专栏收录该内容

8 篇文章

订阅专栏

第4章 HTML5中的表单

4.1 input元素的新增类型

类型：

email：邮件输入框
url：Web地址输入框
number：数字输入框，可以设置输入值的范围
range：数字滑动条
date：日期选择器
search：搜索输入框

代码实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>email,url,number,range,date,search</title>
    <style>
        #colorDiv {
            width: 200px;
            height: 100px;
            border: 1px solid;
        }
    </style>
    <script>
        function setColor() {
            var R = document.getElementById("input1").value;
            var G = document.getElementById("input2").value;
            var B = document.getElementById("input3").value;
            var colorDiv = document.getElementById("colorDiv");
            colorDiv.style.backgroundColor = "rgb(" + R + "," + G + "," + B + ")"
        }
    </script>
</head>

<body>
    <form action="#">
        <h3>email邮件输入框</h3>
        <input type="email" multiple /><input type="submit" />
        <hr />
        <h3>url Web地址输入框</h3>
        <input type="url" /><input type="submit" />
        <hr />
        <h3>number数字输入框</h3>
        <input type="number" min="1960" max="1990" /><input type="submit" />
        <hr />
        <h3>range数字滑动条</h3>
        <div id="colorDiv"></div>
        R<input id="input1" style="display: block;" type="range" min="0" max="255" onchange="setColor()" />
        G<input id="input2" style="display: block;" type="range" min="0" max="255" onchange="setColor()" />
        B<input id="input3" style="display: block;" type="range" min="0" max="255" onchange="setColor()" />
        <hr />
        <h3>date日期和时间</h3>
        <input type="date" />
        <input type="datetime-local" data />
        <hr />
        <h3>search搜索类型</h3>
        <input type="search" /><input type="submit" />
        <hr />
    </form>

</body>

</html>

页面效果

4.2 input新增的共用属性

autofocus：自动获取焦点
pattern：正则表达式验证元素内容
placeholder：文本输入框默认内容
required：检测文本框内容为空
novalidate：验证输入框的内容

综合案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>- autofocus：自动获取焦点
        - pattern：正则表达式验证元素内容
        - placeholder：文本输入框默认内容
        - required：检测文本框内容为空
        - novalidate：验证输入框的内容</title>
    <style>
    </style>
</head>

<body>
    <form action="#">
        <h5>autofocus：自动获取焦点</h5>
        <h5>pattern：(部分浏览器支持)字母开头，包含字符或数字和下划线，长度6-8</h5>
        <h5>placeholder：文本输入框默认内容</h5>
        姓名：<input type="text" pattern="^[a-zA-Z]\w{5,7}$" placeholder="张三" autofocus required />
        <input type="submit" />
    </form>
</body>

</html>

4.3 新增表单元素

新的表单元素，datalist,keygen,output等。

4.3.1 datalist元素

功能是辅助表单中文本框的数据输入。本身是隐藏的，与表单文本框的list属性绑定，即将list属性设置为datalist元素的id号，绑定成功后，用户单击文本框准备输入内容时，datalist元素以列表的形式显示在文本框的底部，提示输入字符的内容。当用户选择列表中的某个选项后，datalist将自动隐藏，同时，文本框中显示所选择的内容。

datalist元素的使用

1.功能描述

2.实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>datalist元素的使用</title>
</head>

<body>
    <form action="#" id="frmTmp">
        <fieldset>
            <legend>请输入职业：</legend>
            <input type="text" id="txtWork" list="lstWork" />
            <datalist id="lstWork">
                <option value="程序开发"></option>
                <option value="架构师"></option>
                <option value="运维"></option>
            </datalist>
        </fieldset>
    </form>
</body>

</html>

3.页面效果

4.3.2 output元素

该元素必须从属于某个表单，或通过属性指定某个表单，该元素的功能是在页面中显示各种不同类型表单元素的内容，如输入框的值，js代码执行后的结果值等，为了获取这些值，需要设置output元素的onFormInput事件，在表单输入框中录入内容时，触发该事件，从而十分方便的实时侦查到表单中各元素的输入内容。

示例：output元素的使用

1.功能描述

新建表单，创建两个输入框，新建一个output元素，用于显示两个输入文本框中数字相乘后的结果。

当改变任意一个数值时，output元素显示的计算结果也将自动进行变化。

2.实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>output元素的使用</title>
    <script>
        function compute() {
            var v1 = document.getElementById("txtNum1").value;
            var v2 = document.getElementById("txtNum2").value;
            var otpt = document.getElementById("otpt");
            otpt.nodeValue = v1 * v2;
        }
    </script>
</head>

<body>
    <form action="#" id="frmTmp" oninput="otpt.value=txtNum1.value*txtNum2.value">
        <fieldset>
            <legend>请输入两个数字：</legend>
            <input type="text" id="txtNum1" />
            x
            <input type="text" id="txtNum2" />
            =
            <output id="otpt" for="txtNum1 txtNum2">0</output>
        </fieldset>
    </form>
</body>

</html>

3.页面效果

4.3.3 keygen元素，已被废弃，不学也罢

用于生成页面的密钥，在表单中创建该元素，在表单中提交时，该元素将生一对密钥，一个保存在客户端，一个保存在服务端，称为私钥，另一个发送至服务端进行保存，称为公钥，公钥可以用于客户端证书的验证。

示例：keygen元素的使用

1.功能描述

新建name为keyUserInfo的keygen元素，该元素将在页面中创建一个选择密钥位数的下拉列表框，当选择列表框中某选项值，并单击表单的提交按钮时，将根据所选密钥的位数生成对应密钥，提交给服务器。

2.实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>keygen元素的使用</title>
</head>

<body>
    <form action="#" id="frmTmp">
        <fieldset>
            <legend>用户注册</legend>
            用户名：<input type="text" name="name"><br>
            密码：<input type="password" name="password">
            <br><input type="submit" value="确定">
        </fieldset><br>

        keygen元素用法：<br>
        加密：<keygen name="mykey"><br>
        <br><input type="submit" value="确定">
    </form>
</body>

</html>

3.页面效果

案例并无效果。。。

4.4 表单新增的验证方法和属性

加强form表单验证的方法和属性，如方法checkValidity()和setCustomValidity()，属性novalidate等

4.4.1 checkValidity显式验证法，只有Opera才支持该方法

表单中可以利用pattern与required属性验证内容有效性，此外每个元素都可以调用公共方法checkValiedity(),核实本身是否与验证条件匹配。一致返回true，不一致返回false.用JS调用元素该方法进行验证。

示例：调用表单的checkValidity方法

1.功能描述

页面表单中，创建用于输入密码的文本框，使用pattern自定义相应的密码验证规则。用js编写一个表单提交时触发的函数chkPassWord(),该函数将显式的检测密码输入文本框内容是否与自定义的验证规则匹配。

2.实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>调用表单的checkValidity方法</title>
        <script>
            function $$(id){
                return document.getElementById(id);
            }
            function chkPassWord(){
                var pass = $$("txtPass");
                var spn=$$("spnPass");
                var strP;
                if (pass.checkValidity()) {
                    strP="√";
                } else{
                    strP="X";
                }
                spn.innerHTML=strP;
                return false;
            }
        </script>
    </head>
    <body>
        <form action="#" id="frmTmp" onsubmit="return chkPassWord()">
            <fieldset>
                <legend>checkValidity()方法</legend>
                <p>输入密码：
                    <input id="txtPass" name="txtPass" type="password" pattern="^[a-zA-Z]\w{5,7}$" required />*
                    <span id="spnPass"></span>
                </p>
                <p class="pcenter">
                    <input type="submit" value="确定" />
                </p>
            </fieldset>
        </form>
    </body>
</html>

3.页面效果

无法展示。。。

4.4.2 使用setCustomValidity方法修改提示信息，只有Opera才支持该方法，不再演示

在表单与相应规则验证时，由于使用的是系统内置的验证方法，因此，出错提示信息也是由系统自带的，一般情况下不修改。但有时，为了与系统出错信息的格式一致，需要修改验证出错的信息内容，实现方法是调用表单的setCustomValidity()方法，该方法括号内容就是修改后的错误提示信息。

4.4.3 表单的novalidate属性，有安全隐患，慎用

表示取消全部表单验证。

直接上代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>form中novalidate属性的使用</title>
</head>

<body>
    <form action="#" id="frmTmp" novalidate>
        <fieldset>
            <legend>用户登录</legend>
            <p>姓名：
                <input id="txtName" name="txtName" type="text" pattern="^[a-zA-Z]\w{5,7}$" required />*
            </p>
            <p>密码：
                <input id="txtPass" name="txtPass" type="password" pattern="^[a-zA-Z]\w{5,7}$" required />*
                <span id="spnPass"></span>
            </p>
            <p class="pcenter">
                <input type="submit" value="确定" />
                <input type="reset" />
            </p>
        </fieldset>
    </form>
    <form action="#" id="frmTmp">
        <fieldset>
            <legend>用户登录</legend>
            <p>姓名：
                <input id="txtName" name="txtName" type="text" pattern="^[a-zA-Z]\w{5,7}$" required />*
            </p>
            <p>密码：
                <input id="txtPass" name="txtPass" type="password" pattern="^[a-zA-Z]\w{5,7}$" required />*
            </p>
            <p class="pcenter">
                <input type="submit" value="确定" />
            </p>
        </fieldset>
    </form>
</body>

</html>