HTML Forms & Inputs Cheatsheet

Compact reference for all form elements, input types, and validation attributes.

---

Form Structure

<form action="/submit" method="post" enctype="multipart/form-data" novalidate>
  <fieldset>
    <legend>Personal Info</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">Submit</button>
  </fieldset>
</form>

---

Form Attributes

Attribute	Values	Description
action	URL	Where to send form data
method	get / post	HTTP method
enctype	application/x-www-form-urlencoded / multipart/form-data / text/plain	Encoding when submitting
autocomplete	on / off	Enable/disable autofill
novalidate	(boolean)	Bypass HTML5 validation
target	_self / _blank / _parent / _top	Where to display response

Tip: Use enctype="multipart/form-data" when your form includes <input type="file">.

---

All Input Types

Type	Purpose	Example
text	Single-line text	<input type="text">
email	Email with validation	<input type="email">
password	Masked input	<input type="password">
number	Numeric with spinner	<input type="number" min="1" max="10">
tel	Phone number	<input type="tel">
url	Web address	<input type="url">
search	Search field	<input type="search">
date	Date picker	<input type="date">
time	Time picker	<input type="time">
datetime-local	Date + time	<input type="datetime-local">
month	Month and year	<input type="month">
week	Week number	<input type="week">
color	Colour picker	<input type="color">
range	Slider	<input type="range" min="0" max="100">
file	File upload	<input type="file" accept="image/*">
hidden	Submits invisible data	<input type="hidden" name="id" value="123">
checkbox	Multiple choice (on/off)	<input type="checkbox">
radio	Single choice from group	<input type="radio" name="opt" value="a">
submit	Submits the form	<input type="submit" value="Send">
reset	Resets form to defaults	<input type="reset" value="Clear">
button	Generic button (needs JS)	<input type="button" value="Click">

Example: Key Input Types in Action

<!-- Text -->
<input type="text" name="username" placeholder="Username" required>

<!-- Email -->
<input type="email" name="email" placeholder="[email protected]">

<!-- Number with constraints -->
<input type="number" name="age" min="1" max="120" step="1">

<!-- Date -->
<input type="date" name="dob" min="1900-01-01" max="2010-12-31">

<!-- Range -->
<input type="range" name="volume" min="0" max="100" value="50">

<!-- File -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

---

Input Attributes

Attribute	Applies To	Description
type	<input>	Input type (text, email, etc.)
name	All	Form field name (used on submission)
value	All	Default / submitted value
placeholder	text/search/tel/url/email/password	Hint text inside field
required	All	Field must be filled
readonly	All	Field cannot be edited
disabled	All	Field is greyed-out and not submitted
min / max	number/range/date/time	Constrain range
minlength / maxlength	text/password/search/tel/url/email/textarea	Constrain character count
pattern	text/password/search/tel/url/email	Regex validation
step	number/range/date/time	Increment step
autocomplete	All	Override form-level autocomplete
autofocus	All	Focus on page load (only one)
multiple	email/file	Allow multiple values
accept	file	Restrict file types
checked	checkbox/radio	Pre-selected
selected	<option>	Pre-selected option
size	select	Visible option count

---

Validation Attributes Reference

Attribute	Description	Example
required	Field must have a value	<input required>
minlength="3"	Minimum characters	<input minlength="3">
maxlength="20"	Maximum characters	<input maxlength="20">
min="18"	Minimum numeric/date value	<input type="number" min="18">
max="100"	Maximum numeric/date value	<input type="number" max="100">
pattern="[A-Z]+"	Regex pattern	<input pattern="[A-Za-z]+">
step="0.5"	Allowed increment	<input type="number" step="0.5">
type="email"	Email format validation	<input type="email">
type="url"	URL format validation	<input type="url">

Custom Validation Messages

<input
  type="text"
  name="username"
  pattern="[A-Za-z0-9]{3,16}"
  title="3–16 characters, letters and numbers only"
  required
>

---

Select & Option

<label for="country">Country:</label>
<select id="country" name="country" required>
  <option value="">— Select —</option>
  <option value="in">India</option>
  <option value="us">United States</option>
  <option value="uk" selected>United Kingdom</option>
</select>

<!-- Multiple select -->
<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

<select> Attributes

Attribute	Description
multiple	Allow multi-select (Ctrl+click)
size	Visible options (makes it a list)
required	Must select an option
disabled	Disable the dropdown

---

Textarea

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="50"
          placeholder="Your message..." maxlength="500" required></textarea>

<textarea> Attributes

Attribute	Description
rows	Visible text lines
cols	Visible character width
maxlength	Max character count
placeholder	Hint text
readonly	Cannot edit
disabled	Greyed-out, not submitted
required	Must have content

---

Button

Type	Class	Description
submit	<button type="submit">	Submits the form (default)
reset	<button type="reset">	Resets all fields to defaults
button	<button type="button">	Does nothing — attach JS

<button type="submit">Send</button>
<button type="reset">Clear</button>
<button type="button" onclick="alert('Clicked!')">Click Me</button>

---

Complete Form Example

<form action="/register" method="post" autocomplete="on">
  <fieldset>
    <legend>Account Details</legend>

    <label for="name">Full Name *</label>
    <input type="text" id="name" name="name" placeholder="John Doe" required>

    <label for="email">Email *</label>
    <input type="email" id="email" name="email" placeholder="[email protected]" required>

    <label for="password">Password *</label>
    <input type="password" id="password" name="password"
           minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
           title="8+ chars, uppercase, lowercase, number" required>
  </fieldset>

  <fieldset>
    <legend>Preferences</legend>

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="">— Select —</option>
      <option value="in">India</option>
      <option value="us">United States</option>
    </select>

    <label>Newsletter</label>
    <input type="checkbox" id="news" name="newsletter" value="yes" checked>
    <label for="news">Send me updates</label>
  </fieldset>

  <button type="submit">Create Account</button>
  <button type="reset">Clear</button>
</form>

---

Accessibility Tips

• Always pair <label> with for attribute matching the <input> id
• Use <fieldset> and <legend> to group related controls
• Use aria-describedby to link help text to inputs
• Use aria-required="true" alongside required for screen readers
• Error messages should be linked with aria-live="polite" or role="alert"
• Ensure colour contrast meets WCAG 2.1 AA standards on all inputs