TRENDING TOPICS

×

HTML input type

HTML Input Element Attribute Type is most important attribute of Input Element, Type attribute is responsible for different kinds of behaviour of Input Element like as text-box, radio, checkbox, button etc.

By using different-2 values for type, we can convert input element in required format by which we can collect users input so let’s see that value we can provide for type attribute.

The HTML input element is used to create interactive controls for web-based forms in order to accept data from the user

Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes -

Input Type Syntax

<input type="_type_value" />

Form input types values

Type_Values Description
text This value is used to create text-box, by which we can accept user's input text
password If we want a text field maked as password type, then we can this, in this typed content will appear in forms of dot (.)
button This value is used to create a html button control, we can perform certain action on clicking this button.
reset It is also look like button, after clicking this, the whole form element become in their default value.
checkbox We can crate a list of check box, either we can select it or deselect it.
file If we want to create a file upload control, then we can create it by using this value. We use file upload to upload a file on web server
hidden Whith this value we can create a hidden element, we can store data in this element and it's not going to visible on web-page.
image We can also create a contorl which is responsible for showing an inmage using this value for type attribute.
radio We can create a list of radio button using this value as type attribute value.

HTML5 input types values

Type_Values Description
datetime_local It is used to create a input element for accepting local data and time without any time zone.
month It is used for input as month and year, To aceive we can provide type value as month.
number It accept only number as input type, there are much advantage using this value.
color To specify a color we can use this value as type attribute value, after click it will give you opetion to select a color.
date Using this control you can create a input element which will accept year, month and date without any time-zone.
email We can create a input email field using this value. this will accept only email format.
range It will accept value as input which are within a defined range.
time This input element accept time without any time-zone.
url It is used to create a input element which will accept only url format.
week This input element is used for input as date with a week-year number and a week number without any time-zone.

Some Important Examples

Type a Text

Address : 
<input type="text" name="_address"/>

Output

Address :

Type as Password

Enter Password : 
<input type="password" name="_pass"/>

Output

Enter Password :

Type as Button

<input type="button" name="btn_submit" value="Submit"/>

Output

Type as Checkbox

<input type="checkbox" name="_apple" value="Fruit"/> Apple <br/>
<input type="checkbox" name="_lion" value="Animal"/> Lion

Output

Apple
Lion

Note : Similarly we can create numbers of type input elements according to requirement only just by changing the type attribute value. So try to implement remaining all on your behalf.

Some Important Input Restrictions

Attribute Description
disabled Thsi attribute is used to mark a input element as disabled.
max It's define max value of input element
maxlength This is used to define maximum length of input element value
min This is used to provide minimum value of input element
pattern Groups related elements in a form
readonly A caption for a fieldset element
required Defines a drop-down list
size A group of related options in a drop-down list
step An option in a drop-down list
value Specifies the default value for an input field

Note : We will learn all restriction and attribute of HTML Input Element in chapter, first try to practice this chapter latter start next.

Advertise With Us

We offer sponsored posts and guest posts with do-follow links, back-links, and other advertising services, To advertise email us at "advertise@gdatamart.com"

© 2021 GDATAMART.COM (All Rights Reserved)