Understanding Form Elements and Controls

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 are various type 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 a 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: URL input element only expects an 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 search field: 
 
 
You can more learn about input types of HTML by clicking the following link:
 
Radio: Radio is used to define a Radio Button in HTML page. By using a Radio Button the user can select only one of 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
 
 the
Checkbox: This defines checkboxs 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 attribute 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 a HTML Form and is one of the main points of interaction between a user and a website.
  • A HTML form tag contains many controls, like TextBox, password, email, select and so on.
In the next part of series you will learn more about forms. 
Author
Praveen Moosad
Praveen Moosad
Admin 48.3k 8.4m