HTML and CSS Project, How To Create an Interactive Sign-up Form

0
251
Sign Form image
Design a sign-up form using html and css.

Web development is crazy, you do lots of interactive stuff to interact and influence the user. Animations, designs had a huge impact on the User’s minds. To achieve a high-level development skill every web developer should start from basics to advanced.

So In this article you gonna do a front-end practice, you can add this sign-up form to your project by advancing its features. You can also add javascript features according to your requirement.

In my previous article, I had listed some of the important HTML tags which every web developer should know – So if you are looking to enhance your coding ability and increase your productivity learn about these tags – 10 Hot HTML Tags to increase your productivity

Why You Need to build an Interactive website?

A website with interactive and decent design can help to gain user’s trust in the brand. On the other hand, attractive and color combinations and animation can help build an emotional connection with the user.

What you gonna create?

Sign-up form is used to get some user data for different purpose.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="form-container">
        <div class="form-content">
            <h2>Sign Up Form</h2>
            <form id="register" method="post">
                <label>First Name:</label>
                <br>
                <input type="text" name="first_name" id="form-input" placeholder="Enter Your First Name">
                <br><br>
                <label>Last Name:</label>
                <br>
                <input type="text" name="Last_name" id="form-input" placeholder="Enter Your Last Name">
                <br><br>
                <lebel>Email:</lebel>
                <br>
                <input type="email" id="form-input" placeholder="Enter Your Email">
                <br><br>
                <lebel>Phone Number:</lebel>
                <br>
                <input type="tel" id="form-input" placeholder="Enter Your Phone Number">
                <br><br>
                <lebel>Country</lebel>
                <br>
                <select id="form-input">
                    <option >India</option>
                    <option >China</option>
                    <option >Pakistan</option>
                    <option >Bangladesh</option>
                </select>
                <br><br>
                <input type="submit" id="button">
            </form>
        </div>
    </div>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
}

body{
    background-image: url("ppp.jpg");
    background-size: cover;
}

.form-container{
    width: 400px;
    margin: 110px auto 0px auto;
}

h2{
    text-align: center;
    padding: 20px;
    font-family: 'Courier New', Courier, monospace;
}
.form-content{
    background-color: rgba(0, 0, 0, 0.45);
    width: 100%;
    font-size: 20px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.35);
    color: white;
}
#register{
    margin: 10px 40px;
}

label{
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
}
#form-input{
    width: 300px;
    border: 1px solid black;
    border-radius: 4px;
    padding: 9px;
    background-color: white;
}
#button{
    width: 180px;
    padding: 10px;
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    border: 1px solid black;
    border-radius: 4px;
}

This is a good small project to practice web development and to get more familiarize with HTML and CSS. The only way to master web development is to practice what you learn. Are you looking for some best coding challenges websites? In one of my articles, I had listed some of the best ones – 14 best Coding Challenges platform to increase productivity

Conclusion

The above-mentioned code can help you learn different HTML tags, Elements, and CSS. The best approach is to try it first by yourself if you stuck anywhere then see the code. If you still facing any issue that’s common, clear your doubts in the comment section we will definitely love to help you.

LEAVE A REPLY

Please enter your comment!
Please enter your name here