HTML Input

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

Example

Try Yourself

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.

Example

Try Yourself

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.

Example

Try Yourself

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.

Example

Try Yourself

In input type="button" we cannot add image as icon for that button. Instead we can assign image in <button> tag.

Example - Difference between input type="button" and <button> tag

Try Yourself

checkbox value for type attribute in <input> tag

The checkbox value is used to create checkbox.

Example 1 - Simple checkbox

Try Yourself

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.

Example 2 - with <label> tag

Try Yourself

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.

Example 3 - with <label> tag and for attribute

Try Yourself

radio value for type attribute in <input> tag

The radio value is used to create radio button.

Example 1 - Simple Radio button

Try Yourself

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.

Example 2 - with <label> tag

Try Yourself

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.

Example 3 - with <label> tag and for attribute

Try Yourself

When there has to be more than one radio buttons, name attribute must be given, otherwise all radio buttons will be selected.

Example 4 - Usage of name attribute with <input> tag and radio value

Try Yourself

range value for type attribute in <input> tag

The range value is used to create a slider.

Example 1

Try Yourself

We can select the values within the given min and max values only.

Example 2 - range value with min and max attributes

Try Yourself

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.

Example 1

Try Yourself

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.

Example 2

Try Yourself

number value for type attribute in <input> tag

This is used only when numbers has to be given.

Example 1

Try Yourself

From the below example user can directly enter below 5 or above 10.

Example 2 - min and max attribute

Try Yourself

We can give direct values above or below the given range here, but for auto validation we have to give it under the form.

Example 3 - within <form> tag

Try Yourself

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

Example

Try Yourself

hidden value for type attribute in <input> tag

This is used to hide values in html document.

This must contain value attribute.

Example

Try Yourself

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.

Example 1

Try Yourself

With the help of multiple attribute, more than one files can be selected by pressing ctrl + mouse click.

Example 2 - Select multiple files

Try Yourself

Example 3 - accept attribute

Try Yourself

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.

Example 1

Try Yourself

If the below javascript code is difficult to understood, leave it. We can see it later chapters.

Example 2 - Access color value using javascript

Try Yourself

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.

Example 1

Try Yourself

Example 2 - Access date value using javascript

Try Yourself

datetime-local value for type attribute in <input> tag

This datetime-local value is used to select the date and time.

Example 1

Try Yourself

Example 2 - Access datetime-local value using javascript

Try Yourself

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.

Example

Try Yourself

month value for type attribute in <input> tag

This is used to select the month and year.

Example 1

Try Yourself

Example 2 - Access month value using javascript

Try Yourself

week value for type attribute in <input> tag

This is used to select the week of the year.

Example 1

Try Yourself

Example 2 - Access week value using javascript

Try Yourself

time value for type attribute in <input> tag

This is used to select the time.

Example 1

Try Yourself

Example 2 - Access time value using javascript

Try Yourself

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.

Example

Try Yourself

We can change the default name "reset" to our own words using value attribute.

Example

Try Yourself

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.

Example

Try Yourself

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.

Example 1 - without <form> tag

Try Yourself

Example 2 - with <form> tag and pattern attribute

Try Yourself

Example 3 - Custom error message using title attribute

Try Yourself

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.

Example 1 - without <form> tag

Try Yourself

Example 2 - with <form> tag

Try Yourself

Example 3 - Custom error message using title attribute

Try Yourself

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.

Example 1 - without <form> tag

Try Yourself

Example 2 - with <form> tag

Try Yourself

Example 3 - Custom error message using title attribute

Try Yourself