HTML <input> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 6 min read

Definition

The <input> element is a field used in HTML Forms enabling the user input data.

Example

<form action="" method="get" class="form">
  <label for="name">Name: </label>
  <input type="text" name="name" id="name" />
</form>

Usage

  • The <input> element must have an opening and a closing tag.
  • The <input> element is one of the most important form elements.
  • The type attribute will determines the type of input field displayed in the form; for example, a button, text field, radio button, or checkbox.

type Attribute

The type attribute affects the type of <input> element. The other attributes available for use by the <input> element will depend on its type.

It takes the following values:

  • button - A button. The text shown on the button is equal to the value attribute.
  • checkbox - A checkbox allowing items to be selected or deselected.
  • color - A control for choosing a color via a color picker.
  • date - A control for entering a date using a date picker.
  • datetime-local - A control for entering a date and time using a date picker and scroll for time.
  • email - A text field for entering an email address with additional validation parameters.
  • file - A control for choosing a file.
  • hidden - A hidden control, but whose value is still submitted to the server.
  • image - A graphical submit button.
  • month - A control for entering a month and year.
  • number - A control for entering a number.
  • password - A control for entering a password. The value of the control will be obscured. Will alert the user if the site is not secured via HTTPS.
  • radio - A radio button used in multiple-choice questions.
  • range - A control that displays as a range widget or slider.
  • reset - A button that resets the form to default values.
  • search - A single-line text field for entering search strings. Line breaks are automatically removed.
  • submit - A button that submits the form. The text shown on the button is equal to the value attribute.
  • tel - A control for entering a telephone number.
  • text - This is the default <input> type. It displays a single line of text, with line breaks removed automatically.
  • url - A control for entering an URL. It has additional validation parameters.
  • week - A control for entering a week, consisted of week number and year.

Other Attributes

The <input> element supports the Global Attributes, as well as the following:

  • accept

    Used with: file

    The accept attribute specifies the file types the user can pick with the control.

    Values can include:

    • file_extension
    • audio/*
    • video/*
    • image/*
    • media_type
  • alt

    Used with: image

    The alt attribute specifies the alternative text to display if the button image does not load.

  • autocomplete

    Used with: All

    The autocomplete attribute specifies whether an element should have autocomplete enabled.

    Values can include:

    • on
    • off
  • autofocus

    Used with: All

    The autofocus attribute is a boolean that specifies the <input> element should get focus automatically when the page loads.

  • capture

    Used with: file

    The capture attribute specifies the media capture input method, such as a microphone, video, or camera.

  • checked

    Used with: radio, checkbox

    The checked attribute is a boolean that specifies whether the <input> control should be pre-selected.

  • dirname

    Used with: text, search

    The dirname attribute enables the submission of the field text’s direction. It takes the name of the input field followed by “.dir” as the value.

  • disabled

    Used with: All

    The disabled attribute specifies the <input> element should be disabled.

  • form

    Used with: All

    The form attribute associates the element with a form. The value should match the id attribute of the <form> element.

  • formaction

    Used with: image, submit

    The formaction attribute specifies the URL to submit the form. This will override the form’s action attribute.

  • formenctype

    Used with: image, submit

    The formenctype attribute specifies a string specifying the encoding type to use for submission of form data.

    Possible values include:

    • get
    • post
  • formmethod

    Used with: image, submit

    The formmethod attribute specifies the HTTP method used to submit a form where the type attribute is not button.

    Possible values include:

    • get - This is where the submitted data is included in the HTTP request body.
    • post - This is where the submitted data is appended to a forms action URL with a ?. This is often used for search forms.

    If specified, it overrides the method attribute of the <form> element.

  • formnovalidate

    Used with: image, submit

    The formnovalidate attribute is a Boolean attribute. It specifies whether to validate the form when submitted.

    If specified, it overrides the novalidate attribute of the <form> element.

  • formtarget

    Used with: image, submit

    The formtarget attribute specifies where to display the response after submitting the form where the type="submit".

    Values can include:

    • _self
    • _blank
    • _parent
    • _self
    • _top
    • Frame, tab, or window name.

    If specified, it overrides the target attribute of the <form> element.

  • height

    Used with: image

    The height attribute specifies the height in pixels of the <input> element.

  • list

    Used with: Most

    The list attribute specifies the id of the <datalist> element that contains a list pre-defined options for an <input> element.

  • max

    Used with: numeric types

    The max attribute specifies the maximum value for an <input> element.

    Values can include:

    • A number
    • A date
  • maxlength

    Used with: password, search, tel, text, url

    The maxlength attribute specifies the maximum number of characters allowed.

  • min

    Used with: numeric types

    The min attribute specifies the minimum value for an <input> element.

    Values can include:

    • A number
    • A date
  • minlength

    Used with: password, search, tel, text, url

    The minlength attribute specifies the minimum number of characters allowed.

  • multiple

    Used with: email, file

    The multiple attribute specifies that more than one value may be entered.

  • name

    Used with: All

    The name attribute specifies the name of the <input> element.

  • pattern

    Used with: password, text, tel

    The pattern attribute specifies a regular expression that the value of the <input> element will be validated against.

  • placeholder

    Used with: password, search, tel, text, url

    The placeholder attribute specifies an expected value that will display in the <input> field.

  • readonly

    Used with: Most

    The readonly attribute is a boolean that specifies that the <input> element is read-only.

  • required

    Used with: Most

    The required attribute is a boolean that specifies that the <input> element is required.

  • size

    Used with: email, password, tel, text

    The size attribute specifies the width of the <input> element in characters.

  • src

    Used with: image

    The src attribute specifies the URL of the image to be used.

  • step

    Used with: numeric types

    The step attribute specifies an interval in numbers of an <input> field.

  • value

    Used with: All

    The value attribute specifies the value of an <input> element.

  • width

    Used with: image

    The width attribute specifies the height in pixels of the <input> element.

Best Practices

  • You can use the :valid and :invalid CSS pseudo-classes to style a <form> element based their validation state. For example:
    input:invalid {
      background-color: red;
    }
    input:valid {
      background-color: green;
    }

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes