HTML 表单的练习记录篇

来源：互联网发布：淘宝培训班多少钱编辑：程序博客网时间：2024/06/04 01:20

前言：

近期的工作中是负责公司网站的维护，所以就得学习Web前端的知识…时常忘记，所以记录下，也算是学习Web的一个开篇吧！废话不多说，coding …

Ⅰ.简述

表单相关的标签：form、fieldset、legend、table、tr、td、input、select、option、textarea 等；

表单相关标签对应的部分属性：

标签元素 form action、method、id、onsubmit table border、width、height、align、cellpadding、cellspacing tr align td width、colspan input type、id、name、value select name、id option value textarea id、name、rows、cols

>
上面罗列了表单相关的标签和属性，都是HTML表单常用到的，看着就简单的标签属性，但是时间久了就容易忘了，所以个人觉得还是罗列出来比较好.

Ⅱ.表单练习

关于HTML表单的标签和元素在上面都罗列出，不懂的可以看下w3c文档，那么下面就自己代码记录起:

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>form test</title>    </head>    <body>        <form action="js_success.html" method="get" id="form" onsubmit="return check()">            <fieldset>                <legend>                    Welocome me Login                </legend>                <table border="3px" width="50%" align="center" cellpadding="5px" cellspacing="0px" >    <!--align="center" 整个表格居中-->                    <tr align="center">                                                                <!--align="center" 内容居中-->                        <td width="20%">姓名：</td>                        <td>                            <input type="text" name="uname" id="uname" onchange="return checkUName()"/>                            <span id="uNameSpan"></span>                        </td>                    </tr>                    <tr align="center">                        <td>密码: </td>                        <td>                            <input type="password" name="pwd" id="pwd" onchange="return checkPwd()"/>                            <span id="pwdSpan"></span>                        </td>                    </tr>                    <tr align="center">                        <td>确认密码：</td>                        <td>                            <input type="password" name="pwd2" id="pwd2" onchange="return checkPwd2()"/>                            <span id="pwd2Span"></span>                        </td>                    </tr>                    <tr align="center">                        <td>邮箱：</td>                        <td>                            <input type="text" name="email" id="email" onchange="return checkEmail()"/>                            <span id="emailSpan"></span>                        </td>                    </tr>                    <tr align="center">                        <td>性别：</td>                        <td>                            <input type="radio" name="gender" id="man" value="man" />男                            <input type="radio" name="gender" id="girl" value="girl"/>女                        </td>                    </tr>                    <tr align="center">                        <td>爱好：</td>                        <td>                            <input type="checkbox" name="like" id="eat" value="eat"/>吃饭                            <input type="checkbox" name="like" id="play" value="play"/>玩耍                            <input type="checkbox" name="like" id="sleep" value="sleep">休息                        </td>                    </tr>                    <tr align="center">                        <td>城市：</td>                        <td>                            <select name="city" id="city">                                <option value="">请选择</option>                                <option value="bj">北京</option>                                <option value="sz">深圳</option>                                <option value="gz">广州</option>                            </select>                        </td>                    </tr>                    <tr align="center">                        <td>自我介绍：</td>                        <td>                            <textarea id="myInfo" name="myInfo" rows="5" cols="20">属于你个人的介绍，请填写</textarea>                        </td>                    </tr>                    <tr align="center">                        <td colspan="2">                            <input type="submit" value="立即注册"/>                        </td>                    </tr>                </table>            </fieldset>        </form>    </body></html>

上面是HTML表单的标签，表单一般用于登录注册功能，那么就应该有表单的验证功能，下面用JavaScript实现：

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>form test</title>    </head>    <body>            //here：上面的代码    </body>    //javaScript代码    <script type="text/javascript">        /**         * 用户名的判断         * @returns {boolean}         */        function checkUName(){            var uName = document.getElementById("uname");            var uNameText = myTrim(uName.value);            uName.value = uNameText;            var uNameSpan = document.getElementById("uNameSpan");            if(uNameText == ""){                uNameSpan.innerHTML = "用户名不允许为空!";                uNameSpan.style.color = "red";                uNameSpan.style.fontSize = 10;                return false;            }            var uNameRegex = /^[a-zA-Z_]\w+$/;            if(uNameRegex.test(uNameText)){                uNameSpan.innerHTML = "<img src='img/true.ico'  />";                var imgs = uNameSpan.getElementsByTagName("img");                var img = imgs[0];                img.style.height = "15px";            }else{                uNameSpan.innerHTML = "用户名必须是字母数字或下划线, 不能以数字开头";                uNameSpan.style.color = "red";                uNameSpan.style.fontSize = 10;                return false;            }            return true;        }        /**         * 验证密码         */        function checkPwd(){            var password = document.getElementById("pwd").value;            var pwdSpan = document.getElementById("pwdSpan");            if(password == ""){                pwdSpan.innerHTML = "密码不允许为空!";                pwdSpan.style.color = "red";                pwdSpan.style.fontSize = 10;                return false;            }            //密码必须为6-16位字母数字下划线!            var pwdRegex = /^\w{6,16}$/;            if(pwdRegex.test(password)){                pwdSpan.innerHTML = "<img src='img/true.ico'>";                var imgs = pwdSpan.getElementsByTagName("img");                var img = imgs[0];                img.style.height = "15px";            }else{                pwdSpan.innerHTML = "密码必须为6-16位字母数字下划线";                pwdSpan.style.color = "red";                pwdSpan.style.fontSize = 10;                return false;            }            return true;        }        /**         * 验证 确认密码         */        function checkPwd2(){            var password2 = document.getElementById("pwd2").value;            var pwd2Span = document.getElementById("pwd2Span");            if(password2 ==""){                pwd2Span.innerHTML = "确认密码不允许为空!";                pwd2Span.style.color = "red";                pwd2Span.style.fontSize = 10;                return false;            }            var password1 = document.getElementById("pwd").value;            if(password1 == password2){                pwd2Span.innerHTML = "<img src='img/true.ico'>";                var imgs = pwd2Span.getElementsByTagName("img");                var img = imgs[0];                img.style.height = "15px";            }else{                pwd2Span.innerHTML = "密码不一致，请确认";                pwd2Span.style.color = "red";                pwd2Span.style.fontSize = 10;                return false;            }            return true;        }        /**         * 验证 邮箱格式         */        function checkEmail(){            var email = document.getElementById("email").value;            var emailSpan = document.getElementById("emailSpan");            if(email ==""){                emailSpan.innerHTML = "邮箱不允许为空!";                emailSpan.style.color = "red";                emailSpan.style.fontSize = 10;                return false;            }            var emailRegex = /^\w+@\w+(\.\w+)+$/;    //定义正则表达式时，空格也算是需要验证的字符，注意            if(emailRegex.test(email)){                emailSpan.innerHTML = "<img src='img/true.ico'/>";                var imgs = emailSpan.getElementsByTagName("img");                var img = imgs[0];                img.style.height = "15px";            }else{                emailSpan.innerHTML = "邮箱格式不正确，请确认!";                emailSpan.style.color = "red";                emailSpan.style.fontSize = 10;                return false;            }            return true;        }        /**         * 验证所有的信息         */        function check() {            var uName = checkUName();            var pwd1 = checkPwd();            var pwd2 = checkPwd2();            var email = checkEmail();            if(!(uName && pwd1 && pwd2 && email)){                alert("填写信息不正确，请确认!");                return false;            }            var genderArr = document.getElementsByName("gender");            if(genderArr[0].checked == genderArr[1].checked){                alert("请选择性别");                return false;            }            var likeArr = document.getElementsByName("like");            var fla = false;            for(var k=0;k<likeArr.length;k++){                if(likeArr[k].checked){                    fla = true;                }                if(k==likeArr.length-1 && !fla){                    alert("请选择爱好");                    return false;                }            }            var city = document.getElementById("city").value;            if(city ==""){                alert("请选择城市");                return false;            }            var myInfo = document.getElementById("myInfo").value;            if(myInfo == "属于你个人的介绍，请填写" || myInfo ==""){                alert("请填写个人介绍");                return false;            }            return true;        }        /**         * 字符串去空格         * @param a         * @returns {string}         */        function myTrim(a){            var str = new String(a);            var start = 0;            var end = str.length -1;            for(var i=0;i<str.length;i++){                if(" "==str[i]){                //注意这里的空格                    start++;                }else{                    break;                }            }            for(var j=end;j>0;j--){                if(" " ==str[j]){               //注意这里的空格                    end--;                }else{                    break;                }            }            return str.substring(start,end+1);        }    </script></html>

该注意的点都在上面注释标识出来，其他的也没什么了

看下效果图
这里写图片描述

Ⅲ.总结

…省略三万字的总结，继续学习！

0 0