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>
            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>
              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>
              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.