HTML Forms Cheat Sheet: Input Types, Validation & Attributes

An HTML forms cheat sheet maps the elements and attributes you need to collect user input: form action and method, labels tied to inputs, and HTML5 types plus required, min, max, and pattern. Use native validation first, then enhance with JavaScript.

This HTML cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Action: action is the URL that receives the submit. Omit it to post to the current page.
• Method: GET puts fields in the query string. POST sends a body — use POST for passwords and writes.
• Label: Every control needs a <label for="id"> matching the input id (or wrap the control).
• Types: text, email, password, number, tel, url, date, file, checkbox, radio, hidden.
• Required: required blocks submit if empty. Pair with type so the browser checks format too.
• Name: Only named controls are submitted. name="email" becomes the key on the server.
• Autocomplete: autocomplete="email" (and similar tokens) help password managers and mobile keyboards.
• Fieldset: Group radios/checkboxes in <fieldset><legend> so the group has an accessible name.

Copy-paste examples

Labeled form with native validation

One label per control. type="email" plus required catches empty and malformed values before your script runs.

<form method="post" action="/contact.php">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">
  <label for="msg">Message</label>
  <textarea id="msg" name="message" required minlength="10"></textarea>
  <button type="submit">Send</button>
</form>

Checkbox, radio, and file

Radios share a name. Files need enctype="multipart/form-data" on the form.

<form method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>Plan</legend>
    <label><input type="radio" name="plan" value="basic" checked> Basic</label>
    <label><input type="radio" name="plan" value="pro"> Pro</label>
  </fieldset>
  <label><input type="checkbox" name="terms" value="1" required> I agree</label>
  <input type="file" name="resume" accept=".pdf">
  <button type="submit">Apply</button>
</form>

Common mistakes

• Using placeholder as the only label — it disappears on type and fails accessibility.
• Missing name on inputs so the server receives an empty POST body.
• Putting GET on login or checkout forms so credentials appear in history and logs.
• Styling away the invalid/focus outline without providing a visible replacement.

FAQ

1. Should I disable native validation? Only if you replace it completely. novalidate plus a custom script is fine; a submit button that does nothing is not.

1. GET or POST for search forms? GET. Search should be bookmarkable and shareable. POST for creates, updates, and anything with secrets.

1. Do I still need JavaScript for forms? Not for basic required/email/pattern checks. Use JS for async submit, dependent fields, and custom error copy.

Related HTML cheat sheets

• Html Cheat Sheet 2026
• Html5 Semantic Tags Cheat Sheet
• Html Meta Tags Seo Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.