Copyright © tutorialspoint.com

HTML <input> tag



Advertisements

Function:

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

Difference between HTML and XHTML:

In HTML the <input> tag has no end tag.

In XHTML the <input> tag must be properly closed.

Example:

<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>

This will produce following result:

First name:
Last name:

Online Practice:

To Become more comfortable - Do Online Practice

Attributes:

AttributeValueDescription
typebutton
checkbox
file
hidden
image
password
radio
reset
submit
text
Specifies the type of control.
acceptcontent typesSpecifies a comma-separated list of content types that the server accepts.
accept-charsetcharset listSpecifies a list of character encodings that the server accepts. The default value is "unknown".
alignleft
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom
Defines the alignment of content
altalternate textThis specifies text to be used in case the browser/user agent can't render the input control.
checkedchecked If 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.
maxlengthnumberDefines the maximum number of characters allowed in a text field.
namefiled nameAssigns a name to the input control.
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.
sizenumberSpecifies the width of the control. If type="text" or type="password" this refers to the width in characters. Otherwise it's in pixels.
srcURLDefines the URL of the image to display. Used only for type="image".
valuevalueSpecifies the intial value for the control.If type="checkbox" or type="radio" this attribute is required.

Standard Attributes:

AttributeDescription
classDocument wide identifier
dirSpecifies the direction of the text
idDocument wide identifier
titleSpecifies a title to associate with the element.
styleHelps to include inline casecadubf style sheet.
langSets the language code.
xml:langSets the language code.
tabindexHelps determine the tabbing order
accesskeyAccess keys (or shortcut keys)

Event Attributes:

AttributeDescription
onfocusScript runs when control gets focus
onblurScript runs when control loses focus
onselectScript runs when the element is selected
onchangeScript runs when the element changes
onclickScript runs when a mouse click
ondblclickScript runs when a mouse double-click
onmousedownScript runs when mouse button is pressed
onmouseupScript runs when mouse button is released
onmouseoverScript runs when mouse pointer moves over an element
onmousemoveScript runs when mouse pointer moves
onmouseoutScript runs when mouse pointer moves out of an element
onkeypressScript runs when key is pressed and released
onkeydownScript runs when key is pressed
onkeyupScript runs when key is released

Copyright © tutorialspoint.com