HTML <input> Tag
<form name="myForm" action="http://www.htmlcodes.ws/resources/html-forms-action.cfm">
<input type="text" name="myTextField">
<button>Submit</button>
</form>The above example demonstrates usage of the <input> element.
The <input> element represents an input control in a form. Or as W3C describes it, a typed data field, usually with a form control to allow the user to edit the data.
The type attribute is used to specify the data type (and associated control) of the element.
The <input> element is typically included within a <form> element but this is not necessary — an <input> element can stand alone if required.
In the above example, we use the <input> element to provide a text field for the user to enter text. And because the element is enclosed within a <form> element (and it contains a submit <button>), any user input is submitted along with the form when the user clicks the submit button. The action attribute provides the URL for the contents of the form to be submitted to.
Accepted Values for the type Attribute
The following values can be used with the type attribute.
| Value | Data Type | Control Type |
|---|---|---|
hidden | An arbitrary string | N/A |
text | Text with no line breaks | Text field |
search | Text with no line breaks | Text field |
tel | Text with no line breaks | Text field |
url | An absolute IRI | Text field |
email | An email address or list of email addresses | Text field |
password | Text with no line breaks (sensitive information) | Text field that obscures data entry (eg, hides the password by using asterisks (******) or similar) |
datetime | A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC | Date and time control |
date | A date (year, month, day) with no time zone | Date control |
month | A date consisting of a year and a month with no time zone | A month control |
week | A date consisting of a week-year number and a week number with no time zone | A week control |
time | A time (hour, minute, seconds, fractional seconds) with no time zone | A time control |
datetime-local | A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone | Date and time control |
number | A numerical value | Text field or spinner control |
range | A numerical value, with the extra semantic that the exact value is not important | Slider control or similar |
color | An sRGB color with 8-bit red, green, and blue components | A color well. Enables the user to select a color. |
checkbox | A set of zero or more values from a predefined list | Checkbox |
radio | An enumerated value | Radio button |
file | Zero or more files each with a MIME type and optionally a file name | A label and a button |
submit | An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission | Button |
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 | Either a clickable image, or a button |
reset | N/A | Button |
button | N/A | Button |