HTML input types, explained.

All 22 input types

A type the browser does not recognise falls back to text, so a newer type never breaks a form in an older browser: visitors just get a plain text box.

Form fields that are not inputs

• <textarea> for text longer than one line, such as the message itself.
• <select> for one choice from a long list.
• <button> for buttons. It is easier to style than an input button and can contain icons.
• <label> and <fieldset> name and group the fields.

Choosing the right type

The right type gives visitors the right keyboard on their phone, lets the browser fill in saved details, and catches simple mistakes before the form is sent. A few choices trip people up:

• Phone numbers use tel, not number. A number input rejects spaces and the +, and adds arrows.
• Codes and postcodes use text with inputmode="numeric" if they are digits only, so leading zeros survive.
• Dates use date when visitors pick a day, but a plain text field is often easier for a date far in the past, such as a date of birth.
• range hides the exact number. Use it when an approximate value is fine, and show the current value next to it if it matters.

<label for="start">Preferred start date</label>
<input id="start" type="date" name="start_date" min="2026-01-01" />

<label for="budget">Budget</label>
<input id="budget" type="range" name="budget" min="1000" max="20000" step="1000" />

Attributes every input shares

• name: the key the value is sent under. An input without a name is not sent.
• id: what a label’s for connects to.
• value: the starting value, or the value a checkbox or radio button sends.
• required: must be filled in before the form will send.
• disabled: cannot be used, and is not sent. readonly: cannot be changed, but is still sent.
• autocomplete: tells the browser which saved detail fits, such as name, email or tel.
• placeholder: an example shown while the field is empty. It is not a label.

For the checks the browser runs with these, see HTML form validation.

A form that sends

This enquiry form uses six of the field types above and posts to Heartdove, which saves every message, emails you an alert and tracks it until it is delivered or bounces. Every field arrives as text under a readable version of its name, such as “Start date: 2026-12-01”. Heartdove accepts text fields only, so leave file inputs out; up to 50 fields, each up to 10,000 characters.

<form action="https://submit.heartdove.com/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="subject" value="Project enquiry" />

  <label for="name">Name</label>
  <input id="name" type="text" name="name" autocomplete="name" required />

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

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

  <label for="website">Current website (optional)</label>
  <input id="website" type="url" name="website" placeholder="https://" />

  <label for="start">Preferred start date</label>
  <input id="start" type="date" name="start_date" />

  <label for="message">Project details</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input type="checkbox" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" />
  <button type="submit">Send enquiry</button>
</form>

Replace YOUR_ACCESS_KEY with your key from a free Heartdove form, or build a form from these field types in the contact form generator.

Questions

Keep reading

• The HTML email input
• The HTML phone input
• The HTML checkbox
• Form action and method