HTML <input> Tag

Advertisements


Description

The HTML <input> tag is used within a form to declare an input element - a control that allows the user to input data.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML input Tag</title>
</head>
<body>
<form action="/cgi-bin/hello_get.cgi" method="get">
First name: 
<input type="text" name="first_name" value="" maxlength="100" />
<br />
Last name: 
<input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

This will produce following result:

First name:
Last name:

Global Attributes

This tag supports all the global attributes described in - HTML Attribute Reference

Specific Attributes

The HTML <input> tag also supports following additional attributes:

AttributeValueDescription
accept content typesSpecifies a comma-separated list of content types that the server accepts.
alignleft
right
top
middle
bottom
Deprecated-Defines the alignment of content
alt textThis specifies text to be used in case the browser/user agent can't render the input control.
autocomplete html-5on
off
Specifies for enabling or disabling of autocomplete in <input> element
autofocus html-5autofocuspecifies that <input> element should automatically get focus when the page loads
checkedcheckedIf type="radio" or type="checkbox" it will already be selected when the page loads.
disableddisabledDisables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
formhtml-5form_idSpecifies one or more forms
formaction html-5URLSpecifies the URL of the file that will process the input control when the form is submitted
formenctypehtml-5application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the form-data should be encoded when submitting it to the serve
formmethod html-5post
get
Defines the HTTP method for sending data to the action URL
formnovalidate html-5formnovalidateDefines that form elements should not be validated when submitted
formtarget html-5_blank
_self
_parent
_top
Specifies the target where the response will be display that is received after submitting the form
height html-5pixelsSpecifies the height
list html-5datalist_idSpecifies the <datalist> element that contains pre-defined options for an <input> element
max html-5autofocusSpecifies the maximum value.
maxlengthnumberDefines the maximum number of characters allowed in a text field
min html-5numberSpecifies the minimum value.
multiple html-5multipleSpecifies that a user can enter multiple values
name textAssigns a name to the input control.
pattern html-5regexpSpecifies a regular expression that an <input> element's value is checked against
placeholder html-5textSpecifies a short hint that describes the expected value.
readonlyreadonlySets the input control to read-only. It won't allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls.
required html-5requiredSpecifies that an input field must be filled out before submitting the form
size numberSpecifies the width of the control. If type="text" or type="password" this refers to the width in characters. Otherwise it's in pixels.
src URLDefines the URL of the image to display. Used only for type="image".
step html-5numberSpecifies the legal number intervals for an input field
type button
checkboxcolor
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Specifies the type of control.
valuetextSpecifies the intial value for the control.If type="checkbox" or type="radio" this attribute is required.
width html-5pixelsSpecifies the width

Event Attributes

This tag supports all the event attributes described in - HTML Events Reference

Browser Support

ChromeFirefoxIEOperaSafariAndroid
YesYesYesYesYesYes

html_tags_reference.htm