<input> tag in HTML
The <input> tag is used to create interactive controls for web-based forms in order to accept data from the user.
The <input> tag does not have closing tag.
The <input> tag must have type attribute, or else it will be considered as text box.
The type attribute value denotes HTML what type of control it will be.
In HTML this is an important tag.
type attribute values in <input> tag
Most of the type attribute values given below are not important for basic usage.
text value for type attribute in <input> tag
The text value is basic in HTML.
This is used to create an basic textbox in HTML.
password value for type attribute in <input> tag
The password value is used when the user has to enter passwords.
This will create a textbox, where the characters you enter will be in symbols.
If we use password type attribute value, we cant change the default symbol in it. So if any other symbol is to be used we can do it using text type attribute value and adding css -webkit-text-security property.
Below example doesn't work in firefox.
button value for type attribute in <input> tag
The button value is used to create a simple button.
when using type attribute value as button we have to give value attribute. Value attribute display the given name over the button.
In input type="button" we cannot add image as icon for that button. Instead we can assign image in <button> tag.
checkbox value for type attribute in <input> tag
The checkbox value is used to create checkbox.
When creating a check box, we have to give the input element within the label tag, if it is not given within the label tag we cannot select the checkbox by clicking on the label.
we can also create checkbox using input tag by giving outside the label tag. To do so we have to assign a same value for id attribute in input tag and for attribute in the label tag.
radio value for type attribute in <input> tag
The radio value is used to create radio button.
When creating a radio button, we have to give the input element within the label tag, if it is not given within the label tag we cannot select the radio button by clicking on the label.
we can also create radio button using input tag by giving outside the label tag. To do so we have to assign a same value for id attribute in input tag and for attribute in the label tag.
When there has to be more than one radio buttons, name attribute must be given, otherwise all radio buttons will be selected.
range value for type attribute in <input> tag
The range value is used to create a slider.
We can select the values within the given min and max values only.
image value for type attribute in <input> tag
It is used to display an image.
When you assign the value as "image", you must use src attribute to assign the path of the image.
Difference between <img> tag and <input type="image">
Both produce the same result, but <img> tag doesn't have any customization attributes, but <input type="image"> has some attributes like cursor:auto; and etc.
number value for type attribute in <input> tag
This is used only when numbers has to be given.
From the below example user can directly enter below 5 or above 10.
We can give direct values above or below the given range here, but for auto validation we have to give it under the form.
search value for type attribute in <input> tag
This looks like textbox but works similar to an address bar in the mobile browser.
The entered text can be cleared by pressing x button
hidden value for type attribute in <input> tag
This is used to hide values in html document.
This must contain value attribute.
The above example does not show any output, because the value is hidden.
file value for type attribute in <input> tag
This is used to select any types of file from local system.
After selecting the file(s), it can be send to the server by using javascript.
With the help of multiple attribute, more than one files can be selected by pressing ctrl + mouse click.
accept attribute is used to specify which type of files can be selected by the user.
color value for type attribute in <input> tag
The color value is used to select the color.
Selected color value can be accessed from javascript.
If the below javascript code is difficult to understood, leave it. We can see it later chapters.
date value for type attribute in <input> tag
date value is used to select or enter the date.
When you click on the arrow point, a date picker pop up show, the design varies depending on browser.
datetime-local value for type attribute in <input> tag
This datetime-local value is used to select the date and time.
datetime value for type attribute in <input> tag - Don't use this
it is used to select date and time.
This datetime value is obsolete. It might work on some browsers.
Instead of this we can use datetime-local value in <input> tag.
month value for type attribute in <input> tag
This is used to select the month and year.
week value for type attribute in <input> tag
This is used to select the week of the year.
time value for type attribute in <input> tag
This is used to select the time.
reset value for type attribute in <input> tag
This value is used with <form> tag.
This is used to reset all value(s) to initial state within the <form> tag.
In the below example enter any text in the textbox and click reset button.
We can change the default name "reset" to our own words using value attribute.
submit value for type attribute in <input> tag
This value is used with <form> tag.
This is used to submit the whole form data to the server page.
In the below example we haven't given the server page where the values entered to be sent, so the current page will be reloaded.
tel value for type attribute in <input> tag
This works similar to the text field.
This validates whether the given value is telephone number or not.
Due to different phone number formats, there is no default pattern for it. So we need to use the pattern attribute to validate this field.
email value for type attribute in <input> tag
This works similar to the text field.
This is used to validate whether the given value is email or not.
url value for type attribute in <input> tag
This works similar to the text field.
This is used to validate whether the given value is url or not.