ZEN Bank – Login in HTML

Question:

ZEN Bank is one of the fastest-growing banks in India.  It needs to automate all the transactions performed in the bank.  As a beginning of this process, they are developing the Login page which will take the user name and password as inputs. To facilitate this requirement enhance the designed Web page “ZEN BANK – LOGIN” which has the below fields.

All validations should be based on HTML 5 (Do not use JavaScript).  All fields are mandatory.    

Label NameComponent  NameDescription
User nameuserNameTo enter the user name of the customer.The text “Enter your user name” should be displayed by default in the text box. When the user starts entering the value, this text should disappear
PasswordpasswordTo enter the password of the customer. The text “Enter the password” should be displayed by default in the text box.
At present when the password is entered the text is visible.  Make the necessary changes so that the text entered for password  is masked.Password can contain alphabets, numbers and underscore. It should  contain a minimum of 8 and a maximum of 15 characters. 
Remember merememberMeThis component is a check box.Make the necessary changes to change this radio button to a check box.
Sign Insubmit 
Clearreset 

Note:

1. The heading should be done using <h1> tag with the text : “ZEN BANK – LOGIN”. 

2. Do not change the given template.  Write necessary code only in the provided places.

Sample Webpage:

Quiz for Exam - ZEN Bank - Login
Quiz for Exam – ZEN Bank – Login

On providing the values the web page should look as follows :

Quiz for Exam - ZEN Bank - Login 1
Quiz for Exam – ZEN Bank – Login 1

Code:

login.html

<!doctype html>
<html>
    <style>
        body{
            background-color:#00FFFF;
        }
        h1{
            color:#DD77FF;
            text-align:center;
        }
    </style>
    <body>
        <h1> ZEN BANK - LOGIN</h1>
        User Name<input type="text" name="userName" placeholder="Enter your user name" required><br>
        <p>Password:<input type="password" name="password" pattern="[a-zA-Z0-9_]{8,15}" placeholder="Enter the password" minlength=8 maxlength="15" autocomplete="off" required></p><br>
        <input type="checkbox" name="rememberMe">Remember me<br>
        <input type="submit" name=submit value="Sign In">
        <input type="reset" name=reset value="Clear">
        
        
    
    </body>
</html>

Recommended:

Leave a Comment

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