HTML Forms and Inputs Interview Questions

On submit, the browser sends name=value pairs for every enabled field that has a name, to the action URL with the method. A field without a name is not sent.

<!DOCTYPE html>
<form action="/signup" method="post">
  <label>Email <input type="email" name="email" value="asha@example.com"></label>
  <label>Nickname <input type="text" value="no name, not sent"></label>
  <button>Sign up</button>
</form>

Press the button: only email is sent. Defaults: method is get and action is the current URL. See the form page.

GET puts form data in the URL; POST puts it in the request body. Use GET for searches and filters that only read, POST for anything that changes data or sends private or large data.

The trap: POST is not more secure, only HTTPS encrypts. HTML forms support only get, post and dialog.

A <label> gives an input its accessible name, so screen readers announce it, and clicking the label focuses or toggles the input.

<!DOCTYPE html>
<p>
  <input type="checkbox" id="terms">
  <label for="terms">I accept the terms (click this text)</label>
</p>
<p>
  <input type="checkbox"> No label: only the tiny box is clickable
</p>
<label>Wrapped label <input type="text" name="city"></label>

Connect them with for and the input's id, or by nesting the input inside the label. A placeholder does not replace a label. See the label page.

HTML5 added email, url, tel, number, range, date, time, color, search and a few more date types.

<!DOCTYPE html>
<style>label { display: block; margin: 6px 0; }</style>
<label>Email <input type="email"></label>
<label>Phone <input type="tel"></label>
<label>Quantity <input type="number" min="1" max="10" value="2"></label>
<label>Volume <input type="range" min="0" max="100"></label>
<label>Date <input type="date"></label>
<label>Color <input type="color" value="#2563eb"></label>

They bring the right control, built-in validation and the right phone keyboard; an unknown type falls back to text. Use tel, not number, for phone numbers. All types are on the input types page.

Radio buttons pick exactly one option from a group; checkboxes are independent. Radios form a group by sharing the same name.

<fieldset>
  <legend>Plan</legend>
  <label><input type="radio" name="plan" value="free" checked> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>
<label><input type="checkbox" name="newsletter" value="yes"> Send me news</label>

An unchecked checkbox sends nothing, and a checked one without a value sends on. Radios with different names are separate groups. See the radio button page.

Attributes like required, type="email", pattern, min, max and minlength make the browser check fields on submit and block it with a message, without JavaScript.

<!DOCTYPE html>
<style>input:user-invalid { outline: 2px solid crimson; }</style>
<form>
  <label>PIN code
    <input name="pin" required pattern="[0-9]{6}" title="Six digits">
  </label>
  <label>Age <input name="age" type="number" min="18" max="99"></label>
  <button>Save</button>
</form>

pattern must match the whole value, and setCustomValidity() adds custom rules. The server must validate again, since anyone can bypass the browser.

A readonly field cannot be edited but is focusable and is submitted. A disabled field cannot be focused and is not submitted.

<!DOCTYPE html>
<form>
  <label>Order id <input name="order" value="A-1042" readonly></label>
  <label>Coupon <input name="coupon" value="SAVE10" disabled></label>
  <button>Submit</button>
</form>

Submit and only order is sent, the classic bug when a field is disabled to stop editing. readonly has no effect on checkboxes, radios or <select>.

submit. A <button> without a type inside a form submits it, so a "Cancel" or "Show password" button sends the form by accident. Write type="button" for buttons that run JavaScript.

<form>
  <input name="q">
  <button type="button" onclick="this.form.reset()">Clear</button>
  <button type="submit">Search</button>
</form>

A <select> restricts the user to its options. A <datalist> only suggests values for a text input; the user can type anything.

<!DOCTYPE html>
<label>Course
  <select name="course">
    <option value="html">HTML</option>
    <option value="css" selected>CSS</option>
  </select>
</label>
<label>City
  <input name="city" list="cities" placeholder="Type or pick">
</label>
<datalist id="cities">
  <option value="Bengaluru"></option>
  <option value="Hyderabad"></option>
  <option value="Pune"></option>
</datalist>

Use <select> when only listed values are valid and <datalist> for autocomplete with free input.

An <input type="file"> and, on the form, method="post" with enctype="multipart/form-data". With the default encoding only the file name is sent, not its contents.

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="resume" accept=".pdf,application/pdf">
  <input type="file" name="photos" accept="image/*" multiple>
  <button>Upload</button>
</form>

accept only filters the file picker, so the server must still check type and size.

autocomplete tells the browser what a field holds (email, tel, postal-code, current-password, new-password, one-time-code) so autofill and password managers fill it correctly.

<input name="email" type="email" autocomplete="email">
<input name="password" type="password" autocomplete="current-password">
<input name="otp" inputmode="numeric" autocomplete="one-time-code">

Browsers may ignore autocomplete="off" on login fields on purpose, because blocking password managers pushes users toward weak passwords.