All TalkersCode Topics

Follow TalkersCode On Social Media

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

HTML Code For Registration Form

Last Updated : Mar 11, 2024

HTML Code For Registration Form

In this tutorial we will show you the solution of HTML code for registration form, a registration form is a form that is used to register someone or user to website. And after registration a user id is provided to user for login in website.

You can understand this with help of student’s registration in school or college. When students complete his/her registration from website.

An id with password is assigned to him from institute. So, that he able to login in official website and uses benefits provided by institute online.

Step By Step Guide On HTML Code For Registration Form :-

Now, here we are going to create a registration form in html. For this you must have basic knowledge of html and css.

Now, let us understand how to create a registration form in html. Here, below we show you an example in html with the help of which you are able to create a registration form.

The page is now only for design or say to display, data filled in this is not saved to database for this instance.

<!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>
    <script src="js/jquery.js"></script>
    <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.
  5. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  6. Here, we create a registration form with the help of form tag and method used is post. And in form we create some divisions to give it better look.
  7. Under first div we create labels whereas in second div, we create input tags. After this we create a div in which we create a submit button.
  8. Rest job is done with the help of css. We hope that you understand html and css.
  9. The css is written in external file which is linked to html file with the help of link tag in head section.
  10. 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, here we use some css also.

You can customize this form according to you, this is only for demo purpose. I hope this tutorial on HTML code for registration form helps you.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪