HTML Mastery · Chapter 6
Forms & Inputs — Complete Reference
HTML forms are how users interact with websites — submitting data, logging in, and uploading files. This chapter covers every form tag, all input types, and every attribute.
<form> Element — All Attributes
| Attribute | Values | Purpose |
|---|---|---|
| action | URL | Where the form data is sent when submitted. If omitted, sends to the current URL. |
| method | get, post, dialog | get: appends data to URL (visible). post: sends in request body (hidden). Use POST for sensitive data and file uploads. |
| enctype | application/x-www-form-urlencoded (default), multipart/form-data, text/plain | Encoding type for form data. Must be multipart/form-data for file uploads. |
| target | _self, _blank, _parent, _top | Where to display the form response after submission. |
| autocomplete | on, off | Whether the browser should offer autocomplete suggestions for the form's inputs. |
| novalidate | Boolean | Disables browser's built-in validation. Useful when you want to handle validation with JavaScript. |
| name | String | The form's name. Allows JavaScript to reference it via document.forms["name"]. |
| rel | external, noopener, etc. | Relationship of the action URL to the current page. |
<input> — All 22 Type Values
The <input> tag is the most versatile form element — it self-closes and changes its behavior based on the type attribute.
<input type="image" src="btn.png" alt="Submit"><input type="hidden" name="csrf" value="token123">Invisible to user. Sends data with form.
<input> — All Attributes
| Attribute | Applies To | Purpose |
|---|---|---|
| name | All inputs | The key in the form data. Required for the value to be submitted with the form. |
| value | Most types | The initial value or the value submitted with the form. For checkboxes/radios, the value sent when checked. |
| id | All | Unique identifier. Used to link <label for="id"> to its input. |
| placeholder | Text-like inputs | Hint text shown inside the field when it's empty. Disappears on focus. |
| required | Most types | Boolean. The form cannot be submitted if this field is empty/unchecked. |
| disabled | All | Boolean. Makes the input uneditable and excludes it from form submission. |
| readonly | Text-like inputs | Boolean. Uneditable but still included in form submission. Value is visible and selectable. |
| checked | checkbox, radio | Boolean. The checkbox or radio button is selected by default. |
| multiple | file, email, select | Boolean. Allows selecting multiple files or entering multiple comma-separated emails. |
| min / max | number, range, date, time | Sets the minimum and maximum allowed value. |
| step | number, range, date, time | The increment. E.g., step="0.01" for currency, step="5" for multiples of 5. |
| minlength / maxlength | text, password, email, etc. | Minimum and maximum number of characters allowed. |
| pattern | text, password, email, tel, url | A regular expression the input value must match for validation. |
| autocomplete | Text-like inputs | Browser autocomplete behavior. Values: off, username, email, new-password, etc. |
| autofocus | All | Boolean. The input receives focus automatically when the page loads. Only one element per page. |
| tabindex | All | Controls the tab order. 0 = in natural order, -1 = remove from tab order. |
| list | text, search, url, email, tel | References a <datalist id> to provide autocomplete suggestions. |
| form | All | Associates this input with a form by that form's id. Allows input outside the <form> element. |
| accept | file | Restricts file types. E.g., accept="image/*", accept=".pdf,.doc". |
| capture | file | On mobile, opens camera directly. Values: user (front camera), environment (back). |
| inputmode | text-like | Hints at what keyboard to show on mobile. Values: numeric, decimal, tel, email, url, search. |
| size | text, email, etc. | Visual width of the input in characters (not a maximum). Prefer CSS width. |
| formaction | submit, image | Overrides the form's action URL for this specific submit button. |
| formmethod | submit, image | Overrides the form's method (get/post) for this specific submit button. |
| formnovalidate | submit, image | Bypasses validation when this specific button is clicked. |
| formenctype | submit, image | Overrides the form's enctype for this button. |
Other Form Elements
| Tag | Purpose & Key Attributes |
|---|---|
| <label> | Links text to an input. for attribute must match the input's id. Clicking the label focuses/checks the input. Required for accessibility. |
| <textarea> | Multi-line text input. Attributes: rows, cols, wrap (soft/hard), resize (CSS). Supports: name, required, disabled, readonly, maxlength, placeholder. |
| <select> | Dropdown list. Attributes: multiple, size (visible rows), name, required, disabled. Contains <option> and <optgroup> tags. |
| <option> | An item in a <select> list. Attributes: value (submitted), selected (boolean, preselected), disabled. |
| <optgroup> | Groups related options. Attribute: label (group heading), disabled. |
| <button> | Clickable button. type: submit (default), button, reset. Unlike <input type="submit">, can contain HTML (icons, images). Supports all form override attributes. |
| <datalist> | Provides autocomplete suggestions for a text input. The input's list attribute must reference this element's id. Contains <option> elements. |
| <fieldset> | Groups related inputs inside a box. Attributes: disabled (disables all nested inputs), form, name. |
| <legend> | The title/caption for a <fieldset>. First child of fieldset. Displayed in the fieldset border. |
| <output> | Displays a calculated result. Attributes: for (space-separated list of related input IDs), name, form. |
| <progress> | A progress bar. Attributes: value (current), max (total). No value = indeterminate state. |
| <meter> | A scalar gauge (not a progress bar). Attributes: value, min, max, low, high, optimum. |
Chapter Summary
- Always use
method="post"and HTTPS for sensitive data - Use
enctype="multipart/form-data"when your form accepts file uploads - Every
<input>must have anameto be submitted - Always pair inputs with
<label for="id">for accessibility <fieldset>+<legend>groups related inputs for structure and accessibility