HTML CSS Bootstrap Javascript Icons Python
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types
All HTML Tags
<!-- --> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <input> tag

The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user.

How an <input> works varies considerably depending on the value of its type attribute. If this attributes is not specified, the default type adopted is text.

Run code

The <input> element is an empty element which means that it has no end tag.

It is possible to use the :valid and :invalid CSS pseudo-classes to style an input element based on whether or not the element is valid.

Use the <label> element to define labels for <input> elements (See Example below).

Browser compatibility

The <input> element is fully supported by all browsers:

Element
<input> yes yes yes yes yes



Attributes

The following table shows the attributes that are specific to the <input> tag:

HTML5 is new in HTML5

Attribute Value Description
accept file_extension
audio/*
video/*
image/*
media_type
Specifies the types of files that the server accepts (only for type="file")
align left
right
top
middle
bottom
Not supported in HTML5.
Specifies the alignment of an image input (only for type="image")
alt text Specifies an alternative text in case an image can't be displayed (only for type="image")
autocomplete on
off
Indicates whether controls in this form can by default have their values automatically completed by the browser
autofocus - The input element should be automatically focused after the page loaded
checked - Specifies that an input element should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled - Indicates whether the user can interact with the input element
form id Indicates the form that is the owner of the input element
formaction URL Specifies where to send the form-data when a form is submitted (only for type="submit")
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image")
formmethod GET
POST
Defines the HTTP method for sending data to the action URL (for type="submit" and type="image")
formnovalidate formnovalidate Defines that form elements should not be validated when submitted
formtarget _blank
_self
_parent
_top
framename
Specifies where to display the response that is received after submitting the form (for type="submit" and type="image")
height pixels Specifies the height of an input element (only for type="image")
list id Identifies a list of pre-defined options to suggest to the user
max number
date
Indicates the maximum value allowed
maxlength number Defines the maximum number of characters allowed in the input element
min number
date
Indicates the minimum value allowed
multiple - Indicates whether multiple values can be entered in an input of the type email or file
name text Specifies the name of an input element
pattern regex Defines a regular expression which the input element's value will be validated against
placeholder text Provides a hint to the user of what can be entered in the input field
readonly - Specifies whether the input element can be edited
required - Indicates whether the input element is required to fill out or not
size number Specifies the width, in characters, of an input element
src URL Specifies the URL of the image to use as a submit button (only for type="image")
step number Defines the legal number intervals for an input field
type button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Specifies the type <input> element to display
value text Specifies the value of an input element
width pixels Specifies the width of an input element (only for type="image")

Global Attributes

The <input> tag supports the global attributes described in HTML Global Attributes Reference

Event Attributes

The <input> tag supports the event attributes described in HTML Events Reference


More Examples

Use the label element to define labels for input elements:

Run code

Last updated: Tuesday 25 Sep, 2018