HTML Element: input

Example

One element, so many different types.

Syntax

1

<input type="text" placeholder="First name" />

2

<input type="password" placeholder="Password" />

3

<input type="submit" value="Login" />

Result

Browser Support

The <input> tag is supported in all modern browsers. Read more on caniuse.com. 

Attributes

The <input> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

A generic <input> element also supports the following attributes:

• type: Type of form control.
• value: Value of the form control.

Many additional attributes are supported based on the type of input being authored.

Input Types

Input elements come in a number of different types to support different types of data that may be entered. Below is a list of the supported types:

• type=button: Simply a button with no data type
• type=checkbox: A set of zero or more values from a predefined list that is presented as a checkbox.
• type=color: A sRGB color with 8-bit red, green, and blue components presented as a color picker.
• type=date: A data (year, month, day) with no time zone presented as a date control.
• type=datetime-local: A date and time (year, month, day, hour, minute, second, and fraction of second) with no timezone presented as a date and time control.
• type=email: An email address or list of email addresses presented as a text control.
• type=file: Zero or more files each with a MIME type and optionally a filename
• type=hidden: An arbitrary string hidden from appearance.
• type=image: A coordinate, relative to a particular image’s size, with the extra semantic that it must be the last value selected and initiates form submission presented as a clickable image or button.
• type=month: A date consisting of a year and a month with no time zone presented as a month control.
• type=number: A numerical value presented as a text control with a spinner control.
• type=password: Text with no line breaks that won’t display sensitive information as a user types.
• type=radio: An enumerated value presented as a radio button.
• type=range: A numerical value, with the extra semantic that the exact value is not important presented as a slider control or similar.
• type=reset: Used to reset a form element and presented as a button.
• type=search: Text with no line breaks presented as a search control.
• type=submit: An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission presented as a button.
• type=tel: Text with no line breaks presented as a text control.
• type=text: Text with no line breaks presented as a text control.
• type=time: A time (hour, minute, seconds, fractional seconds) with no time zone presented as a time control.
• type=url : An absolute URL presented as a text control.
• type=week: A date consisting of a week-year number and a week number with no time zone presented as a week control.

Content

Inputs don’t support content and are considered a void element.

Mobile Device Considerations

• Control labeling: For better usability and accessibility label all input controls appropriately.
• Accessibility: Minimize user typing by specifying input types properly. On mobile devices, different keyboard configurations are displayed depending on the input type currently in focus:

Learn More

• Official W3C specification <input>

• 

  HTML & CSS for Beginners (MEGA Free Course!)

  

  Adi Purdila

  08 Sep 2022

• 

  Create a Stylish Dark Contact Form with HTML, CSS, and JavaScript

  

  George Martsoukos

  10 May 2019