HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing. There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

Syntax:

<form>
.
form elements
.
</form>
    

HTML Form Attributes:

• The Action Attribute: The action attribute defines the action to be performed when the form is submitted. Usually, the form data is sent to a file on the server when the user clicks on the submit button.

  
  <form action="script">
              

• The Target Attribute: The target attribute specifies where to display the response that is received after submitting the form. It takes values like _blank, _self, _parent, etc.

  
  <form action="script" target="blank">
              

• The Method Attribute: Method to be used to upload data. The most frequently used are GET and POST methods. The form-data can be sent as URL variables (with method="get") or as an HTTP post transaction (with method="post"). The default HTTP method when submitting form data is GET.

  
  <form action="script" method="post">
              

• The Autocomplete Attribute: The autocomplete attribute specifies whether a form should have autocomplete on or off. When autocomplete is on, the browser automatically completes values based on values that the user has entered before.

  
  <form action="script" autocomplete="on">
              

The HTML <form> Elements:

• The <input> Element: One of the most used form elements is the <input> element.

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

• The <label> Element: The <label> element defines a label for several form elements. It is useful for screen-reader users and helps users who have difficulty clicking on small regions.

  
  <label for="fname">First name : </label>
  <input type="text" id="fname" name="fname">
              

• The <select> Element: The <select> element defines a drop-down list.

  
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
  </select>
              

• The <textarea> Element: The <textarea> tag is used to insert multiple-line text in a form.

  
  <textarea rows="2" cols="20"></textarea>
              

• The <button> Element: The <button> element defines a clickable button.

  
  <button onclick="alert('Hello World!')">Click Me!</button>
              

• The <fieldset> and <legend> Elements: The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element.

  
  <form>
      <fieldset>
          <legend>LOGIN</legend>
          form elements
      </fieldset>
  </form>
              

• The <datalist> Element: The <datalist> element specifies a list of pre-defined options for an <input> element.

  
  <input type="text" id="favCktPlayer" list="CktPlayers" name="fav cricket player">
  <datalist id="CktPlayers">
      <option value="Sachin Tendulkar">
      <option value="Brian Lara">
  </datalist>
  <input type="submit">
              

Output:

Submit