HTML Registration Form – Easy Step by Step

    html registration form

    HTML is a makeup language and it is a standard code which we use to make HTML registration form pages. HTML is a very easy and simple language you can learn it easily and can make HTML form.

    HTML is not a case sensitive language. If you know programming then HTML is a chinch for you. Those who are beginners and do not know anything about programming need not to worry, here we are going to make HTML easier for you.

    We are going to explain HTML registration form code with simple example HTML & CSS by which you can better understand all the concepts of HTML. After learning these examples you will be able to write basic HTML codes and you can easily make simple and short sign up form html pages.

    Here we are going to make a simple web page for the HTML register page.

    In this tutorial we will create a student registration form HTML. We are going to develop the HTML sign up HTML code page.

    Let’s start learning:

     Step 1: Select a HTML code editor.

    Some  HTML code editors are available .To write your HTML code we will choose one HTML code editor.

    Here is a list of some HTML  code editors:

    • Sublime Text
    • Notepad ++ 

    These all editors are easy to use , work fast, no special skills are required you can easily and quickly design a HTML Code for registration form web page.

    Step 2: Develop a new HTML file using extension .HTML 

    Once you write the complete HTML code you need to save that HTML document with extension .html. It is very easy to save the HTML file.

    If you are using notepad++ go to file then choose new then type code then again click on file choose save option. 

    Now you can type your file name with .html extension.

    This extension will tell your operating system that the file which you have saved is a html file. You can save the HTML file before or after writing the complete code.

     Step 3: Start writing the HTML code

    For this example:[register_page.html]

    <!DOCTYPE html>  Tag : Start with this tag it is a document type declaration and it lets the browser know the flavor of HTML5.

    <head> Tag :  The second tag which we will write is  it includes <title> Tag within it,the text within the head will not be displayed on the webpage and it will be used for search engine optimization.

    <title> Tag :  tag is used to display contents on title bar, <head> and <title> are container tags so we need to end these tags by writing </title> .

    <body> Tag :  After these we will write < body > tag this tag includes all content which is to be developed in the web browser, it also has end tag </body >, most of the tags are included in < body > .

    <form> Tag :  After the <body> tag we will write <form> to make a html code for student registration form. It also has an end tag </form>. it is a must to end all the paired or container tags.

    
    

    Here is the code for HTML registration form:

    <!DOCTYPE html>  
    
    <html>  
    
        <head>  
    
            <title> HTML registration form Code </title>  
    
        </head>  
    
        <body>  
    
            <h1> HTML registration form </h1>  
    
            <form>  
    
                <table> 
    
                   <tr>  
    
                        <td>                        
    
                            Enter Your Name Here:                    
    
                        </td>  
    
                        <td>                                
    
                            <input type=”text”  name=”name”>                    
    
                        </td>  
    
                    </tr>  
    
     
    
                    <tr>  
    
                        <td>                        
    
                            Enter Your Email Address Here:                    
    
                        </td>  
    
                        <td>                                
    
                            <input type=”email”  name=”email_name”>                    
    
                        </td>  
    
                    </tr>  
    
                    <tr>  
    
                        <td>                                
    
                            Password Insert:                  
    
                        </td>  
    
                        <td>                                
    
                            <input type=”password” name=”password_name”>                    
    
                        </td>  
    
                    </tr>  
    
                </table>  
    
            </form>  
    
        </body>  
    
    </html>

    Here we have used <table> tag to create a table in form to give a better look to our form. 

    Table is made up of rows and columns. <table> is also a container tag. The tags which we use to create a complete table is <tr>, <td>,<th>.<tr> is table row and it creates each row of table.<td> is a table tag and it specifies data within the <td> table.<th> is table heading and it is generally used to create first row or heading of the table.

    To make the new HTML field , you need to use html tag<tr> and then end the HTML tag with </tr>. 

    Here we have added just two fields email and password you can add more fields like telephone numbers, city etc.

     Step-4:  Insert HTML placeholders

    Placeholder describes  the expected value which user should enter in the text area.

    For example: placeholder=”enter name”

     

    <!DOCTYPE html>  
    
    <html>  
    
        <head>  
    
            <title> HTML registration form Code </title>  
    
        </head>  
    
        <body>  
    
            <form>  
    
                <table>  
    
                    <tr>  
    
                        <td>  
    
                            Your Email Address Here:  
    
                        </td>  
    
                        <td>  
    
                            <input type=”email”  name=”uEmail” placeholder=”Enter Email”>  
    
                        </td>  
    
                    </tr>  
    
                    <tr>  
    
                        <td>  
    
                            Password Here:  
    
                        </td>  
    
                        <td>  
    
                           <input type=”password” name=”upassword” placeholder=”enter Password” >  
    
                        </td>  
    
                    </tr>  
    
                </table>  
    
            </form>  
    
        </body>  
    
    </html>

     

    Step 6 : Insert Buttons in the HTML form

    Now we will add two buttons in our HTML registration form, one is submit button and another is reset button to add these buttons we need to embed the following code in between <table> and </table> tag.

    A submit button is used to send a form data to a server for processing and reset button resets the values of the form to its original states.

     Here is the final code for student registration form in html :

     

    <!DOCTYPE html>  
    
    <html>  
    
        <head>  
    
            <title>HTML registration form Code </title>  
    
        </head>  
    
        <body>  
    
            <h1> HTML registration form code </h1>  
    
            <form>  
    
                <table>  
    
                    <tr>  
    
                        <td>                        
    
                            Enter Your Name Here:                    
    
                        </td>  
    
                        <td>                                
    
                            <input type=”text”  name=”name”>                    
    
                        </td>  
    
                    </tr>  
                    <tr>  
    
                        <td>  
    
                            Your Email Address Here:  
    
                        </td>  
    
                        <td>  
    
                            <input type=”email”  name=”uemail” placeholder=”Your Email” >  
    
                        </td>  
    
                    </tr>  
    
                    <tr>  
    
                        <td>  
    
                            Your Password Here:  
    
                        </td>  
    
                        <td>  
    
                            <input type=”password” name=”upassword” placeholder=”Your Password”>  
    
                        </td>  
    
                    </tr>  
    
                </table>  
    
                <br>  
    
                <input type=submit value=submit>  
    
                <input type=reset value=reset>  
    
            </form>  
    
        </body>  
    
    </html>

    Learn More: UI Developer Interview Questions and Answers