TutorialsWeb Designing

Create a Login Form in 5 Minutes

Hi guys. let’s learn how to design a login form under 5 minutes.

Step 1: Create a html and css (css file name should be style.css) file.

Place your html ,css file and an image inside a folder.

Step 2: Add the following code to your HTML file.

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Log in Form | Prolonged Worker</title>
</head>

<body>
  <!-- Content>
</body>

</html>

Step 2: Now add the form code to your HTML page inside the body tag.

 <div class="container">
        <div class="row">
            <div class="col-md-4 col-10 mx-auto form-box">
                <div class="text-center">

                    <h1>Login Form</h1>
                </div>
                <form action="" class="">
                    <div class="form-group">
                        <label for="uname">Username:</label>
                        <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
                    </div>
                    <div class="form-group form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" name="remember" required> Remember Me
                        </label>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-custom">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

Your final code should look like :

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Log in Form | Prolonged Worker</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-10 mx-auto form-box">
                <div class="text-center">

                    <h1>Login Form</h1>
                </div>
                <form action="" class="">
                    <div class="form-group">
                        <label for="uname">Username:</label>
                        <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
                    </div>
                    <div class="form-group form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" name="remember" required> Remember Me
                        </label>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-custom">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

Step 4: Now we will write the custom CSS for your web page.

Now open the css file and write the following css code in it.

body{
    background: url('bg.jpg');
    background-repeat:no-repeat;
    background-size: cover;
    height:100vh;
    padding-top: 30vh;
}
.form-box{
    background-color: rgba(255,255,255,0.7);
    padding:30px 20px;
    color:#000;
    border-radius: 10px;
}
.btn-custom,
.btn-custom:hover
{
    background-color: chocolate;
    color:#fff;
    width:50%;
    border-radius: 20px;
}

@media only screen and (max-width: 600px) {
    body{
        padding-top:150px;
    }
}

Now run the web page on your browser and your form should look like.

HTML Login Form

Congrats! You have created the form! I’d like it if you share this post with your friends and fellows!

Tags

Related Articles

Leave a Reply

Check Also

Close
Back to top button
Close
Close

Adblock Detected

Please whitelist our site from the adblocker to read the content.