HTML form elements

HTML form elements for accessible, useful forms.

Choose the right control, connect it to a clear label, and validate the data before it reaches your form backend. Use the generators and guides below as practical starting points.

Field reference

Build each field with intent.

Every control affects completion, accessibility, validation, and the shape of the submission your workflow receives.

Input fields

Use semantic input types for names, email addresses, phones, URLs, dates, numbers, search, and passwords. The type sets browser behavior; the name sets the key submitted to your form endpoint.

<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required />

Textarea fields

Choose textarea for messages, feedback, support details, and project briefs. Set rows for a useful starting height, use maxlength for a clear boundary, and always give the control a name.

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" maxlength="2000" required></textarea>

Select menus

Use select when a visitor chooses from a known list and radio buttons would take too much space. Start with an empty prompt for required fields and use stable machine values for each option.

<label for="topic">Topic</label>
<select id="topic" name="topic" required>
  <option value="">Choose a topic</option>
  <option value="sales">Sales</option>
</select>

Radio buttons

Radio buttons are for one answer from a short list. Keep one name across the group, give every option a distinct value, and use fieldset and legend so the question stays available to assistive technology.

<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email" required /> Email</label>
  <label><input type="radio" name="contact" value="phone" /> Phone</label>
</fieldset>

Checkboxes

Checkboxes represent independent choices, such as interests, product preferences, or consent. Use a shared fieldset for a related group and make a required consent checkbox separate from optional preferences.

<fieldset>
  <legend>Topics to receive</legend>
  <label><input type="checkbox" name="topics[]" value="product" /> Product updates</label>
  <label><input type="checkbox" name="topics[]" value="security" /> Security notices</label>
</fieldset>

Labels and grouping

A visible label tells people what a field means and gives screen readers its accessible name. Match label for to an input id, and use fieldset plus legend for radio or checkbox questions.

<label for="company">Company</label>
<input id="company" name="company" autocomplete="organization" />

<fieldset>
  <legend>Choose a plan</legend>
  <!-- related controls -->
</fieldset>

Validation

HTML validation gives fast feedback with required, type, minlength, maxlength, min, max, and pattern. Treat it as a usability layer, then repeat validation at the endpoint because browser checks are not a security boundary.

<label for="website">Website</label>
<input id="website" name="website" type="url"
  minlength="10" maxlength="2048" required />

Autocomplete hints

Autocomplete tokens help browsers fill known user data accurately, especially on mobile. Use tokens such as name, email, tel, organization, and street-address when the field collects that value.

<label for="full-name">Full name</label>
<input id="full-name" name="full_name"
  autocomplete="name" required />

<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" />