Hey there! Today, I want to share with you my experience in creating a login page using HTML, CSS, and JavaScript. This is a fundamental feature for any website or web application that requires user authentication. So, let’s dive right in!
HTML Structure
The first step in creating a login page is to set up the basic HTML structure. We’ll start by creating a form that contains input fields for the username and password. Here’s an example:
<form>
<div class="container">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<input type="submit" value="Log In">
</form>
In the above code, we have a form element that wraps around the input fields and the submit button. The input fields have unique IDs and names, which are important for accessing their values using JavaScript later on. The “required” attribute ensures that the fields cannot be left empty.
CSS Styling
Now that we have the basic HTML structure, let’s add some style to our login page. CSS allows us to customize the appearance of our elements. Here’s an example of CSS code that you can use:
.container {
display: flex;
flex-direction: column;
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}<br>
label {
font-weight: bold;
}<br>
input[type="text"],
input[type="password"] {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}<br>
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}<br>
In the above code, we define CSS rules for the “container” class, labels, and input fields. We use flexbox to arrange the input fields in a column and center them in the container. The background color, padding, border, and border-radius properties are used to enhance the visual appeal of the login form.
JavaScript Validation
Now that our login page looks great, let’s add some JavaScript code to validate the user input. We want to ensure that the username and password fields are not empty before submitting the form. Here’s an example of JavaScript code that you can use:
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
if (username.trim() === '' || password.trim() === '') {
event.preventDefault();
alert('Username and password cannot be empty!');
}
else {
alert('Login successful!');
}
});
In the above code, we select the form element and attach an event listener to it for the ‘submit’ event. When the form is submitted, we retrieve the values of the username and password fields using their respective IDs. We then check if either field is empty using the trim() function, which removes any leading or trailing whitespace. If either field is empty, we prevent the form from submitting and display an alert message. Otherwise, we display an alert indicating a successful login.
Conclusion
Congratulations! You’ve successfully created a login page using HTML, CSS, and JavaScript. We started by setting up the HTML structure for the form, added some CSS styling to make it visually appealing, and implemented JavaScript validation to ensure that the user input is valid. With this knowledge, you can now create secure login pages for your websites or web applications.
If you want to take your login page further, you can explore features like password hashing, user authentication, and session management. Remember, security should always be a top priority when dealing with user authentication.
Feel free to check out my example login page to see the final result in action. Good luck with your coding journey!
