HTML Login Form
In an HTML login form, you typically collect information from users to authenticate and grant access to a restricted area or user-specific content. Here’s a breakdown of the common information collected in an HTML login form:
- Username or Email: This field is used to collect the user’s username or email address, which serves as their identification.
- Password: The password field is used to collect the user’s password. It is typically masked to hide the entered characters for security purposes.
- Remember Me: This is an optional checkbox that allows users to choose whether they want the browser to remember their login credentials for future visits.
- Sign In or Login Button: The sign-in or login button triggers the submission of the form and initiates the authentication process.
Here’s an example of an HTML login form that includes input fields for username and password:
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
.login-form {
max-width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
.login-form h2 {
text-align: center;
}
.login-form input[type="text"],
.login-form input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}
.login-form button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.login-form button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>In the above example, we create a simple login form with a title, username input field, password input field, and a login button. The form is enclosed within a <div> element with a class of “login-form” for styling purposes.
CSS styles are added within the <style> tag to define the appearance of the form. The .login-form class sets the width, margin, padding, and border properties to create a centered and bordered login form. The input fields and button are styled to have appropriate widths, padding, and colors.
The required attribute is added to the input fields to make them mandatory, ensuring that the user enters values before submitting the form.
When the user clicks the login button or presses the Enter key within the form, the form will be submitted. You can add server-side or client-side code to handle the form submission and perform necessary actions, such as validating the credentials and redirecting the user to the appropriate page.