HTML Form Input Elements

143
views
html form input elements

1Input type – Text

Input type text allows user to input one line data like, name.

2Input type – Multi line text

By default multiple line area is shown by the browser.
You can customize area using rows and columns attribute.

3Input type – Password

every character typed in the password input field is masked with asterisk or circles.

4Input type – Number

Allows user to enter number in the input field.
Range can be selected using max and min attributes.

Output
Quantity (between 1 and 5):

5Input type – Email

Allows user to enter his email address.
Some browsers check the validity of email by looking for @ sign in the provided address and extension like .com or .in

6Input type – url

Allows user to enter the url in the given field.
Some browsers auto validate the provided url.

7Input type – Radio Button

Allows user to select only one value.

Output
Male
Female
Other

8Input type – Checkbox

Checkbox allows user to select one or more values.

Output
I have a bike
I have a car

9Input type – Color

Allows user to select a color.
Value attribute is to set a default color.

Output
Select your favorite color:

10Input type – Date

Allows user to select a date.
User sees a date picker to select.

Output
Birthday:

In case you want to limit the date, use max and min attributes.

Output
Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

11Input type – Date and time

If you want to allow user to submit date and time in a single field then you can use datetime input type.

Output
Birthday (date and time):

12Input type – Month and Year

Allows user to select the month and year.

Output
Birthday (month and year):

13Input type – Week

Allows user the select the week from date picker.

Output
Select a week:

14Input type – Time

Allows user to select time on the given field.

Output
Select a time:

15Input type – Search

Used to create a search input field.
It behave like a simple text input field.

Output
Search Google:

16Input type – File

Allows user to upload a file by clicking the browse button.
File type allowed to upload can be specified using attribute.

Output
Select a file:

17Drop-down list

Drop down list can be created using the following elements-

  • <select> element to define the drop down list input.
  • <option> element to define the options to select from.

Drop-down list shows first option by default.
selected attribute can be used to assing preselected option.
selected attribute doesn’t have any value (lonely attribute).

Output

As you can see in the output above, only one option is visible.
Suppose you want to show multiple list options, in this case, use the size attribute.

Output

Now suppose you want to allow to select multiple options.
In this case, use multiple attribute within select element.
User can hold Ctrl or Cmd and select multiple options.

Output

18Datalist Input

Datalist is created to provide suggestions in a dropdown list as the user clicks to start typing in the input field.

Output

  1. First thing is to create an input element with list attribute. (Line 1)
  2. Now, create a list of items that will be shown. This list is defined using datalist element.

The option elements (empty tags) are added to the datalist element with value attribute that contains the list content.

Important: The id attribute is specified to the datalist element which is same as the list attribute value of the input element.


LEAVE A REPLY

Please enter your comment!
Please enter your name here