How To Create Sign Up Form Using Html And CSS

Watch now!
In this tutorial we will learn on how to create sign up form using html and css.
STEP 1: ADD HTML CODES
  
<body>
<div class="box">
        <form>
            <h1>Learntechphilloh company</h1>
            Register Now!!
            <h2>Fill in your details here</h2>
            <p><label for="uname">Username</label><br>
            <input type="text" placeholder="Username" required><br><br>
            <label for="email">Email</label><br>
            <input type="text" placeholder="Email Address" required><br>
            <label for="psw">Password</label><br>
            <input type="password" placeholder="********" required><br>
            <label for="psw">Confirm Password</label><br>
            <input type="password" placeholder="********" required><br>
            <button type="submit">Register</button>
            Have an account?<a href="#" style="color: tomato">Login</a>
            </p>
        </form>
        <div class="alert-info" style="display: none;"></div>
    </div>
</body>

After you have added the HTML code it just output a awkward form, to make it look more attractive you will now add the CSS code to make formatting to the whole html form, which is normally added in between <style> tags, which are placed between <head></head> tags of a Html file as follows;

STEP 2: ADD CSS CODE

    <style>
        body{
            background-color: whitesmoke;
        }
        h1{
            color: blue;
        }
        h2{
            color: blueviolet;
            background-color: powderblue;
            font-weight: lighter;
            font-size: 19px;
        }
    .box{
        margin: 0 auto;
        width: auto;
        height: auto;
        padding: 10px;
        background: white;
        border:2px solid whitesmoke;
        box-shadow: 2px 3px 4px whitesmoke;
    }
    button{
            background-color: #3843d8;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            cursor: pointer;
            width: 100%;
        }
        p{
            color: rgb(26, 23, 23);
        }
        input[type=text], input[type=uname],input[type=password]{
            border: 3px solid whitesmoke;
        }
    </style>

Now see the final form after addition of css codes;

Learntechphilloh company

Register Now!!

Fill in your details here










Have an account?Login

With those codes now in your text editor, you will create a very awesome registration form, which you can use to fill in your details or be used by your clients to register to your company, Thanks for reading through my article, see you there in our next tutorial.