ZEN Bank – Login in HTML ~ Multiplex Coder

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 Name	Component Name	Description
User name	userName	To 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.
Password	password	To 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 me	rememberMe	This component is a check box.Make the necessary changes to change this radio button to a check box.
Sign In	submit
Clear	reset

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:

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

CODE:–

<!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>

</body>

</html>

Tags:

ZEN Bank – Login in HTML

Question:

CODE:–

Related Post