Html

In the previous tutorial, we've talked about Form and the most basic Inputs.
HTML supports various type of Inputs to make life better. :D
Let's talk more about Inputs and their uses.

Start Reading ;

Other common Input types

There are 3 groups of common input types:

  1. Text-field & Text-area
  2. Radio-button & Check-box & Dropdown-list
  3. File-browser & Others :D

1. Text-field & Text-area

Yes, we’ve seen text-fields in the previous tutorial.

A text-area is nothing but a text-field expanded to multiple lines. To create a text-area, we use <textarea> tags instead of <input> tags.

Sample code:

Result:

Recipient:

Message:

2. Radio-button & Check-box & Dropdown-list

The next common input types are radio-button, check-box, and dropdown-list. These input types help us to provide some options for visitors to choose.

Radio-button & Check-box

Radio-button and check-box are created by using <input> tags and look quite the same. While radio-buttons allow only 1 option checked, check-boxes allow more than 1 option checked.

Sample code:

Result:

Radio-buttons:
Male | Female | Other

Check-boxes:
Red | Green | Blue

You may notice that there is some new attributes used here: value attribute and checked attribute.

As these inputs do not allow visitors to enter their own information (values). We need to specify default value for each choice using value attribute. The value attribute can also be used to specify default value for text-field and text-area.

The checked attribute is used to set a choice checked by default.

Dropdown-list is used in case there are over numbers of choices (for example: a nationality list)

Sample code:

Result:

Hometown:

3. File-browser & Others

Here is how to create a Browse... button which is used to open built-in file-browser of web browsers:

Sample code:

Result:


Besides basic common input types which were listed above, there’re plenty of other input types which are cool and supported by up-to-date browsers. Please, click on the link below if you want to learn further about them.

References: input type attribute

The <label> tags

This is a convenient to make radio-buttons and check-boxs more friendly to mobile user. With <label> tags, we can create clickable areas which are bound to radio-buttons and check-boxes. So, visitors can either tap on control elements or label elements.

The most simple way to bind a label element to a control element is putting the control element inside the label element.

Sample code:

Result:

Nice colors:

A label element can also be bound to a control element using for attribute. In this case, the control element must have an id.

Sample code:

Result:



I've read and agree to the terms.

Our tutorial about HTML Forms & Inputs has finished. This is also the last tutorial of my HTML for beginners series. For further learning, please checkout these resources: