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.