Creating a Login Form using HTML
What is a Login Form
A login form is used to enter authentication credentials to access a restricted page or form. The login contains a field for the username and another for password. The user credentials are typically some form of “username” and a matching “password”, and these credentials themselves are sometimes referred to as a login (or logon, sign-in, sign-on).
Why are login forms important?
1. Login forms acts as a security feature for websites containing important documents.
2. Gives users access to some features that is only accessible if the user has an account.
3. Helps to protect user details and information.
4. Gives users a unique identity and login code different from others.
How to create a login form using Html
Creating a login form involves two things that’s the username or email and the password well that’s if the user has already sign up to be able to make use of the login feature. Let’s get started……
Step1: Launch VSCode, create a new folder don’t name it in capital letter.
Step2: Create a new file name it login.html since it’s a login page.
Step3: Press or click on SHIFT+1 and click enter to automatically bring out the html page structure.
<!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>
</head>
<body>
</body>
</html>
Step4: Change the title from document to login if you want.
Step5: Use the <center>/<center> tag.
<center></center>
Step6: Using the <h1>, id tag, form tag, label and form field (input field and input type).
<h1> LOGIN </h1>
<div id=”login-form”>
<form action=”#submissionlink”>
<label for=”Email”> Email</label><br>
<input type=”email” name=”Email” placeholder=”Email” required>
<br><br>(a break line tag)..
<label for=”Password”> Password</label><br>
<input type=”password” name=”Password” placeholder=”Password” required>
<br><br>
<input style=”background-color: red;” type=”submit” value=”Submit”>
</form>
</div>
Reasons why l used <input type=”submit” value=”submit”>
Is because l made the input email and password to be required using button and a inline element <a href=”#link” makes the required feature not to work properly, if you want to check it out could try it out;
<center>
<h1> LOGIN </h1>
<div id=”login-form”>
<form action=”#submissionlink”>
<label for=”Email”> Email</label><br>
<input type=”email” name=”Email” placeholder=”Email” required>
<br><br>
<label for=”Password”> Password</label><br>
<input type=”password” name=”Password” placeholder=”Password” required>
<br><br>
<button type=”submit”><a href=”link”>Submit</a></button>
</form>
</div>
</center>
Learning web development Trust Onyekwere @rad5academy
