HTML+CSS前端-个人信息采集系统

最新推荐文章于 2024-05-06 18:37:09 发布

是个码盲

最新推荐文章于 2024-05-06 18:37:09 发布

阅读量516

点赞数 10

文章标签：前端 html css

本文链接：https://blog.csdn.net/kill_kill_/article/details/135419381

版权

本文详细介绍了HTML中的

、和标签的用法，以及如何通过JavaScript实现表单元素的关联和验证，展示了在网页设计中组织和收集用户信息的示例。

摘要由CSDN通过智能技术生成

涉及标签：

div：<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。任何类型的内容都可以放在 <div> 标签内！ <div> 标签可用作 HTML 元素的容器，然后使用 CSS 设置样式或使用 JavaScript 进行操作。

label：

HTML <label> 元素（标签）表示用户界面中某个元素的说明。

属性

该元素包含全局属性。

for: 即和 <label> 元素在同一文档中的可关联标签的元素的 id。文档中第一个 id 值与 <label> 元素 for 属性值相同的元素，如果可关联标签（labelable），则为已关联标签的控件，其标签就是这个 <label> 元素。如果这个元素不可关联标签，则 for 属性没有效果。如果文档中还有其他元素的 id 值也和 for 属性相同，for 属性对这些元素也没有影响。

form：表示与 label 元素关联的 <form> 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置，而不仅作为 <form> 元素的后代。

input：素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理不同，表单可以使用各种类型的输入数据和控件。 <input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。

网页效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        .main{
            background-color: #eef5f0;
            width: 400px;
            height: 600px;
            margin: 0 auto;

        }
        .header{
            color: #0fa81e;
            font-size: 26px;
            text-align: center;
            width: 400px;
            height: 40px;
        }
        .one{
            background-color: #0ddf53;
            width: 400px;
            height: 300px;
           margin-top: 10px;
           margin-bottom: 20px;
            padding: auto;
            
        }
        .two{
            background-color: #0ddf53;
            width: 400px;
            height: 230px;
            margin: 20px auto;
        }
        
    </style>
</head>
<body>
    <div class ="main">
        <div class="header">个人信息采集系统</div>
        <div class="one">
            <form name="personInfo">
                <label >请输入姓名:</label><br>
                <input type="text" id="name" name="name" onblur="verifyname(document.personInfo.name.value)"><br>
                <label for="">请选择性别:</label><br>
                <input type="radio" name="sex" id="t2" value="男" checked="checked">男
                <input type="radio" name="sex" id="t3" value="女" checked="checked">女<br>
                <label >请输入年龄:</label><br>
                <input type="text" id="age" name="age"  onblur="verifyage(document.personInfo.age.value)"><br>
                <label >请输入邮箱:</label><br>
                <input type="text" id="mail" name="mail" onblur="verifyemail(document.personInfo.mail.value)"><br>
                <label >请输入电话:</label><br>
                <input type="text" id="cellnumber"  name="cellnumber" onblur="verifyphonenumber(document.personInfo.cellnumber.value)"><br>
                <input type="button" id="btn1" value="保存" onclick=person.getinfo()><br>
            </form> 
        </div>
        <div class="two">
                <form name="showinfo">
                <input type="button" id="btn2" value="确认信息" onclick=person.showinfo()><br>
                <textarea name="info" cols="30" rows="10" id="information">单击信息确认按钮获得个人信息，信息有错请重新输入，信息无误请按确定按钮</textarea><br>
                <input type="button" id="btn3" value="确认">
                </form>  
        </div>
        
    </div>



    <!-- <script type="text/javascript">
        var t1 = document.querySelector('t1');
        var t2 = document.querySelector('t2');
        var t3 = document.querySelector('t3');
        var t4 = document.querySelector('t4');
        var t5 = document.querySelector('t5');
        var t6 = document.querySelector('t6');

        var div =document.querySelector('div');
        var btn =document.querySelector('button');

        //名字
        t1.onblur = function(){
            if(this.value !=""){
                if(this.value.length <4||this.value.length>11){
                    console.log('错误')

                }
            }
        }


    </script>
    -->

    <script>
    function getname(){
        return document.personInfo.name.value;
    }
    function getgender(){
        if(document.getElementById("man").checked){
        return document.getElementById("man").value;
    }
        else{
            return document.getElementById("women").value;
        }
        
    }
    function getage(){
        var age=parseInt(document.personInfo.age.value);
        if(isNaN(age)){
            return NaN;
        }
        else return age;
    }
    function getmail()
    {
        var mail=parseInt(document.personInfo.mail.value);
        if(isNaN(mail)){
            return NaN;
        }
        else return mail;
    }
    function getcellnumber()
    {
        var cellnumber=parseInt(document.personInfo.cellnumber.value);
        if(isNaN(cellnumber)){
            return NaN;
        }
        
        else return cellnumber;
    }
    function Person() {
        this.getinfo=function(){
            this.name=getname();
            this.gender=getgender();
            this.age=getage();
            this.mail=getmail();
            this.cellnumber=getcellnumber();
        }
        this.showinfo=function(){
            document.showinfo.info.value="姓名"+this.name+"\n"
            document.showinfo.info.value+="性别"+this.gender+"\n"
            document.showinfo.info.value+="年龄"+this.age+"\n"
            document.showinfo.info.value+="邮箱"+this.mail+"\n"
            document.showinfo.info.value+="号码"+this.cellnumber+"\n"
        }
    }
    function verifyname(obj){
        var re=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$|^[a-zA-Z]{4,20}$/;
        flag=re.test(obj);
        if(flag==false){
            alert("输入错误");
        }
    }
    function verifyage(obj){
        var re=/^\d{1,2}$/;
        flag=re.test(obj);
        if(flag==false)
        alert("输入错误");
    }
    function verifyemail(obj){
        var re=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9])+(\.[a-zA-Z]{2,3}){1,2}$/;
        flag=re.test(obj);
        if(flag==false)
        alert("输入错误");
    }
    function verifyphonenumber(obj){
        var re=new RegExp("^1[3|4|5|8][0-9]{9}$");
        flag=re.test(obj);
        if(flag==false)
        alert("输入错误");
    }
    </script>
</body>
</html>