Predecessors, please skip


The second day of front-end introductory study , contrast W3C A simple login and registration implementation is written in the document .

html and css,js Responsible for the interface of the web page , style , action . among html Label fit provided CSS Realize the function of interface beautification ,CSS3 New styles have been added to ,HTML5 More convenient control selection is also added in . For example, the prompt in the input box on this page is newly added
placeholder realization . Google , Firefox and other browsers can parse normally .


<!DOCTYPE html>
        <meta charset="utf-8" />
        <link type="text/css"  rel="stylesheet" href="css/login.css" />
        <div class="top">
          <a href="index.html" class="Wel">Welcome to login</a>
            <span class="title"></span>
            <div class="card">
                <div class="img">
                    <img src="" />
                <div class="card_body">
                    <form action="index.html" method="post">
                        <div class="form-group">
                            <label for="username"> user name :</label>
                            <input type="text" name="username"
placeholder=" Please enter your user name " οnchange="chkname()" id="username" /><br />
                            <p id="tip"class="tip"></p>
                        <div class="form-group">
for="password"> dense     code :</label>
                            <input type="password" name="password" 
placeholder=" Please enter your password " οnchange="chkpassword()" id="password" /><br />
                            <p id="tip2"class="tip"></p>
                        <div class="form-group">
                            <label for="checkcode"> Verification Code :</label>
                            <input type="text" name="checkcode"
placeholder=" Verification Code " οnchange="chkcode()" id="checkcode"/><br /><br />
                        <button type="button" οnclick="check()" > Confirm login </button>
                    <p class="jump"> No account ? immediately <a href="register.html"> register </a></p>
        <script src="js/login.js"></script>


function chkname(){
    if (!(/^\w+$/.test(str)) && str.length>0){
        document.getElementById("tip").innerHTML="* User names must consist of alphanumeric underscores !";
        // document.write(" User names must consist of alphanumeric underscores ");
function chkpassword(){
    if(str.length<8 && str){
        document.getElementById("tip2").innerHTML="* The password cannot be less than eight digits !";
function chkcode(){
    str = document.getElementById("checkcode").value;
        alert(" Please enter the verification code !");