Post
Ask Question

HTML For Beginners: Part 4

Introduction

 
In my "HTML For Beginners: Part 3" I provided an introduction to HTML and explained HTML tables and HTML lists.
 
In this, the fourth part of the HTML beginners series, we will cover the following topics: 
  • Form Element
  • Form Controls 

Form

 
Forms are the essential and inevitable component of any web application and web site. HTML Forms are one of the main points of interaction between a user and a website.  Forms allow the collection of data from the site visitors. For example, If you want to collect information from the user during registration like Name, Email, Address, Password, Address, Mobile Number, age and so on then a form is used.
 
A form takes input from the site visitor and posts that information to the back end server or back end application.
 
The <form> element defines an HTML Form.
  1. <form>    
  2.    <!--Form Elements-->    
  3. </form>  
A HTML <form> contains form elements. There is various types of elements available, like text fields, textarea, password fields, email fields, drop-down, checkbox, radio button, buttons and so on.
 
In the HTML <form> element we will discuss the following controls:
  1. Input type Control
  2. Textarea
  3. Select Control
  4. Button Control
Input Control: In HTML, to get input from users, we have various input controls. In HTML we have the following input controls:
  • Text (Single Line)
  • Password
  • Submit
  • Reset
  • Button
  • Email
  • URL
  • Color
  • Search
  • Radio
  • Checkbox
Text: This provides a single line of text in HTML.
 
Syntax
  1. <input type="text"/>   
Example
  1. <form>    
  2. First Name:<input type="text"><br/><br/>    
  3. Last Name:<input type="text">    
  4. </form>   
    Output
     
      
    Password: The input type password defines a password input control in an HTML document.
     
    Syntax
    1. <input type="password">  
    Example
    1. <form>    
    2.   First Name:<input type="text"><br/><br/>    
    3.   Last Name:<input type="text"><br/><br/>    
    4.   Password:<input type="password"><br/><br/>    
    5. </form>   
      Output
       
       
      Submit: The submit defines a button for submitting form input to a form handler. The form handler is a script and that script processes the data to the server. 
       
      Syntax
       
       
      Example
      1. <form>      
      2.   First Name:<input type="text"><br/><br/>      
      3.   Last Name:<input type="text"><br/><br/>      
      4.   Password:<input type="password"><br/><br/>      
      5.   <input type="submit" Value="Click Here to Submit"/>    
      6. </form>   
        Output
         
         
        If we look at the preceding code when we click on the button the form is submitted and the data is cleared. We will discuss later where the data is actually going.
         
        Reset: The reset type defines a button that can reset the form or reset all the values of the form to their default values.
         
        Example
        1. <form>        
        2.   First Name:<input type="text"><br/><br/>        
        3.   Last Name:<input type="text"><br/><br/>        
        4.   Password:<input type="password"><br/><br/>        
        5.   <input type="submit" Value="Click Here to Submit"/>      
        6.   <input type="reset"/>    
        7. </form>     
          Output
           
           
          Button: This defines a button, a simple button that is neither used for submitting the form nor used to reset the form. 
           
          Example
           
           
          Email: Email defines a TextBox to enter an email address. The email attribute is an essential attribute that is mainly used in the registration and login process in web pages. The email input type provides validation for an email address entered by the user, so there is no need for JavaScript validation. Mainly the browser will expect a user input that matches the syntax of an email address.
           
          Example
          1. <form>          
          2.   <h2>Subscribe  Me</h2>    
          3.   Email:<input type="Email"/>    
          4.   <input type="submit" value="Subscribe"/>    
          5. </form>      
            Output
             
             
            URL: The URL input element only expects a URL and validates the URL.
             
            Example
             
             
            Color: The color input type is quite self-explanatory, it allows users to select the color. When the user selects a color then it returns the hex value of the color. This color input type is the same as a color picker; we can use this to pick the color.
            1. <form>      
            2.         <label for="color1">What is your favorite color:</label>      
            3.         <input type="color" name="color1" id="color1" />      
            4. </form> 
            Output
             
            Initially when the page is loaded, by default the selected color will be black as in the following:
             
             
            When you click on the color box then:
             
              
             After picking a color:
             
             
             
            Search: The search type is used for the search field. This search field behaves the same as a regular text field.
             
            Example
            1. <form>      
            2.         <label for="search1">Search:</label>      
            3.         <input type="search" name="search1" id="search1" />      
            4.         <input type="submit" />      
            5.     </form>   
            Output
             
            Initially when the page is loaded:
             
             
            When some input provided in the search field:
             
             
            You can more learn about input types of HTML by clicking the  link: HTML 5 input types 
             
            Radio: Radio is used to define a Radio Button in HTML page. By using a Radio Button the user can select only one of the specified choices. So you need to define the same name for all the Radio Buttons in a group.
            1. <form>    
            2. <input type="radio" name="sex" value="M" checked>Male    
            3. <br>    
            4. <input type="radio" name="sex" value="F">Female    
            5. <br><br>    
            6. <input type="submit">    
            7. </form>  
            Output
             
             
             
            Checkbox: This defines checkboxes in a page. Using a checkbox you can select multiple choices.
            1. <form>    
            2. <h2>What you want to eat?</h2>    
            3.     
            4. <input type="checkbox" name="fruit" value="Apple">Apple    
            5. <br>    
            6. <input type="checkbox" name="fruit" value="Banana">Banana    
            7. <br>    
            8. <input type="checkbox" name="fruit" value="Papaya">Papaya    
            9. <br><br>    
            10. <input type="submit">    
            11. </form>   
            Output
             
             
            Textarea
             
            A Text Area tag defines multi-line text input control. It can hold an unlimited number of characters. But you can specify your maximum limit of characters using maxlength attribute. The size of a textarea can be defined by using the rows and cols attribute.
             
            Example
            1. <form>          
            2.    Address:<br><textarea maxlength="50" rows="4" cols="30"></textarea>    
            3. </form>  
            Output
             
             
            Select Control: The <select> tag is for drawing a drop-down list. Inside the select tag, the <option> tag defines the options inside the drop-down list.
             
            Example
              1. <!DOCTYPE html>    
              2. <html>    
              3. <body>    
              4. Select Country    
              5. <select>    
              6.   <option value="India">India</option>    
              7.   <option value="Pakisthan">Pakisthan</option>    
              8.   <option value="USA">USA</option>    
              9.   <option value="UK">UK</option>    
              10.   <option value="Nepal">Nepal</option>    
              11.   <option value="China">China</option>      
              12. </select>    
              13.       
              14. </body>    
              15. </html>   
              Output 
               
               
              Multiple attributes in select: If you want to select multiple items, like in a listbox, then you can do that using multiple attributes of a form tag as in the following:
              1. <!DOCTYPE html>      
              2. <html>      
              3. <body>      
              4. Select Country      
              5. <select multiple>      
              6.   <option value="India">India</option>      
              7.   <option value="Pakisthan">Pakisthan</option>      
              8.   <option value="USA">USA</option>      
              9.   <option value="UK">UK</option>      
              10.   <option value="Nepal">Nepal</option>      
              11.   <option value="China">China</option>        
              12. </select>      
              13.         
              14. </body>      
              15. </html>   
              Output
               
               

              Summary

              • A Form tag is an HTML Form and is one of the main points of interaction between a user and a website.
              • An HTML form tag contains many controls, like TextBox, password, email, select and so on.
              In the next part of the series you will learn more about forms. 


              Similar Articles