HTML Tag Reference - HTML tag <input>

This element allows a web page to receive information from the user and to send the information to a server. All <input> elements must be placed within the <form> element's opening and closing tags.

The <input> element's type attribute determines which the input control will be displayed on the page. These are the possible type attribute values:

Value	Description
Button	Creates a button on the page.
Checkbox	Creates a checkbox.
File	Creates a text box with a file browse button. The text box allows a user to select a file to upload to the server.
Hidden	Stores information that is not visible on the web page. This information can be viewed in the source HTML code.
Image	Creates an image that will submit the contents of its form to the server when it is clicked.
Password	Creates a text box that displays an asterisk in place of each character that a user enters.
Radio	Creates a radio button for single choice. Each radio button must have the same value for its name attribute.
Reset	Creates a reset button which will reset the original values of the form.
Submit	Creates a submit button which will submit the contents of the form to the server.
Text	Creates a text box.

Browser compatibility


`<input>`	Yes	Yes	Yes	Yes	Yes

What's new in HTML5

The "align" attribute is deprecated in HTML5. In HTML5, the <input> tag has several new attributes, and the type attribute has several new values.

Attribute

Attribute	Value	Description
accept	file_extension audio/* video/* image/* media_type	Set the types of files that the server accepts 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	Set an alternate text for images for type="image"
autocomplete	on off	Turn on/off autocomplete for <input> element
autofocus	autofocus	an <input> element should automatically get focus when the page loads
checked	checked	Check input for type="checkbox" or type="radio"
disabled	disabled	Disable an <input> element
form	form_id	Set owner form id
formaction	URL	Set the URL for type="submit" and type="image"
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Set the form-data encoding for type="submit" and type="image"
formmethod	get post	Set the HTTP method for type="submit" and type="image"
formnovalidate	formnovalidate	Set that form elements should not be validated when submitted
formtarget	_blank _self _parent _top framename	Set where to display the response after submitting the form for type="submit" and type="image"
height	pixels	the element height for type="image"
list	datalist_id	Refers to a <datalist> element
max	number date	Set the maximum value for an <input> element
maxlength	number	Set the maximum number of characters allowed in an <input> element
min	number date	Set a minimum value for an <input> element
multiple	multiple	Set that a user can enter more than one value
name	text	Set the name of an input element
pattern	regexp	Set a regular expression for validation
placeholder	text	Set a short hint
readonly	readonly	Mark an input field as read-only
required	required	Mark an input field as required before submitting the form
size	number	Set the width, in characters, of an <input> element
src	URL	Set the URL of the image to use as a submit button for type="image"
step	number	Set the legal number intervals for an input field
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Set the type <input> element
value	text	Set the value of an <input> element
width	pixels	Set the width of an <input> element (only for type="image")

Global Attributes

The <input> tag supports the Global Attributes in HTML.

Event Attributes

The <input> tag supports the Event Attributes in HTML.

Default CSS Settings

input {
    display: inline-block; 
}

Example

A demo showing how to use <input> element.

<html>
<body>
     <form name="form2" method="post" action="">
          <p>This is a form with several input elements.</p>
          <input type="text" 
                 name="textfield2" 
                 value="This is a text field" 
                 size="30"/><br/> 
          <input type="checkbox" 
                 name="checkbox2" 
                 value="checkbox"/> A checkbox.<br/> 
          <input type="radio" 
                 name="radiobutton" 
                 value="radiobutton1"/> 
          <input type="radio" 
                 name="radiobutton" 
                 value="radiobutton2"/>Radio buttons.<br/> 
          <input type="button" 
                 name="myButton2" 
                 value="Submit"/> A submit button.<br/> 
          <input type="button" 
                 name="myButton2" 
                 value="Reset"/> A reset button.<br/>
          <br/> 
          <input type="image" 
                 border="0" 
                 name="imageField" 
                 src="http://java2s.com/style/download.png" 
                 width="300" 
                 height="225" 
                 alt="An input image"/>
     </form>
</body><!--from  ww  w  .ja  v  a2 s  .  com-->
</html>

Click to view the demo