HTML | Design Form

What is HTML Form :
HTML Form is a document which stores information of a user on a web server using interactive controls. An HTML form contains different kind of information such as username, password, contact number, email id etc.
The elements used in an HTML form are check box, input box, radio buttons, submit buttons etc. Using these elements the information of an user is submitted on a web server.

The form tag is used to create an HTML form.

Example of an HTML Form :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<body>
  
<form>
  Username:<br>
  <input type="text" name="username">
  <br>
  Email id:<br>
  <input type="text" name="email_id">
  <br><br>
  <input type="submit" value="Submit">
</form> 
  
</body>
</html>

chevron_right






                        filter_none








Output :






        
          
          
          
        

            

Input Element in HTML Forms :


Input Elements are the most common elements which are used in HTML Forms. Various user input fields can be created such as textfield, check box, password field, radio button, submit button etc. The most common input elements are listed below:


    

  1. Text Field in HTML Forms :
    
The text field is a one line input field allowing the user to input text. Text Field input controls are created using the “input” element with a type attribute having value as “text”.
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <h3>Example Of Text Field</h3> 
    

    <body> 
    

        <form> 
    

            <label for="EMAIL ID">Email Id:</label><br> 
    

            <input type="text" name="Email id" id="Email id"> 
    

        </form> 
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    


    2. 

  2. Password Field in HTML Forms :
    
Password fields are a type of text field in which the text entered is masked using asterisk or dots for prevention of user identity from another person who is looking onto the screen. Password Field input controls are created using the “input” element with a type attribute having value as “password”.
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <h3>Example of Password Field</h3>     
    

    <body> 
    

        <form> 
    

            <label for="user-password">Password: 
    

            </label><br> 
    

            <input type="password" name="user-pwd" 
    

                                id="user-password"> 
    

        </form> 
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    


    3. 

  3. Radio Buttons in HTML Form :
    
Radio Buttons are used to let the user select exactly one option from a list of predefined options. Radio Button input controls are created using the “input” element with a type attribute having value as “radio”.

    
        
          
          
          
        
    
            

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <h3>Example of Radio Buttons</h3> 
    

    <body> 
    

        <form> 
    

            SELECT GENDER 
    

            <br> 
    

            <input type="radio" name="gender" id="male"> 
    

            <label for="male">Male</label><br> 
    

            <input type="radio" name="gender" id="female"> 
    

            <label for="female">Female</label> 
    

        </form> 
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    


    4. 

  4. Checkboxes in HTML Form :
    
Checkboxes are used to let the user select one or more options from a pre-defined set of options. Checkbox input controls are created using the “input” element with a type attribute having value as “checkbox”.
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <h3>Example of HTML Checkboxes</h3> 
    

    <body> 
    

        <form> 
    

            <b>SELECT SUBJECTS</b> 
    

            <br> 
    

            <input type="checkbox" name="subject" id="maths"> 
    

            <label for="maths">Maths</label> 
    

            <input type="checkbox" name="subject" id="science"> 
    

            <label for="sceince">Science</label> 
    

            <input type="checkbox" name="subject" id="english"> 
    

            <label for="english">English</label> 
    

        </form> 
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    


    5. 



File select boxes in HTML Forms :


File select boxes are used to allow the user to select a local file and send it as an attachment to the web server.It is similar to a text box with a button which allows the user to browse for a file.Instead of browsing for the file, the path and the name of the file can also be written. File select boxes are created using the “input” element with a type attribute having value as “file”.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<h3>Example of a File Select Box</3>  


    <body> 


    <form> 


        <label for="fileselect">Upload:</label> 


        <input type="file" name="upload" id="fileselect"> 


    </form> 


</body> 


</html> 



















                        chevron_right







                        filter_none








Output :






Text area in an HTML Form :


Text Area is a multiple line text input control which allows user to provide a description or text in multiple lines. A Text Area input control is created using the “textarea” element.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<h3>Example of a Text Area Box</h3>  


<body> 


    <form> 


        <label for="Description">Description:</label> 


        <textarea rows="5" cols="50" name="Description"


                            id="Description"></textarea> 


    </form> 


</body> 


</html> 



















                        chevron_right







                        filter_none








Output :






Select Boxes in HTML Forms :


Select boxes are used to allow users to select one or more than one option from a pull-down list of options. Select boxes are created using two elements which are “select” and “option”.List items are defined within the select element.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<h3>Example of a Select Box</h3>  


<body> 


    <form> 


        <label for="country">Country:</label> 


        <select name="country" id="country"> 


            <option value="India">India</option> 


            <option value="Sri Lanka">Sri Lanka</option> 


            <option value="Australia">Australia</option> 


        </select> 


    </form> 


</body> 


</html> 



















                        chevron_right







                        filter_none








Output :







        
          
          
          
        

            






Reset And Submit Buttons :


The Submit Button allows the user to send the form data to the web server. The Reset Button is used to reset the form data and use the default values.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<h3>Example of a Submit And Reset Button</h3>  


<body> 


    <form action="test.php" method="post" id="users"> 


        <label for="username">Username:</label> 


        <input type="text" name="username" id="Username"> 


        <input type="submit" value="Submit"> 


        <input type="reset" value="Reset"> 


    </form> 


</body> 


</html> 



















                        chevron_right







                        filter_none








Output :








Attributes Used in HTML Forms 




The Action Attribute :

The action to be performed after the submission of the form is decided by the action attribute. Generally, the form data is sent to a webpage on the web server after the user clicks on the submit button.


Example :















                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<h3>Example of a Submit And Reset Button</h3>  


<body> 


    <form action="test.php" method="post" id="users"> 


        <label for="username">Username:</label> 


        <input type="text" name="username" id="Username"> 


        <input type="submit" value="Submit"> 


        <input type="reset" value="Reset"> 


    </form> 


</body> 


</html> 



















                        chevron_right







                        filter_none








If you click the submit button, the form data
would be sent to a page called test.php .


The Target Attribute in HTML Forms :

The Target attribute is used to specify  whether the submitted result will open in the current window, a new tab or on a new frame. The default value used is “self” which results in the form submission in the same window. For making the form result open in a new browser tab, the value should be set to “blank”.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<body> 


  


<form action="/test.php" target="_blank"> 


  Username:<br> 


  <input type="text" name="username"> 


  <br> 


  Password:<br> 


  <input type="password" name="password"> 


  <br><br> 


  <input type="submit" value="Submit"> 


</form>  


  


</body> 


</html> 



















                        chevron_right







                        filter_none








After clicking on the submit button, the result 
will open in a new browser tab.




Name Attribute in Html Forms :

The name attribute is required for each input field. If the name attribute is not specified in an input field then the data of that field would not be sent at all.













                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<body> 


  


<form action="/test.php" target="_blank"> 


  Username:<br> 


  <input type="text"> 


  <br> 


  Password:<br> 


  <input type="password" name="password"> 


  <br><br> 


  <input type="submit" value="Submit"> 


</form>  


  


</body> 


</html> 



















                        chevron_right







                        filter_none








In the above code, after clicking the submit button, the form data will
be sent to a page called /test.php. The data sent would not include the
username input field data since the name attribute is omitted.




The Method Attribute :


It is used to specify the HTTP method used to send data while submitting the form.There are two kinds of HTTP Methods, which are GET and POST.


The GET Method –











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<body> 


  


<form action="/test.php" target="_blank" method="GET"> 


  Username:<br> 


  <input type="text" name="username"> 


  <br> 


  Password:<br> 


  <input type="password" name="password"> 


  <br><br> 


  <input type="submit" value="Submit"> 


</form>  


  


</body> 


</html> 



















                        chevron_right







                        filter_none








In the GET method, after the submission of the form, the form values 
will be visible in the address bar of the new browser tab.




The Post Method –











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<body> 


  


<form action="/test.php" target="_blank" method="post"> 


  Username:<br> 


  <input type="text" name="username"> 


  <br> 


  Password:<br> 


  <input type="password" name="password"> 


  <br><br> 


  <input type="submit" value="Submit"> 


</form>  


  


</body> 


</html> 



















                        chevron_right







                        filter_none










In the post method, after the submission of the form, the form values
will not be visible in the address bar of the new browser tab as it was
visible in the GET method.





          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Shubrodeep Banerjee
I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.