Home HTML HTML input Tag with Example

HTML input Tag with Example

15
0

HTML <input> tag represents HTML input control.

HTML input tag generally used to specify submit button, textbox, checkbox, radio buttons, images and much more within a web page. It is also very useful element for HTML <form> tag to submit web forms.

Note: The <input> tag mostly supported in all major web browsers.

Sample Code

<form action="index.php" method="post">
<fieldset>
<legend>Enter Your LogIn Details</legend>
User Name: <input type="text" /><br />
Password: <input type="password" /><br />
<input type="submit" value="LogIn" />
</fieldset>
</form>

Sample Result

Enter Your LogIn Details

User Name:
Password:

Tip: You can see the complete List of HTML Elements here.

Tag Specific Attributes Support

Following are few input tag attributes that are supported by <input> tag.

Attribute Value Description
align bottom
left
middle
right
top
Represents the align for the input types
alt alt_text Represents alternate text especially when the input type is image and display text when image is no longer available on destination
autocomplete off
on
Represents autocomplete feature for an input element to turn on or off
checked checked Represents whether an input element is checked or not on page load especially when the input type is checkbox or radio button
disabled disabled Represents whether an input element is disabled or not on page load
height pixel Represents the height especially when the input type is image
maxlength number Represents the maximum length(in characers) to be inputted for the input elements especially when the input type is text or password
name input_name Represents the name of the input element
src url Represents url to link image within web page especially when the input type is image
type button
checkbox
email
file
hidden
password
radio
reset
search
submit
text
url etc.
Represents the type of the input element
value value_text Represents the value for the input elements
width pixel Represents the width especially when the input type is image

Standard Attributes Support

HTML <input> tag supports mostly all HTML Attributes. Following are some most common attributes that are used by <input> tag. You can get more details about available HTML Attributes here.

Attribute Value Description
class user_defined Represents a style for an element which is used in CSS style sheet
id user_defined Represents unique id for an element
lang lang_code Represents the language of the element for it’s content
style css_properties Represents an inline style for an element for e.g style=”color:red;text-decoration:underline;”
title user_defined Represents a tooltip information for an elements like img, a, abbr etc

Event Attributes Support

The “script” is invoked when a certain “event” occurs. Each event handler content attribute deals with a different event. HTML <input> tag supports mostly all HTML Event Attributes. Following are some most common event attributes that are used by <input> tag. You can get more details about available HTML Event Attributes here.

Attribute Value Description
onclick script Event Fires immediately when mouse click on the specified element
ondblclick script Event Fires immediately when mouse double-click on the specified element
onkeydown script Event Fires immediately when user is pressing a down key from keyboard
onkeypress script Event Fires immediately when user presses a key from keyboard
onkeyup script Event Fires immediately when user releases a key from keyboard
onmousedown script Event Fires immediately when mouse pointer gets down from an element
onmousemove script Event Fires immediately when mouse pointer moves over an element
onmouseout script Event Fires immediately when mouse pointer gets out from an element
onmouseover script Event Fires immediately when mouse pointer moves over an element
onmouseup script Event Fires immediately when a mouse pointer is released over an element
Previous articleHTML img Tag with Example
Next articleHTML ins Tag with Example
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

thirteen − 5 =