HTML is used not only to display data but also to accept user input.
So what are the ways HTML allows user to provide input?
You can type in a text:
That is represented by the below HTML element:
Just a text box where user can type in text data. This is the default value for input type so you can ignore the type=”text” attribute in the above input tag.
Apart from this , below are the different input types supported by HTML:
- A checkbox:
Given a set of options , user can select multiple options using checkboxes.
The option to be displayed to the user is written between the input opening and closing tags and the actual value is represented by the “value” attribute.
<input type="checkbox" value="Option1">Option 1</input><br> <input type="checkbox" value="Option2">Option 2</input><br> <input type="checkbox" value="Option3">Option 3</input>
- A radio button :
Given multiple options you can choose one and only one of them using a radio button.
Again like checkboxes the values to be displayed to the user are placed between the input opening and closing tags.
<input type=”radio” name=”technology” value=”java”>Java</input>
<input type=”radio” name=”technology” value=”angular”>Angular</input>
<input type=”radio” name=”technology” value=”sql”>SQL</input>
As you see , all the above input elements has the same name “technology”. User can select any one of the different options and that value will be considered for the input.
- A color
A color can be given as an input to a HTML document.
This color value is represented by a seven digit hexadecimal value.
- A date
Since HTMl5 you can also input date to a HTML document
- A time
You can select a time using time input type.
- A date and time
In addition to date , you can select both date and time at the same time.
*Note that “datetime” type has been deprecated in favor of “datetime-local”
- A week.
You can select a particular week of a year using week input type.
- A month
A month can be given as an input using month type.
- A file
You can give a file as an input as well by choosing the file through file explorer which opens on click of the given button
- A number
You can present a text box to input number and restrict the user from entering any string by using “number” input type. If you press a character nothing will appear in the text box for number input type.
- A password
You can type in a password in a text box and show only dots as you type (to conceal the password) using password input type.
- A range
You can specify a range between 0 and 100 using the range input. If you want the exact value between 0 to 100 do not use this input type , use a number input type instead. This can be used to get an approximate range value only.
The minimum and maximum value for the range can be specified using “min” and “max” attributes respectively:
<input type=”range” min=”25″ max=”75″>
- A button
You can give a button press as an input using the button input type
- Submit button
You can submit a html form using submit button input type.
- Image button
Instead of a submit button if you want to present the user with an image of your own you can use image input type. The same action will be executed on clicking this button (the html form will be submitted)
<input type=”image” value=”path to the image”>
The image path should be passed to the value attribute.
- Hidden input
If you want to have an input which you don’t want to display in the html page you can use hidden input. The value specified in the hidden input can be used to submit along with the html form values.
<input type=”hidden” value=”Hello World” id=”message”>
The hidden value can then be retrieved using the “id” attribute.
- Reset input
You can reset all the values in a html form using the reset input button associated with it (You associate a reset button with a html form by including it within the form opening and closing tags)
Apart from these , there are few input types which are very similar to “text” input type but differ only in semantics.
- The “url” input type which lets users type in a URL as input. Browsers can fetch urls from history to assist in filling this text
- The “email” input type for getting email input. Again browsers can provide email suggestions based on history on seeing this type.
- The “search” input type for typing in search keywords.
- The “tel” input type for keying in telephone numbers.
Every input element has an “id” attribute which is used to uniquely identify the element.
Those are all the different ways you can give input to a HTML document.