1. Home
  2. HTML Form

HTML Form

An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. .

Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.

HTML Form Syntax

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description
It defines an HTML form to enter inputs by the used side.
It defines an input control.

HTML element

The HTML element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user. Following is the example to show the simple text input.

Example:

Output:

HTML Form

HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.

Output:

HTML TextField Control

Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.

HTML

Output:

HTML textarea tag in form

Label Tag in Form

It is considered better to have label in form. As it makes the code parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag that must be same as id attribute of input tag.

NOTE: It is good to use

Output:

HTML Label Tag in Form

HTML Password Field Control

The password is not visible to the user in password field control.

Output:

HTML Password Field Control

HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in this field.

It will display in browser like below:

HTML 5 Email Field Control

Note: If we will not enter the correct email, it will display error like:

HTML 5 Email Field Control

Radio Button Control

The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

Using radio buttons for multiple options, you can only choose a single option at a time.

Radio Button Control

Checkbox Control

The checkbox control is used to check multiple options from given checkboxes.

Note: These are similar to radio button except it can choose multiple options at a time and radio button can select one button at a time, and its display.

Output:

Checkbox Control

Submit button control

HTML are used to add a submit button on web page. When user clicks on submit button, then form get submit to the server.

Syntax:

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

Output:

Submit button control

HTML
element:

The

element in HTML is used to group the related information of a form. This element is used with element which provide caption for the grouped elements.

Example:

Output:

HTML fieldset element

HTML Form Example

Following is the example for a simple form of registration.


Test it Now

Output:

HTML Form Example

HTML Form Example

Let's see a simple example of creating HTML form.

Test it Now

Supporting Browsers

Element chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
Yes Yes Yes Yes Yes
Next TopicHTML frame Tag




Hot Tutorials

Contact US

Email:[email protected]

HTML Form
10/30