Web implementation simple membership registration demo includes HTML CSS JS part with renderings

Rendering 1:
Rendering 2:
HTML part:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="regist.css">
</head>
<body>
    <form action="" method="post" id="register"  role="form"  target = "iframe_display" > 
        < div  class = "head" > 
            < label > Individual Member Registration </ label > 
        </ div > 
        < div > 
            < div > 
                < label  class = "title" > Member Account </ label > 
            </ div > 
            < div > 
                < input  type = "text"  > * </ label > 
            </ div >        
        </ div > 
        < div > 
            < div > 
                < label  class = "title" > password </ label > 
            </ div > 
            < div > 
                <input type="password"  > * </ label >  
            </ div >        
        </ div > 
        < div > 
            < div > 
                < label  class = "title" > Confirm Password </ label > 
            </ div > 
            < div > 
                <input type="password"  name = "pwd2"  placeholder = "Please enter your password again"  class = "i-input"  id = "pwd2" > < label  class = "mark" > * </ label > 
            </ div >        
        </ div > 
        < div > 
            < div > 
                < label  class = "title" > Gender </ label > 
            </ div >
            <div>               
                <input type="radio" >
                <input type="radio" >
                <label for="female" form="register" > Female </ label > 
            </ div >                                                                
        </ div > 
        < div > 
            < div > 
                < label  class = "title" > City </ label > 
            </ div > 
            < div > 
                < select > 
                    < option  class = "city"  value = "Shijiazhuang" > Shijiazhuang </ option > 
                </select>               
            </div >         
        </ div > 
        < div > 
            < div > 
                < label  class = "title" > hobbies </ label > 
            </ div > 
            < div > 
                < input  type = "checkbox"  name = "hobby"  id = "read"  value = "reading" > 
                < label  for = "read" > reading </label>
                <input type = "checkbox"  name = "hobby"  id = "sport"  value = "sport" > 
                < label  for = "sport" > sports </ label > 
                < input  type = "checkbox"  name = "hobby"  id = "music "  value = "music" > 
                < label  for = "music" > music </ label ><br>
                <input type="checkbox" >
                <label for="it">IT</label>
                <input type="checkbox" >
                <input type="checkbox" >
            </div>
        </div>      
        <div>
            <input type="submit" >
            <input type="reset" >           
        </div>
    </form> 

    <iframe id="iframe_display" ></iframe> 


    < div  id = "showResult"  style = "display: none;" > 
        < h2 > Registration information </ h2 > 
        < table > 
            < tr > 
                < td > Member account </ td > 
                < td  id = "resultVIP" > </ td > 
            </ tr > 
            < tr > 
                < td > gender </ td > 
                <page  id ="resultGender" > </ td > 
            </ tr > 
            < tr > 
                < td > City </ td > 
                < td  id = "resultCity" > </ td > 
            </ tr > 
            < tr > 
                < td > Hobbies </ td > td > 
                < td  id = "resultHobby" > </ td > 
            </ tr >
        </table>
    </div>
    <script src="regist.js"></script>
</body>
</html>

CSS section:

@charset "UTF-8";

*{
    padding: 0px;
    margin: 0px;
}

body{
    background-image: linear-gradient(to bottom right, blue,#c9dded,#ededed);
    background-position: center;
    background-attachment: fixed;
}

form{
    width: 380px;
    height: 450px;
    margin: 90px auto;
    border-radius: 15px;
    background-color: rgba(255,255,255,0.7);
}

form>div{
    width: 380px;
    height: 50px;
    line-height: 50px;
}

form div div{
    height: 50px;
    line-height: 50px;
}

form div div:nth-child(1){
    width: 145px;
    float: left;
}

form div div:nth-child(2){
    width: 235px;
    float: left;
    padding-left: 10px;
    box-sizing: border-box;
}

.head{
    font-size: 20px;
    text-align: center;
}

form div div:nth-child(1) label{
    padding-left: 40px;
    width: 72px;
    text-align: justify;
    text-align-last: justify;
    display: inline-block;
}

.i-input{
    width: 175px;
    height: 24px;
}

#female{
    margin-left: 50px;
}

.date{
    width: 30px;
}

form div:nth-child(8){
    text-align: center;
    margin-top: 45px;
}

form div:nth-child(9){
    text-align: center;
}

form div:nth-child(9) input{
    width: 135px;
    margin: 10px;
}

select{
    width: 180px;
    height: 28px;
}
input[type="submit"]{
    padding: 5px;
    margin-right: 3px;
}
input[type="reset"]{
    padding: 5px;
}
label.mark{
    color: red;
}
div#showResult{
    width: 500px;
    height: 300px;
    position: absolute;
    top: calc(50% - 150px);
    left: calc(50% - 250px);
    background: #baccef;
}
div#showResult h2{
    text-align: center;
    padding: 18px;
}
div#showResult table{
    width: 80%;
    margin: 0 auto;
    font-size: 18px;
}
div#showResult table tr{
    display: block;
    padding-top: 10px;
}
div#showResult table tr td{
    width: 49%;
    display: inline-block;
}
div#showResult table tr td:first-child{
    text-align: justify;
    text-align-last: justify;
    box-sizing: border-box;
    padding-right: 45px;
}

JS part:

function check(){
    var user);
    var pwd=document.getElementById("pwd");
    var pwd2=document.getElementById("pwd2");
    var gender=document.getElementsByName("gender");
    var city=document.querySelector('select').value;
    var hobby = document.getElementsByName('hobby');
    var resultVIP=document.getElementById("resultVIP");
    var resultGender=document.getElementById("resultGender");
    var resultCity=document.getElementById('resultCity');
    var resultHobby=document.getElementById("resultHobby");
    if(username.value==""){
        alert( "Member account must be entered" );
         return  false ;
    }
    if(username.value.length < 5){
        alert( "Member account must be more than 5 characters" );
         return  false ;
    }
    if(pwd.value==""){
        alert( "Password must be entered" );
         return  false ;
    }
    if(pwd.value.length < 6){
        alert( "Password must be more than 6 characters" );
         return  false ;
    }
    if(pwd2.value==""){
        alert( "Confirm password must be entered" );
         return  false ;
    }
    if(pwd2.value != pwd.value){
        alert( "The two passwords must be the same" );
         return  false ;
    }

     //Whether the radio box is selected start 
    var flag;
     for ( var i= 0 ;i<gender.length;i++){
         if (gender[i] .checked ){
            flag=gender[i].value;
        }
    }
 //Whether the radio box is selected end

    var hobbies = "";
    for (k in hobby) {
        if (hobby[k].checked){
            hobby[k].value += " ";
            hobbies+=hobby[k].value;
        }
    }

    var showResult = document.getElementById("showResult");
    showResult.style = "display:block;";
    resultVIP.innerText = username.value;
    resultGender.innerText = flag;
    resultCity.innerText = city;
    resultHobby.innerText = hobbies;
}

Leave a Comment

Your email address will not be published. Required fields are marked *