<input> elementThe <input> element provides a form control whose appearance and behaviour are determined by its type attribute. It is an empty element, so it has no text content or closing tag. If type is omitted or its value is not recognised, the browser uses text.
Several types accept a single line of text. These include text, search, tel, url, email, and password. The type gives the browser information about the expected content: email and url provide format checks, while password conceals the characters on screen. A tel field may offer a telephone keypad on a mobile device, but does not impose a particular telephone-number format.
Other types provide more specialised controls. The number and range types accept numeric values; date, month, week, time, and datetime-local accept dates or times. The color and file types provide colour and file selection. Their presentation depends on the browser and device. The submit, reset, button, and image types provide buttons, with image acting as a graphical submit button. The hidden type holds a value without displaying a control.
The checkbox type represents a choice that can be checked or unchecked. Radio buttons sharing the same name within a form represent a group of alternatives, of which only one can be checked. For both types, checked specifies the initial selection and value specifies the value to submit. An unchecked checkbox or radio button contributes no value to the form submission.
The name attribute identifies the control's data in a form submission. For example, name="email" associates the submitted address with the name email. For text fields, the HTML value attribute supplies the starting value; the user's edits change the current value held by the control. An input is usually placed inside its <form>, but can also be associated with one elsewhere in the document by matching its form attribute to the form's id.
Attributes controlling entry depend on the type. For example, minlength, maxlength, and pattern constrain text, while min, max, and step constrain numeric or date/time values. Where it applies, required makes an empty field or an unmade selection fail the browser's form validation. The disabled attribute prevents interaction and excludes the control's data from submission. The readonly attribute prevents editing while allowing submission, but applies only to certain types, such as text and date fields, not to checkboxes or radio buttons.
A field should have an associated <label>, either enclosing the input or linked to its id by the label's for attribute. This supplies a name for assistive technology and lets the user activate the control through its label. Button types have their own captions, and hidden inputs have no visible label. For types that support it, placeholder supplies a short hint while the field is empty; the label remains available after a value has been entered.
For file inputs, accept suggests file types to the chooser, such as accept="image/*"; it is not a check of the uploaded file's contents. The multiple attribute allows several files, or several addresses for an email input. On supported input types, list refers to the id of a <datalist> providing suggestions.
The examples show an email field and an initially checked checkbox. If the checkbox belongs to a submitted form, it contributes updates=yes while checked and no entry while unchecked.
Attributes (besides those given above; availability depends on type): size, autocomplete, list, multiple, accept, GLOBALS.
Typical layout: <p><label for="pf-demo-email">Email</label><br> <input type="email" id="pf-demo-email" name="email" placeholder="you@example.com"></p> <p><label> <input type="checkbox" name="updates" value="yes" checked> Send me updates </label></p>
Visual representation: