HTML <input>
Tag
The <input>
element is used to create interactive controls to set user information.
The functions and view of the <input>
element vary significantly depending on the value of its type
attribute.
The <input>
element is the most important element for storing data and submitting data to the server using the form
component.
The different types of inputs are as follows
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<<input type="text">
<input type="time">
<input type="url">
<input type="week">
Note: Use the <label>
tag to define labels for input types. The value of the 'for' attribute of the label element must be the same as the value of the corresponding input id.
Example
<form action="actionpage_name">
<table>
<tr>
<td><label for="fname">First name:</label></td>
<td><input type="text" id="fname" name="fname"></td>
</tr>
<tr>
<td><label for="lname">Last name:</label></td>
<td><input type="text" id="lname" name="lname"></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
Click on the "Try it Now" button to see how it works.
Element Attributes
Attribute | Value | Description |
---|---|---|
accept |
file_extension audio/* video/* image/* media_type |
This indicates for the expected file type in the file upload control (only for type="file"). |
alt |
text | This specifies an alternate text for images (only for type="image"). |
autocomplete |
on off |
Specifies whether a input element should have autocomplete enabled. |
autofocus |
autofocus | Specifies that a input element should get focus automatically when the page is loaded. |
checked |
checked | It specifies whether the command or control is checked. |
dirname |
inputname.dir | It specifies the text direction will be submitted |
disabled |
disabled | Specifies that a input element should be disabled. |
form |
form_id | It specifies the form the input element belongs to. |
formaction |
url | It specifies URL to use for form submission. |
formenctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
Specifies how form-data should be encoded when submitted to server (type = "submit" and type = "image"). |
formmethod |
get post |
This Defines HTTP method for sending data to action URL (type = "submit" and type = "image"). |
formnovalidate |
formnovalidate | This specifies that form elements should not be validated at the time of submission. |
formtarget |
_blank _self _parent _top filename |
This specifies where to display the response after submitting the form (for type="submit" and type="image"). |
height |
pixels | This specifies the height of an input element. |
list |
datalist_id | This refers to a datalist element to use in input element. |
max |
number date |
This specifies the maximum value for the input element. |
maxlength |
number | This specifies the maximum number of characters allowed in the input element. |
min |
number date |
This specifies the minimum value for the input element. |
minlength |
number | This specifies the maximum number of characters allowed in the input element. |
multiple |
multiple | This specifies that a user can enter multiple values in a input element. |
name |
text | This specifies the name of an element. |
pattern |
regexp | This specifies a regular expression against which the value of a input element is checked. |
placeholder |
text | This specifies a short hint that describes the expected value. |
readonly |
readonly | This specifies that an input field is read-only. |
required |
required | This specifies that an input field must be filled in before submitting the form. |
size |
number | This specifies the size of the control in characters. |
src |
url | This specifies the URL of the image to use as a submission button (for type = "image only"). |
step |
number any |
This specifies the incremental values which are valid. |
type |
button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
This specifies the type of the input element. |
value |
text | This specifies the value of the input element. |
width |
pixels | This specifies the width of an input element (only for type="image"). |
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>
,
<class>
,
<contenteditable>
,
<contextmenu>
,
<data-*>
,
<dir>
,
<draggable>
,
<dropzone>
,
<hidden>
,
<id>
,
<lang>
,
<spellcheck>
,
<style>
,
<tabindex>
,
<title>
,
<translate>
.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>
,
<onautocomplete>
,
<onautocompleteerror>
,
<onblur>
,
<oncancel>
,
<oncanplay>
,
<oncanplaythrough>
,
<onchange>
,
<onclick>
,
<onclose>
,
<oncontextmenu>
,
<oncuechange>
,
<ondblclick>
,
<ondrag>
,
<ondragend>
,
<ondragenter>
,
<ondragleave>
,
<ondragover>
,
<ondragstart>
,
<ondrop>
,
<ondurationchange>
,
<onemptied>
,
<onended>
,
<onerror>
,
<onfocus>
,
<oninput>
,
<oninvalid>
,
<onkeydown>
,
<onkeypress>
,
<onkeyup>
,
<onload>
,
<onloadeddata>
,
<onloadedmetadata>
,
<onloadstart>
,
<onmousedown>
,
<onmouseenter>
,
<onmouseleave>
,
<onmousemove>
,
<onmouseout>
,
<onmouseover>
,
<onmouseup>
,
<onmousewheel>
,
<onpause>
,
<onplay>
,
<onplaying>
,
<onprogress>
,
<onratechange>
,
<onreset>
,
<onresize>
,
<onscroll>
,
<onseeked>
,
<onseeking>
,
<onselect>
,
<onshow>
,
<onsort>
,
<onstalled>
,
<onsubmit>
,
<onsuspend>
,
<ontimeupdate>
,
<ontoggle>
,
<onvolumechange>
,
<onwaiting>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<input type="checkbox" name="html" value="HTML">
<label for="html"> I am interested in HTML</label><br>
<input type="checkbox" name="css" value="CSS">
<label for="css"> I am interested in CSS</label><br>
<input type="checkbox" name="js" value="JavaScript">
<label for="js"> I am interested in JavaScript</label><br>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
<input type="radio" id="html" name="runningsubject" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="runningsubject" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="js" name="runningsubject" value="JavaScript">
<label for="js">JavaScript</label><br>
Click on the "Try it Now" button to see how it works.
Example
<form action="tryithtml_elements_input_tag04_action01.jsp" method="GET">
<fieldset>
<legend>I am learning:</legend>
<input type="radio" id="html" name="runningsubject" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="runningsubject" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="js" name="runningsubject" value="JavaScript">
<label for="js">JavaScript</label><br>
</fieldset>
<fieldset>
<legend>Interested subject:</legend>
<input type="checkbox" name="html" value="HTML">
<label for="html"> I am interested in HTML</label><br>
<input type="checkbox" name="css" value="CSS">
<label for="css"> I am interested in CSS</label><br>
<input type="checkbox" name="js" value="JavaScript">
<label for="js"> I am interested in JavaScript</label><br>
</fieldset>
<input type="submit" value="Submit">
</form>
Click on the "Try it Now" button to see how it works.