Form Elements - HTML reference 2026 vdsology

By vdsology May 7, 2026

vdsology html reference 2026 chapter 8

Chapter 8 — Form Elements

Chapter 8 — Form Elements

Forms are how HTML collects input from users. <input> alone has 22 types, each enabling different attributes. This chapter covers every form element with every attribute, all 22 input types, the command/commandfor Invoker Commands API, dirname, alpha/colorspace on color inputs, <selectedcontent>, and complete validation.

8.1 — `<form>`

Attributes:

Attribute	Values	Purpose
`action`	URL	Where form data is sent
`method`	`get`, `post`, `dialog`	HTTP method
`enctype`	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`	How to encode data
`name`	String	Form name
`target`	`_self`, `_blank`, `_parent`, `_top`	Where to display response
`autocomplete`	`on`, `off`	Default autofill for contained controls
`autocorrect`	`on`, `off`	Autocorrection for contained controls
`novalidate`	Boolean	Disable constraint validation
`rel`	`noopener`, `noreferrer`, `external`	Link relationship

method values:

get — Appends data as query string. Use for searches, filters (idempotent requests).
post — Sends data in request body. Use for creating/changing server state.
dialog — Closes the parent <dialog>. Submit button’s value becomes dialog.returnValue.

<form action="/api/register" method="post" autocomplete="on" novalidate>
  <!-- ... -->
</form>

<dialog id="confirm">
  <form method="dialog">
    <button type="submit" value="yes">Confirm</button>
    <button type="submit" value="no">Cancel</button>
  </form>
</dialog>

8.2 — `<input>` — All 22 Types

Shared attributes (apply to most types):

type, name, value, id, disabled, readonly, required, autofocus, form, autocomplete, autocorrect, inputmode, enterkeyhint, tabindex

8.2.1 — `type="text"` — Single-Line Text

Type-specific attributes: placeholder, minlength, maxlength, pattern, size, list, readonly, dirname

<label for="username">Username</label>
<input type="text" id="username" name="username"
       placeholder="e.g. alice_smith"
       minlength="3" maxlength="30"
       pattern="[a-z0-9_]+"
       autocomplete="username"
       autocorrect="off"
       autocapitalize="off"
       required>

`dirname` attribute (on `text`, `search`, `url`, `tel`, `email`, `hidden`, `textarea`)

When included, the form submits two name/value pairs: the field’s value AND the text directionality (ltr or rtl) under the dirname value as the key.

<input type="text" name="message" dirname="message.dir" value="Hello">
<!-- Submits: message=Hello&message.dir=ltr -->
<!-- Or for RTL text: message=مرحبا&message.dir=rtl -->

8.2.2 — `type="email"`

Type-specific attributes: placeholder, minlength, maxlength, pattern, size, list, multiple, readonly

<input type="email" name="email" placeholder="alice@example.com"
       autocomplete="email" required>
<input type="email" name="cc" multiple placeholder="a@b.com, c@d.com">

8.2.3 — `type="password"`

Type-specific attributes: placeholder, minlength, maxlength, pattern, size, readonly

autocorrect, spellcheck, and writing suggestions are automatically disabled.

<input type="password" name="current-password"
       autocomplete="current-password" required>
<input type="password" name="new-password"
       autocomplete="new-password"
       minlength="8"
       pattern="(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,}"
       required>

8.2.4 — `type="number"`

Type-specific attributes: min, max, step, placeholder, list, readonly

<input type="number" name="quantity" min="1" max="99" step="1" value="1" required>
<input type="number" name="price" min="0" step="0.01" placeholder="0.00">

8.2.5 — `type="tel"`

Type-specific attributes: placeholder, minlength, maxlength, pattern, size, list, readonly

<input type="tel" name="phone" placeholder="+44 7700 900000"
       autocomplete="tel" pattern="[\d\s\+\-\(\)]{7,15}">

8.2.6 — `type="url"`

Type-specific attributes: placeholder, minlength, maxlength, pattern, size, list, readonly

<input type="url" name="website" placeholder="https://example.com"
       autocomplete="url">

8.2.7 — `type="search"`

Type-specific attributes: placeholder, minlength, maxlength, pattern, size, list, readonly, dirname

<input type="search" name="q" placeholder="Search…"
       enterkeyhint="search" autocomplete="off">