All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Registration Form In HTML With CSS Source Code

Last Updated : Mar 11, 2024

Registration Form In HTML With CSS Source Code

In this tutorial we will show you the solution of registration form in HTML with CSS source code and we will learn about how to create a registration form in HTML with the help of CSS source code.

The registration form is created with the help of html tags or codes whereas its styling is done with the help of CSS.

You can create any CSS file means that CSS used here can be inline, internal or may be external.

Here, below we use external CSS. Now, let us understand how we are able to create registration form in html with css codes.

Step By Step Guide On Registration Form In HTML With CSS Source Code :-

Now, here below we are going to show you an example in html code and after this there is a CSS file. The CSS file is linked with html file with the help of link tag that is used inside link tag. Now, let us understand codes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div class="inner">
            <div class="welcome">
                Registration Form
            </div>
            <div class="registration_options">
                <form action="" method="post">
                    <div class="rleft_body">
                        <label for="">
                            Enter your name here
                        </label>
                        <br>
                        <label for="">
                            Enter your email here
                        </label>
                        <br>
                        <label for="">
                            Enter your password here
                        </label>
                        <br>
                        <label for="">
                            Enter password again here
                        </label>
                    </div>
                    <div class="rright_body">
                        <input type="text" name="username" id="">
                        <br><br>
                        <input type="email" name="email" id="">
                        <br><br>
                        <input type="password" name="password" id="">
                        <br><br>
                        <input type="text" name="cpassword" id="">
                    </div>
                    <div class="registration_submit">
                        <input type="submit" value="Save" id="save" name="button">
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

CSS file: style.css

.main{
    height: auto;
    width: 100%;
}
.inner{
    width: 80%;
    height: 580px;
    border: 1px solid white;
    box-shadow: 0 0 10px black;
    margin: 30px auto 30px auto;
}
.welcome{
    text-align: center;
    padding: 20px;
    font-size: 40px;
    font-family: cursive;
    border-bottom: 1px solid black;
    background-color: black;
    color: white;
}
.rleft_body
{
    width: 50%;
    float: left;
    margin-top: 90px;
}
.rleft_body label
{
    font-size: 20px;
    font-style: oblique;
    padding: 150px;
    line-height: 2.5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.rright_body{
    width: 50%;
    float: left;
    margin-top: 100px;
}
.rright_body input{
    font-size: 20px;
    font-style: oblique;
    width: 80%;
    border: none;
    border-bottom: 1px solid black;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.registration_submit{
    clear: both;
    height: auto;
    text-align: center;
}
#save{
    font-size: 25px;
    background-color: black;
    color: white;
    padding: 5px 35px 5px 35px ;
    border: none;
    margin-top: 80px;
}
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page.
  4. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Here, we create a registration form with the help of form tag and method used is post.
  6. Here, we create two divisions, first one is for labels whereas the next one is for inputs. After this we create a div for submit button.
  7. The full page is created in html but styled with the help of css. The css file is also given along with html code. We hope that you understand the codes properly.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that with the help of this article you are able to create a registration form in html with the help of CSS.

In next session, we will show how you are able to save data filled in registration from with help of database. I hope this tutorial on registration form in HTML with CSS source code helps you.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪