learn2kode.in

Menu

HTML Tutorial

Menu

HTML Form Controls

Form controls are the interactive elements inside a form that allow users to enter or select information. They appear inside:

Copy Text 
<form> ... </form>

1. <input> Element

The most commonly used form control. Types of <input>

Copy Text 
<input type="text">       <!-- Single-line text -->
<input type="password">   <!-- Hidden characters -->
<input type="email">      <!-- Validates email -->
<input type="number">     <!-- Accepts numbers -->
<input type="date">       <!-- Calendar date picker -->
<input type="file">       <!-- Upload files -->
<input type="checkbox">   <!-- Multiple selection -->
<input type="radio">      <!-- Single selection in group -->
<input type="submit">     <!-- Submit button -->
<input type="reset">      <!-- Reset form -->
<input type="button">     <!-- Normal button -->

Output

2. <textarea>

Used for multi-line text input (e.g., descriptions, comments).

Copy Text 
<textarea rows="4" cols="50"></textarea>

Output

3. <select> + <option>

Dropdown menu.

Copy Text 
<select>
  <option value="india">India</option>
  <option value="usa">USA</option>
  <option value="uk">UK</option>
</select>

Output

4. <button>

More flexible than input buttons.

Copy Text 
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click Me</button>

Output

5. <label>

Describes an input field — improves accessibility.

Clicking the label focuses the input.

Copy Text 
<label for="email">Email:</label>
<input type="email" id="email">

Output

6. <fieldset> + <legend>

Groups related form elements.

Copy Text 
<fieldset>
  <legend>Personal Info</legend>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
</fieldset>

Output

Personal Info

7. <datalist>

Provides suggestions while typing.

Copy Text 
<input list="countries">
<datalist id="countries">
  <option value="India">
  <option value="USA">
  <option value="Japan">
</datalist>

Output

8. <output>

Displays calculation results.

Copy Text 
<form oninput="result.value = a.value * b.value">
  <input type="number" id="a"> ×
  <input type="number" id="b">
  = <output name="result"></output>
</form>

Output

× =

9. <progress>

Shows progress bar.

Copy Text 
<progress value="50" max="100"></progress>

Output

10. <meter>

Represents a known range value (e.g., rating).

Copy Text 
<meter value="6" min="0" max="10"></meter>

Output

Summary Table

Form Control Purpose
<input> Various single-line inputs
<textarea> Multi-line text
<select> Dropdown list
<option> Options inside dropdown
<button> Clickable button
<label> Describes input
<fieldset> Group inputs
<legend> Title of fieldset
<datalist> Suggestion list
<output> Calculation output
<progress> Progress bar
<meter> Range indicator
HTML Input Attributes