Creating a Stylish Login Form

 Creating a Stylish Login Form with "Forgot Password" and "Create New Account" Options

In today's digital age, user authentication is a crucial aspect of web development. A well-designed login form not only enhances the user experience but also ensures secure access to your application. In this tutorial, we'll walk you through creating a stylish login form with "Forgot Password" and "Create New Account" options using HTML and CSS.




Step 1: Setting Up the HTML Structure

First, let's create the basic HTML structure for our login form. We'll include input fields for the username and password, as well as links for "Forgot Password" and "Create New Account".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form action="#" method="POST">
            <div class="input-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
            <div class="links">
                <a href="#">Forgot Password?</a><br>
                <hr>
                <center style="padding: 10px 0;">
                    <button style="width: 70%;
                         padding: 10px;
                                   background: #42b72a;
                                   border: none;
                                   outline: none;
                                   border-radius: 5px;
                                   color: #fff;
                                  font-size: 15px;"
                                  >Create New Account</button>
                </center>
            </div>
        </form>
    </div>
</body>
</html>


Step 2: Adding Styles with CSS 

Now, let's style our login form using CSS. We'll add some basic styles to make the form look clean and modern.

   <style>
    /* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
}
.login-container {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}
.login-container h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}
.input-group {
    margin-bottom: 15px;
    text-align: left;
}
.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}
.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
button:hover {
    background-color: #45a049;
}
.links {
    margin-top: 15px;
}
.links a {
    text-decoration: none;
    margin: 0 10px;
}
.links a:hover {
    text-decoration: underline;
}
   </style>


Step 3: Enhancing User Experience 

To make the form more interactive and improve user experience, you can add additional features like form validation, transitions, and animations using JavaScript and CSS. However, for simplicity, we'll keep this tutorial focused on HTML and CSS.

Conclusion

By following this tutorial, you've created a stylish and functional login form with options for "Forgot Password" and "Create New Account". This form can serve as a solid foundation for implementing user authentication in your web applications.

Feel free to customize the styles and add more features to suit your needs. Happy coding!



You may like these posts

Post a Comment

Previous Post Next Post