← Forms (Most Important for Interviews)

HTML Forms and Controls

Constructing interactive input controls for forms and validation.

HTML forms are used to collect user input. The input is most often sent to a server for processing.

Essential Form Controls

  • <form>: Declares the input submission boundaries.
  • <input>: Single line input field.
  • <label>: Defines user-friendly labels linked to form inputs.
  • <textarea>: Multi-line text entry block.
  • <select>: Dropdown choice lists.
  • <option>: Values inside select dropdowns.
  • <button>: Submission trigger element.
  • placeholder: Temporary hint text inside fields.
  • required: Prevents blank submissions.

Form Example

html
<form>

<label>Name</label>

<input type="text">

<textarea></textarea>

<select>

<option>India</option>

</select>

<button>Submit</button>

</form>

Interview questions

Sign in to save

Why is it important to link a <label> element with an <input> field, and how do you do it?

Linking labels and inputs is vital for accessibility because screen readers read the label aloud when the user focuses on the field. Clicking the label also moves cursor focus directly to the input. Link them by matching the label's `for` attribute with the input's `id` attribute.

Practice

Create a form containing a label for Name, a required text input, and a submit button.

Hint: Set <label for='name'>Name</label> and <input id='name' type='text' required>.