HTML Tags - Input Tag

What is HTML <input> tag ?

HTML <input> tag represents a form input control in HTML document.

HTML <input> tag is used to create an interactive input control inside the HTML document.

HTML <input> tag accepts the input data from user inside the HTML document.

HTML <input> element is the most important and commonly used form element.

How HTML <input> tag works ?

HTML <input> tag specifies an input field where the user can enter data.

HTML <input> tag is most commonly used inside the <form> tag.

And when the user submit’s the form, all input data is passed from client to server.

Why HTML <input> tag is used ?

HTML <input> control facilitate’s the user to input data and communicate with a website or application.

Since there are wide number of combinations for input types and attributes, its commonly used inside the web applications.

HTML beginners tutorial !!!
Click to Learn More about – HTML Tutorial for beginners

Syntax :

<input type = "value" .... />

HTML5 introduces the new input types to improve the user experience and to make the HTML forms more interactive.

HTML5 new input types are listed below,

Sno	Type	Description
1	color	Represents an input field which defines a color selector.
2	date	Represents an input field to define a date selector.
3	datetime	Defines full date and time display with time zone information.
4	datetime-local	Defines date and time without time zone information.
5	email	Defines an input field with email pattern Validation.
6	month	Defines the input field to enter month for the particular year
7	number	Defines field which selects a numeric value only.
8	range	Defines a numeric value selector with a given range of 1 to 100.
9	search	This is used to define a search field.
10	tel	Represents a control to enter a telephone number.
11	time	Represents a control to enter time value with no time zone.
12	url	Represents an input field to enter a URL
13	week	Defines a selector for week value for the particular year.

1. Color

Color input type allows the user to select a color from a color picker and returns the color value.

The color value will be returned in hexadecimal format (#rrggbb).

If we don’t we specify the value, the default value #000000 (black color) is returned.

Color is supported by web-browsers like Firefox, Chrome, Opera, Safari (12.1+), Edge (14+).

Color is not supported by web-browsers like Microsoft Internet Explorer and older version of Apple Safari browsers.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
           Purple : <input type="color" value="#651a77" id="mycol1"><br/>
           Red : <input type="color" value="#F12416" id="mycol2"><br/>
           Blue : <input type="color" value="#2A16F1" id="mycol3"><br/>
           Brown : <input type="color" value="#926F12" id="mycol4"><br/>
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example1-cc.png

2. Date

Date input type allows the user to select a date from a drop-down calendar.

By default, Date value includes the year, month, and day, but not the time.

Date is supported by the Chrome, Firefox, Opera and Edge browsers.

Date is Not supported by the Internet Explorer and Safari browsers.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
           Date :  <input type="date" value="2019-04-15" id="mydate"><br/>
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example2-cc.png

3. Datetime

Datetime is used to specify the date and time of the element.

By default this displays in the format year, month, date, hour, minute and seconds (YYYY-MM-DDThh:mm:ssTZD).

Datetime is supported by Chrome, Edge, and Opera browsers.

Datetime is not supported by Firefox, Safari, and Internet Explorer browsers.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
            DateTime
            <p>The concert took place on
            <time>Jan 18,1985 at 7:30 pm</time>.</p>
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example3-cc.png

4. Datetime-local

Datetime-local input type allows the user to select local date and time.

This includes year, month, and day as well as the time in hours and minutes.

Datetime-local is supported by Chrome, Edge, and Opera browsers.

Datetime-local is not supported by Firefox, Safari, and Internet Explorer browsers.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
           Date Time Local :     <input type="datetime-local" id="mydatetime">
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example4-cc.png

5. Email

Email input type allows the user to enter e-mail address.

The user can enter the properly-formatted e-mail address in the input.

Email is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
           Email : <input type="email" id="myemail" required><br/>
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example5-cc-1024x477.png

6. Month

Month input type allows the user to select a month and year from a drop-down calendar.

String returned will be in the format “YYYY-MM”, where YYYY is the four-digit year and MM is the month number.

Month is supported in Chrome, Edge, and Opera browsers.

Month is not supported by Firefox, Safari and Internet Explorer browsers.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
        Month : <input type="month" id="mymonth">
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example6-cc.png

7. Number

Number input type is used for entering a numerical value.

HTML5 allows us to specify the range using attributes like min, max.

Number is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
            Number :     <input type="number" min="1" max="10" step="0.5" id="mynumber">
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example7-cc.png

8. Range

Range input type is used for entering a numerical value within a specified range.

This is similar to number input, but it offers a simpler control for entering a number.

Range is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
        Range :     <input type="range" min="1" max="10" step="0.5" id="mynumber">
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example8-cc.png

9. Search

The search input type is used for creating search input fields.

This looks like normal text field.

Search is supported by all major web browsers such as Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
            Search :     <input type="search" id="mysearch">
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example9-cc.png

10. Tel

The tel input type is used for entering a telephone number.

By default Web-browsers don’t support tel input validation.

Either we can instruct the user with placeholder attribute or use regular expression to validate the input phone numbers.

Tel is not supported by any browser because format for phone numbers vary so much across countries.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
            Tel :     <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example10-cc-1024x461.png

11. Time

Time input type is used for entering a time (hours and minutes).

Web Browsers may use 12- or 24-hour format for input times.

Time is not supported by Internet Explorer and Safari browsers. Currently supported by Chrome, Firefox, Edge, and Opera browsers.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
            Time :     <input type="time" id="mytime">
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example11-cc.png

12. URL

URL input type is used for entering URL’s or web addresses.

Multiple URL’s can be entered using multiple attribute.

URL is supported by all major browsers like Firefox, Chrome, Safari, Opera, Internet Explorer 10 and above.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Input Type</title>
</head>
<body>
    <form>
            URL :      <input type="url" id="myurl" required>
    </form>
</body>
</html>

Output :

This image has an empty alt attribute; its file name is html5-3-example12-cc.png

13. Week

Week input type allows the user to select a week and year from a drop-down calendar.

Week is not supported by Firefox, Safari and Internet Explorer browsers. Currently supported by Chrome, Edge, and Opera browsers.

Example :

Output :

<input> Tag Attributes

HTML <input> tag support following specific attributes.

Sno	Attributes	Value	Description
1	accept	file_extension MIME_type audio/* image/* video/*	Specify file type that accept the server. Value must be comma separated. Following are valid values: File extension Specifies the file extension. e.g. .png, .jpeg, .pdf etc… MIME type Specifies the valid MIME Type of file. audio/* Representing sound files. image/* Representing image files. video/* Representing video files.
2	alt	text	Specify the alternate text only when input type value image.
3	autocomplete	on off	Specify autocomplate should be enable or not.
4	autofocus	autofocus	Specify that a input should be focus automatically when the page loads.
5	dirname	inputname.dir	Specifies text direction of `<input>` element when will submitted the form.
6	form	form_id	Specify one or more forms that associate with input element.
7	formaction	URL	Specify the URL that will process the input element when the form is submitted.
8	formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Specify the encoding method to be used for data when the form’s data is submitted.
9	formmethod	get post	Specify the method to use when sending form’s data.
10	formnovalidate	formnovalidate	Specify that input element should not be validated when submitted.
11	formtarget	_blank _self _parent _top	Specify where to display the results after submitting form data only when form type submit or image.
12	height	pixels	Specify that input element should not be validated when submitted.
13	list	datalist_id	Specify the <datalist> tag that contains pre-defined options for an input element.
14	max	number date	Specify the maximum (numeric or date-time) value for an input element.
15	maxlength	number	Specify the maximum number of characters allowed in an input element (If input type attribute value is text, email, search, password, tel, or url).
16	min	number date	Specify the minimum (numeric or date-time) value for an input element.
17	minlength	number	Specify the minimum number of characters allowed in an input element (If input type attribute value is text, email, search, password, tel, or url).
18	multiple	multiple	Specify that allow to enter one or more values in an input element.
19	name	text	Specify input element name.
20	pattern	regular_expression	Specify regular expression pattern that must be match to value.
21	placeholder	text	Specify short hint that describe to the user of what value should be enter in the input element.
22	readonly	readonly	Specify that input element should be read-only, user can not modify it.
23	size	number	Specify the width of input character input must be required to filled value.
24	src	URL	Specify the URL of the image that use in submit button of input element (only when type=”image”).
25	step	number	Specify that number interval of an input element. This attribute work with min and max attributes.
26	type	button checkboxcolor date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Specify the input type.
27	value	text	Specify the value of an input element.
28	width	pixels	Specify the width of an input element (only when type=”image”).
	Following attributes has been removed in HTML5.
29	align	left right top middle bottom	Specify the alignment of an input element (only when type=”image”).

Global Attributes

HTML <input> tag support following global attributes.

Sno	Attributes	Value	Description
1	id	unique_name	Declared unique id for an element.
2	class	class_name	Declared one or more classnames for an element.
3	style	styles	CSS inline styles specify an element.
4	title	title	Specify extra details of element contain, this will display as a “tooltip” for an elements.

Event Attributes

HTML <input> tag support following event attributes.

Sno	Attributes	Value	Description
1	onfocus	script	element gets focus on object when script tobe run.
2	onblur	script	element lose the focus on object when scrip tobe run.
3	onabort	script	element gets aborted on object when script tobe run.
4	onchange	script	element gets anytime change on object when script tobe run.
5	onbeforeunload	script	element gets unloaded on object when scrip tobe run.
6	onclick	script	clicked on object when script tobe run.
7	ondblclick	script	double click on object when script tobe run.
8	onkeydown	script	key is pressed when script tobe run.
9	onkeypress	script	key is pressed over element then released when script tobe run.
10	onkeyup	script	key is released over element when script tobe run.
11	onmousedown	script	mouse button was pressed over an element when script tobe run.
12	onmouseout	script	mouse pointer release over an element when script tobe run.
13	onmousemove	script	run mouse pointer moved when script tobe run.
14	onmouseover	script	run mouse pointer move over when script tobe run.
15	onmouseup	script	mouse button is released when script tobe run.
16	onreset	script	form has been reset when script tobe run.
17	onselect	script	Select some content when script tobe run.
18	onsubmit	script	form has been submitted when script tobe run.
19	onload	script	object has load when script tobe run.
20	onchange	script	allow to change the object when script tobe run.
21	onunload	script	unload to the browser window when script tobe run.
22	ondrag	script	element being dragged when script tobe run.
23	ondragend	script	element being stop dragged when script tobe run.
24	ondragenter	script	element being go target dragged when script tobe run.
25	ondragleave	script	element being leave to target dragged when script tobe run.
26	ondragover	script	element being over to target dragged when script tobe run.
27	ondragstart	script	element being start dragged when script tobe run.
28	ondrop	script	element being dropped when script tobe run.
29	onerror	script	element error occurs when script tobe run.
30	onmessage	script	element message display when script tobe run.
31	onerror	script	element error occurs when script tobe run.
32	onmousewheel	script	mouse wheel will be rotate when script tobe run.
33	onscroll	script	scrollbar is scroll when script tobe run.
34	onresize	script	element should be resize when script tobe run.
35	onselect	script	all element content selected when script tobe run.
36	onstorage	script	element should be store in target when script tobe run.

Browser Compatibility

Sno	Browser	Support
1	Chrome	Yes
2	Firefox	Yes
3	Edge	Yes
4	Opera	Yes
5	Safari	Yes
6	Internet Explorer	Yes