HTML input Tag

  • HTML <input> tag used to create an interactive input control in HTML document. HTML <input> tag accept input data from user.

  • HTML <input> tag used with an <form> tag. When the submit form, all input data pass to server.

Example

<!DOCTYPE html>
<html>
<head>
  <title>HTML input tag</title>
</head>
<body>
  <form action="form_tag_get.php" method="post">
    Username: <input type="text" name="username"/>
    <br />
    Password: <input type="password" name="password" />
    <br />
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Run it...   »

<input> Tag Attributes

HTML <input> tag support following specific attributes.

Attributes Value Description
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.
alt text Specify the alternate text only when input type value image.
autocomplete on
off		 Specify autocomplate should be enable or not.
autofocus autofocus Specify that a input should be focus automatically when the page loads.
dirname inputname.dir Specifies text direction of <input> element when will submitted the form.
form form_id Specify one or more forms that associate with input element.
formaction URL Specify the URL that will process the input element when the form is submitted.
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.
formmethod get
post		 Specify the method to use when sending form's data.
formnovalidate formnovalidate Specify that input element should not be validated when submitted.
formtarget _blank
_self
_parent
_top 		Specify where to display the results after submitting form data only when form type submit or image.
height pixels Specify that input element should not be validated when submitted.
list datalist_id Specify the <datalist> tag that contains pre-defined options for an input element.
max number
date		 Specify the maximum (numeric or date-time) value for an input element.
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).
min number
date		 Specify the minimum (numeric or date-time) value for an input element.
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).
multiple multiple Specify that allow to enter one or more values in an input element.
name text Specify input element name.
pattern regular_expression Specify regular expression pattern that must be match to value.
placeholder text Specify short hint that describe to the user of what value should be enter in the input element.
readonly readonly Specify that input element should be read-only, user can not modify it.
size number Specify the width of input character input must be required to filled value.
src URL Specify the URL of the image that use in submit button of input element (only when type="image").
step number Specify that number interval of an input element. This attribute work with min and max attributes.
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.
value text Specify the value of an input element.
width pixels Specify the width of an input element (only when type="image").
Following attributes has been removed in HTML5.
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.

Attributes Value Description
id unique_name Declared unique id for an element.
class class_name Declared one or more classnames for an element.
style styles CSS inline styles specify an element.
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.

Attributes Value Description
onfocus script element gets focus on object when script tobe run.
onblur script element lose the focus on object when scrip tobe run.
onabort script element gets aborted on object when script tobe run.
onchange script element gets anytime change on object when script tobe run.
onbeforeunload script element gets unloaded on object when scrip tobe run.
onclick script clicked on object when script tobe run.
ondblclick script double click on object when script tobe run.
onkeydown script key is pressed when script tobe run.
onkeypress script key is pressed over element then released when script tobe run.
onkeyup script key is released over element when script tobe run.
onmousedown script mouse button was pressed over an element when script tobe run.
onmouseout script mouse pointer release over an element when script tobe run.
onmousemove script run mouse pointer moved when script tobe run.
onmouseover script run mouse pointer move over when script tobe run.
onmouseup script mouse button is released when script tobe run.
onreset script form has been reset when script tobe run.
onselect script Select some content when script tobe run.
onsubmit script form has been submitted when script tobe run.
onload script object has load when script tobe run.
onchange script allow to change the object when script tobe run.
onunload script unload to the browser window when script tobe run.
ondrag script element being dragged when script tobe run.
ondragend script element being stop dragged when script tobe run.
ondragenter script element being go target dragged when script tobe run.
ondragleave script element being leave to target dragged when script tobe run.
ondragover script element being over to target dragged when script tobe run.
ondragstart script element being start dragged when script tobe run.
ondrop script element being dropped when script tobe run.
onerror script element error occurs when script tobe run.
onmessage script element message display when script tobe run.
onerror script element error occurs when script tobe run.
onmousewheel script mouse wheel will be rotate when script tobe run.
onscroll script scrollbar is scroll when script tobe run.
onresize script element should be resize when script tobe run.
onselect script all element content selected when script tobe run.
onstorage script element should be store in target when script tobe run.

Browser Compatibility

  • Google Chrome
    Yes
  • Mozilla Firefox
    Yes
  • Microsoft Edge
    Yes
  • Opera
    Yes
  • Safari
    Yes