HTML Tutorial: Complete HTML Tutorial
About Lesson

Html <input> Tag


The <input> tag in HTML is a versatile form element used for user data input. It can be displayed in several ways, depending on the type attribute.

Concept

The <input> tag is the backbone of forms in HTML, allowing users to enter and interact with different types of data. It’s a self-closing tag and doesn’t require an end tag. The behavior and appearance of the <input> tag vary widely based on the type attribute, which can range from a simple text field to a file selector or a color picker.

Implementation

Example 1: Text Input

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Example 2: Radio Input

<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">

Try it yourself below:

Loading

Attributes of <input>

This table aims to provide a detailed understanding of each attribute associated with the <input> tag, ensuring you can utilize it effectively and creatively in your web forms. The “Value” column indicates the type or range of values each attribute can accept, offering clarity and guidance for proper implementation.

Attribute Value Description
type button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Determines the variety of input (e.g., text, radio, file) the field accepts.
name Text Assigns a name to the input, used to reference form data after submission.
value Text Sets an initial value within the input field.
placeholder Text Offers a hint or example text within the input field before entry.
required Boolean Indicates that the field must be filled out before the form can be submitted.
disabled Boolean Renders the input field inactive and unclickable.
readonly Boolean Allows the input to be seen but not modified by users.
size Number Defines the visible width of the input field in terms of character length.
maxlength Number Limits the number of characters a user can enter into the field.
min Number Establishes the minimum acceptable value for input (useful for types like number or date).
max Number Establishes the maximum acceptable value for input.
step Number Sets the interval between legal numbers in number inputs.
pattern Regex pattern Imposes a specific regex pattern that the input must match.
autocomplete on/off Controls whether the browser can predict user input based on past entries.
multiple Boolean Allows multiple values or files to be entered for input types like email or file.
form Form id Associates the input with a form element elsewhere in the document.
list Datalist id Refers to a <datalist> element that contains pre-defined options for the input.
src URL Specifies the URL of the image to use as a submit button (only for type=”image”).
alt Text Provides alternative text for the image input type (only for type=”image”).
width Pixels Defines the width of the image input type (only for type=”image”).
height Pixels Defines the height of the image input type (only for type=”image”).
formaction URL Overrides the form’s action attribute (only for type=”submit” or type=”image”).
formenctype Encoding type Overrides the form’s enctype attribute (only for type=”submit” or type=”image”).
formmethod HTTP method Overrides the form’s method attribute (only for type=”submit” or type=”image”).
formnovalidate Boolean Overrides the form’s validation process (only for type=”submit”).
formtarget Browsing context Overrides the form’s target attribute (only for type=”submit” or type=”image”).

Global Attributes

The <input> tag supports all global attributes in HTML.

Event Attributes

The <input> tag also supports all event attributes in HTML.

The <input> tag supports numerous attributes that allow developers to customize its behavior and appearance:

  • accept: Specifies a filter for accepted file types when using the type="file" input. Possible values include file extensions like .jpg, .png or media types like audio/*, video/*, or image/*.

  • autocomplete: Enables or disables autocomplete for the input element.

  • autofocus: Automatically focuses on the input element when the page loads.

  • checked: Pre-selects the input element when the page loads (for type="checkbox" or type="radio").

  • dirname: Specifies the text direction that will be submitted.

  • disabled: Disables the input element.

  • form: Specifies the form that the input element belongs to.

  • formaction: Specifies the URL of the file that processes the input control when the form is submitted (for type="submit" and type="image").

  • formenctype: Specifies how the form-data should be encoded when submitting to the server (for type="submit" and type="image").

  • formnovalidate: Defines that form elements should not be validated when submitted.

  • formtarget: Specifies where to display the response received after submitting the form (for type="submit" and type="image").

  • height: Specifies the height of an input element (only for type="image").

  • list: Refers to a <datalist> element that contains pre-defined options for an input element.

  • maxlength: Specifies the maximum number of characters allowed in an input element.

  • min: Specifies a minimum value for an input element.

  • minlength: Specifies the minimum number of characters required in an input element.

  • multiple: Indicates that a user can enter more than one value in an input element (e.g., for file inputs).

  • name: Specifies the name of an input element.

  • pattern: Specifies a regular expression that an input element’s value is checked against.

  • placeholder: Provides a short hint that describes the expected value of an input element.

  • popovertarget: Specifies which popover element to invoke (only for type="button").

  • popovertargetaction: Specifies what happens to the popover element when you click the button (only for type="button").

  • readonly: Prevents modification of the input element’s value.

  • required: Indicates that the input field must be filled out before submitting the form.

  • size: Specifies the width, in characters, of an input element.

  • src: Specifies the URL of the image to use as a submit button (only for type="image").

  • type: Specifies the type of input element to display, e.g., text, password, email, checkbox, radio, submit, reset, file, etc.

Browser Support

The <input> tag is supported in all major browsers:

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

Most browsers will display the <input> element with default CSS similar to:

input {
  display: inline-block;
  padding: 1px;
  border: 2px inset;
}

The <input> tag is a fundamental element in creating interactive and dynamic web forms. Its versatility allows it to handle a wide range of user input types, making it an indispensable tool in web development.


Understanding and utilizing the various types and attributes of the <input> tag can significantly enhance the functionality and user experience of web forms.