HTML <Input> Tag

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

Mobile