Loading

Form Element

  • This is the container for the form. It has attributes like action and method.
  • It provides various interactive controls for submitting information to web servers such as text field, text area, password field, etc. 
  • The action attribute specifies the URL where the form data will be submitted, and the method attribute specifies the HTTP method (e.g., "post" or "get").

Syntax:

<form>  
//Form elements  
</form> 

Common HTML Form Tags

Form:

  • This is the container for the form. It has attributes like action and method. The action attribute specifies the URL where the form data will be submitted, and the method attribute specifies the HTTP method (e.g., "post" or "get").
       <form action="/submit_form" method="post">
            <!-- body here -->
        </form>

<input>:

  • These are used to collect different types of user input. Common types include text (<input type="text">), password (<input type="password">), checkboxes (<input type="checkbox">), radio buttons (<input type="radio">), etc.
 <input type="text" id="name" name="name" placeholder="Your name..">

<textarea>:

  • In HTML, the <textarea> element is used to create a multiline text input field within a form.
<textarea id="message" name="message" placeholder="Write something.." style="height:200px"></textarea>

<label>

  • In HTML forms, the <label> element is used to associate a text label with a form element, such as an input field or textarea
 <label for="name">Name:</label>

<select>:

  • In HTML forms, the <select> element is used to create a dropdown list, allowing users to choose an option from a list of predefined values. 
<select name="Fruits" id="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="kiwi">Kiwi</option>
</select>

<option>:

  • In HTML forms, It defines an option in a drop-down list.
  <option value="orange">Orange</option>
  <option value="kiwi">Kiwi</option>

<button>:

  • In HTML forms, the <button> element is used to create a clickable button.
<button type="button">Next</button>

Uses of various HTML Form Elements

Tag                                                                           Description
<form>Used as HTML form for user input
<input>Used as input control
<textarea>Used as multiline input control (text area)
<label>Used as a label for an <input> element
<fieldset>Groups related elements in a form
<legend>Used as a caption for a <fieldset> element
<select>Used as a drop-down list
<optgroup>Used as a group of related options in a drop-down list
<option>Used as an option in a drop-down list
<button>Used as a clickable button
<datalist>Specifies a list of pre-defined options for input controls
<output>Defines the result of a calculation