Create a form using HTML and CSS?

Hey, what’s up, guys. If you are learning web development and want some simple webpage code so that you can practice your coding by cloning the webpage, then you are at the right place. In this post, I will create a simple form using HTML and CSS. You first understand this code then try to write the code all by yourself without taking any help and also try to modify the code.

First, let me show you a screenshot of the webpage.

Now that you have seen the webpage. So let’s create this.

First, we will create an HTML file.

simple_html_form.html

<!DOCTYPE html>
<html>
    <head>
        <title>Registration form</title>
        <link rel="stylesheet" href="RegistrationFormCss.css"/>
    </head>

    <body>
        <form>
            <div class="container">
            <h1>Register to unlock all the exciting features</h1>
            <hr>
            <label for="Name"><b>User Name</b></label>
            <input type="text" placeholder="Enter User Name" name="name" id="name" required/>

            <label for="password"><b>Passowrd</b></label>
            <input type="password" placeholder="Enter password" name="password" id="password"/>
            <hr>
            <button type="submit">Submit</button>
            </div>
        </form>
    </body>
</html>

Now I will create CSS file.

RegistrationFormCss.css

body {
    background-color: rgb(255, 255, 255);
}
*{
    box-sizing: border-box;
}
.container{
    margin: auto;
    width: 50%;
    padding: 100px;
    background-color: aliceblue;
    box-shadow: 20px 20px 20px 0px royalblue;
    margin-top: 100px;
}

And that completes our code. Now try to write this code all by yourself and try to modify the code, like you can design the button.

If you have any problem understanding the code then comment below.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: