HTML Input Tag - Dofactory

HTML <input> Tag HTML <img> HTML <ins>

The <input> tag creates an input control that accepts data from the user.

This element is an absolute powerhouse with its support for different input types, such as, text fields, radio buttons, checkboxes, password fields, dates, and more.

Example

#

Four <input> elements of different types: a text field, radio buttons, checkbox, and a submit button -- all wrapped inside a <form>.

Student Information Bachelors degree <form action="/tutorial/action.html"> <fieldset style="border: 2px solid #4238ca; background: #f6f8ff; "> <legend>Student Information</legend> <input type="text" placeholder="First name" name="firstname"><br /><br /> <input type="text" placeholder="Last name" name="lastname"><br /><br /> <input type="text" placeholder="City" name="city"><br /><br /> <div> <input type="checkbox" id="bachelors" name="bachelors" value="bachelors"> <label for="bachelors">Bachelors degree</label> </div> <input type="submit" value="Submit" /> </fieldset> </form> Try it live

Using <input>

#

The <input> tag creates different types of input controls.

The type attribute defines what type of input control will be rendered (see examples below).

HTML <img> HTML <ins>

More Examples

#

A <form> with different <input> controls. Enter data and click submit to see the results.

I know HTML I know CSS I know JavaScript Years of experience: 5 years <form action="/tutorial/action.html"> <input type="text" name="name" placeholder="Name"><br /><br /> <input type="text" name="email" placeholder="Email"><br /><br /> <label><input type="checkbox" name="html" value="html"> I know HTML</label><br /> <label><input type="checkbox" name="css" value="css"> I know CSS</label><br /> <label><input type="checkbox" name="js" value="js"> I know JavaScript</label><br /><br /> <label for="experience">Years of experience:</label> &nbsp; <input type="range" min="0" max="25" value="5" id="experience" name="experience" oninput="updateYear(this)"> &nbsp; <span id="years">5</span> years <br /><br /> <input type="submit" value="Submit"> </form> <script> let updateYear = element => { document.getElementById("years").innerText = element.value; } </script> Try it live

Attributes for <input>

#

This table lists the <input> tag attributes.

Attribute	Value	Description
type	text checkbox radio hidden button submit reset password file -------- color date datetime-local email search image month number range tel time url week	The type of input element to be created. Click the type values for details: text, checkbox, etc. The last 13 types (color to week) were added in HTML5 (Oct 2014).
name	text	Name of the input element.
value	text	Value of the input element.
id	identifier	Defines a unique identifier for the input.
class	classnames	Sets one or more CSS classes to be applied to the input.
style	CSS-styles	Sets the style for the input.
data-*	value	Defines additional data that can be used by JavaScript.
hidden	hidden	Specifies whether the input is hidden.
title	text	Sets a title that displays as a tooltip.
tabindex	index	Sets a tab sequence relative to the other elements.
lang	language	Sets the language for the input element.
checked	checked	For type="checkbox" or type="radio", makes the option checked or chosen.
placeholder	text	Short hint which describes expected value
maxlength	number	Maximum number of characters allowed
required	no value	Sets the input to required field
readonly	readonly	Make input read only
disabled	disabled	Disables input element
autofocus	no value	Sets the focus on the element after page loads
autocomplete	on | off	Presents the user with previously entered values
form	form-id	Refers to the id of the form the <input> element belongs to
formaction	URL	For type="submit" and type="image", URL or path of the file the submitted data will be processed
formtarget	_blank _self _parent _top framename	For type="submit" and type="image", indicates where the response should be displayed
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain For type="submit" and type="image", how the form data submitted shall be encoded to the server
formmethod	getpost	For type="submit" and type="image", the HTTP method for sending form data
formnovalidate	formnovalidate	Avoids the form being validated after submission
accept	file-extension audio/* video/* image/* media_type	For type="file", indicates what file types user can pick to upload
min	number date	Minimum value
max	number date	Maximum value
step	numberany	Interval between legal numbers
multiple	multiple	Allows users to choose more than one value from selection
pattern	regexp	Regular expression that an <input> element's value is checked against
size	number	Input control's width in number of characters
src	URL	For type="image", specifies the image URL or path to be used as submit button
alt	text	For type="image", specifies text to display when image cannot be loaded
width	pixels	Width of the input element in pixels. Used by img input types.
height	pixels	Height of element in pixels. Used by img input types
list	datalist-id	<datalist> element that contains pre-defined options for an <input> element
dirname	inputname	Text direction to be submitted

For addional global attributes see our global attributes list.

Obsolete Attributes

Do not use the attributes listed below. They are not valid in HTML5. Browser support for these attributes is spotty.

Attribute	Description	Alternative
autocorrect	Specifies to use autocorrection while the user types.	n/a
incremental	Specifies to treat data entry as live search.	n/a
mozactionhint	Suggests what to do when enter or return keys are hit.	n/a
results	Sets maximum number of entries in search results.	n/a
webkitdirectory	Specifies file picker should only include directories.	n/a

Additional Examples

#

Text Input

A single line <input> element of type text. The placeholder adds a muted hint to the text input.

<input type="text" name="salary" placeholder="Enter your salary.."> Try it live

Buttons

Three <input> elements that are button types:

• The button type is a normal clickable button.
• The submit type submits user entered data.
• The reset type resets all user entered data to its default state.

<input type="button" value="Button"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> Try it live

Checkboxes

Four <input> elements of type checkbox. Each element is wrapped by a <label> which binds the label text to the controls. North and East are normal checkboxes, South is checked (selected), and West is disabled.

North East South West <label><input type="checkbox" name="north" value="north"> North </label><br /> <label><input type="checkbox" name="east" value="east"> East </label><br /> <label><input type="checkbox" name="south" value="south" checked> South </label><br /> <label><input type="checkbox" name="west" value="west" disabled> West </label> Try it live

Radio Buttons

Five <input> elements of type radio. Each element is wrapped by a <label> which binds the label text to the controls. The first three are normal checkboxes, Medium Low is checked (selected), and Low is disabled.

High Medium High Medium Medium Low Low <label><input type="radio" name="score" value="high"> High </label><br /> <label><input type="radio" name="score" value="mediumhigh"> Medium High </label><br /> <label><input type="radio" name="score" value="medium"> Medium </label><br /> <label><input type="radio" name="score" value="mediumlow" checked> Medium Low </label><br /> <label><input type="radio" name="score" value="low" disabled> Low </label> Try it live

Password Input

An <input> element of type password. When entering a password the characters are hidden.

<input type="password" name="password" placeholder="Enter password.."> Try it live

File Upload

An <input> element of type file. Click the button to select a file.

<input type="file"> Try it live

Number Input

An <input> element of type number. Click the up/down buttons to increment/decrement by 1.

<input type="number" value="3"> Try it live

Date Picker

An <input> element of type date. Click the control to select a date.

<input type="date"> Try it live

Time Picker

An <input> element of type time. Click the control to select a time.

<input type="time"> Try it live

Range Input

An <input> element of type range. Slide the thumb to change the value (value is not visible).

<input type="range"> Try it live

Color Picker

An <input> element of type color. Click the control to select a color.

Color Picker <input type="color" value="#F45D48"> Color Picker Try it live

Form Tags

#

The <input> tag is part of a group of tags that are used to create data entry forms. This group is referred to as the Form tag group. Together, they allow you to create comprehensive data input solutions. Here is a list of form tags

Element	Description
<form>	Defines a data entry area that contains input elements
<input>	Creates an input field in which data can be entered
<label>	Creates a label or brief description before input elements
<textarea>	Creates a multi-line text input control
<select>	Creates a dropdown control
<button>	Creates a clickable button that can contain text or an image
<datalist>	Specifies a list of options for a textfield (<input>) element
<fieldset>	Groups related form elements and displays a box with a legend around these
<legend>	Defines a caption for a fieldset

Browser support

#

This table shows when <input> support started for each browser:

Chrome	1.0	Sep 2008
Firefox	1.0	Sep 2002
IE/Edge	1.0	Aug 1995
Opera	1.0	Jan 2006
Safari	1.0	Jan 2003

Note: The HTML5 input types (time, email, color, search, tel, etc.) were released in Oct 2014.

You may also like

#

• Our HTML form Tag Reference
• Our HTML select Tag Reference
• Our HTML textarea Tag Reference
• Our CSS Forms Tutorial

HTML <img> HTML <ins>