How to accept user data in a HTML document?

HTML is used not only to display data but also to accept user input.

This input then can be sent to a server or processed through javascript within the document.

Input Types

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:

<input type=”text”>

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.

Example:

Code:

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

Example:

Code:

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

Code:

<input type=”color”>

• A date

Since HTMl5 you can also input date to a HTML document

Code:

<input type=”date”>

• A time

You can select a time using time input type.

Code:

<input type=”time”>

• A date and time

In addition to date , you can select both date and time at the same time.

Code:

<input type=”datetime-local>

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

Code:

<input type=”week”>

• A month

A month can be given as an input using month type.

Code:

<input type=”month”>

• 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

Code:

<input type=”file”>

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

Code:

<input type=”number”>

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

Code:

<input type=”password”>

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

Code:

<input type=”range”>

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

Code:

<input type=”button”>

• Submit button

You can submit a html form using submit button input type.

Code:

<input type=”submit”>

• 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)

Code:

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

Code:

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

<input type=”reset”>

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.

That’s it!

Those are all the different ways you can give input to a HTML document.