HTML Dog
Skip to navigation

HTML Tag: input

A form control, allowing input from a user. It can be one of many types, including a text field, a checkbox, or a submit button.

input has no content and therefore does not warrant a closing tag.

Optional Attributes

Attribute Description Possible values
name Name of the form control, to be paired with its value. Text (no spaces).
type The type of form control.
  • text: Text field — text without line breaks. (default)
  • password: Text field with obscured input.
  • checkbox: Check box / tick box.
  • radio: Radio button — allows one control to be selected in a group of these sharing the same name attribute value.
  • submit: Submit button — submits the form.
  • reset: Reset button — resets the controls in a form to their initial default values.
  • hidden: A hidden control that can not be accessed directly by the user but the value of which is submitted with the rest of the form data.
  • image: An image that, when clicked or otherwise selected, will submit the form. The coordinates of the pixel point that the image is clicked on will become the control’s value.
  • file: File upload — allows a local file to be selected for submission.
  • button: Button with no default behaviour.
  • search: Text field for search strings.
  • tel: Text field for telephone numbers.
  • url: Text field for absolute URLs.
  • email: Text field for email addresses.
  • date: Date selection control.
  • time: Time selection control.
  • number: Text field or spinner for numerical values.
  • range: Slider, or similar, for selecting a numerical value from a potentially imprecise range.
  • color: Color well, with an 8-bit sRGB value.
value An initial value. Dependent on type.
checked Sets a checkbox or radio type to be checked by default. None.
maxlength The maximum number of permissible characters in a value. Number.
minlength The minimum number of permissible characters in a value. Number.
src Used, and required, when type is image. The location of the image file to be used. URL.
alt Used, and required, when type is image. Alternative text that will replace the image if the image specified by src isn’t available. Text.
width Used when type is image. Pixel width of the image. Number.
height Used when type is image. Pixel height of the image. Number.
accept Used when type is file. Indicates what file types are accepted. A single instance or comma-separated list of:
  • audio/*: Audio files.
  • video/*: Video files.
  • image/*: Image files.
  • MIME type, such as application/pdf.
  • Specific file extensions, such as .pdf.
disabled Disables the form control. None.
readonly Makes the form control unalterable by the user. None.
autocomplete If a browser should implement autocomplete on the control or not.
  • on (default)
  • off
autofocus Indicates that the form control should have focus on page load. Should only be used on one form control in a page. None.
dirname Adds an additional field to be sent containing the directionality of the form control’s value. Text (no spaces). dirname="this.dir" will append this.dir=ltr (left-to-right) or this.dir=rtl (right-to-left) to submitted data, for example.
form Explicitly associates the control to a form element, which it may or may not be nested within. If absent, the control will be associated to its form ancestor. Text matching the value of a form element’s id attribute.
formaction Used when type is submit or image. The address to which submitted form data should be sent to. Will override a form element’s action attribute. URL.
formmethod Used when type is submit or image. The HTTP method by which submitted form data should be sent. Will override a form element’s method attribute.
  • get: Bolts the form values onto the URL that the form is submitted to. Used for simple data sending, such as search queries, for example.
  • post: Invisibly sends the form data in the body of the submitted HTTP request. Used for more detailed or secure data sending, such as contact forms, for example.
formenctype Used when type is submit or image. The MIME type used to encode the form data. Will override a form element’s enctype attribute.
  • application/x-www-form-urlencoded: Default.
  • multipart/form-data: For when a file input element is used in the form.
  • text/plain: Basic text.
formnovalidate Used when type is submit or image. Indicates that the form should not be validated before it is submitted. Will override a form element’s novalidate attribute. None.
formtarget Used when type is submit or image. The browsing context in which the submitted form’s destination URL should open. Will override a form element’s target attribute.
  • _self: Opens in current window / tab.
  • _blank: Opens in a new window / tab.
list Associates the form control with a list of options to suggest to the user. Text matching the value of a datalist element’s id attribute.
max Used when type is date, time, number or range. The maximum value. Number.
min Used when type is date, time, number or range. The minimum value. Number.
step Used when type is date, time, number or range. The increments in which a value can be increased or decreased. Number or any.
multiple Used when type is email or file. Indicates that the user can enter more than one value. None.
pattern A regular expression against which a value can be checked. Regular expression.
placeholder A visible hint as to what kind of data the user should input. Text.
required Indicates that the form field must be completed. None.
size The number of characters in a text-type control that a user should be expected to see whilst editing. Number.
Global attributes

Example


<form action="someKindOfProcessingScript.php" method="post">
    <label for="username">Name</label>
    <input name="username" id="username">

    <label for="housenumber">House number</label>
    <input type="number" name="housenumber" id="housenumber">

    <label for="street">Street</label>
    <input name="street" id="street">

    <label for="emailaddress">Email address</label>
    <input type="email" placeholder="you@somewhere.com" name="emailaddress" id="emailaddress">

    <input type="submit" value="Sign up!">
</form>