JavaScript Tutorial

HMTL Form

HTML forms are required if you want to collect some data from the site visitor. For example: If a user wants to purchase some items on the internet, he/she must fill out the form with their details such as shipping address and credit/debit card details so that this information can be stored and used by the system to ship the item to the correct address.

HTML forms allow websites to collect user data, such as their name, email address, password, phone number, and other information that needs to be sent to the server for processing.

HTML Form Syntax

An HTML form is created using the <form> tag, which defines the start and end of the form section. The form tag also contains various attributes such as action, method, and name to specify where to send the form data and how to send it.

Inside the <form> tag, various form controls are added using different input tags such as <input>, <textarea>, <select>, etc. Each input tag has its own set of attributes that define the type of input control and its properties.

HTML Form Tags

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

Tag

Description

<form>

It defines an HTML form, it groups all the form elements together.

<input>

It defines an input control.

<textarea>

It defines a multi-line input control.

<label>

It defines a label for an input element.

<fieldset>

It groups the related element in a form.

<legend>

It defines a caption for a <fieldset> element.

<select>

It defines a drop-down list.

<optgroup>

It defines a group of related options in a drop-down list.

<option>

It defines an option in a drop-down list.

<button>

It defines a clickable button.

HTML <Form> Element

The HTML <form> element is used to create a section within a web document that allows users to input data, which can be submitted to a web server for processing.

The <form> element does not itself create a form but it is a container t to hold all the required form elements, such as <input>, <label>, <textarea> etc.

HTML <input> Element

The HTML <input> element is a fundamental form element that is used to create various types of form controls to collect input from the user.

The <input> element has many attributes that allow you to create different types of form controls such as text fields, checkboxes, radio buttons, password fields, and more. For example, the "type" attribute of the <input> element can be set to "text" to create a simple text input field.

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

HTML Text Fields

In HTML, text fields are created using the <input> element with the "type" attribute set to "text". This creates a single-line text field control that allows users to enter text. The name attribute is optional, but it is required for the server-side component such as JSP, ASP, PHP, etc.

HTML Label Element

In HTML, the <label> element is used to associate text with form elements such as <input> elements. Labels are important for creating user-friendly forms and improving accessibility, as they provide a descriptive name for each form element.

Although it's an option to use <label> tag, it is almost always preferred to use this tag, one good use of this tag is to focus on the input field when it's corresponding label is clicked or touched, it makes the best use case when it comes to touchscreens.

HTML Textarea

The <textarea> element in HTML is used to create a multi-line text input field in a form. This element is useful when you want to allow users to enter longer pieces of text, such as comments or messages.

HTML Radio Button

The radio button is a form element that allows users to select only one option from a set of options. Radio buttons are typically used in situations where the user must choose one option from multiple options, such as selecting a gender or answering a multiple-choice question.

HTML Checkboxes

The checkbox control is used to check multiple options from given checkboxes. These are similar to the radio button except for the fact that checkboxes allow to select multiple options at a time and the radio button allows only one at a time.

HTML Submit Button

HTML <input type="submit"> is used to add a submit button for the form. When a user clicks on the submit button, the form gets submitted to the server with the collected form data as name-value pair, where name is the name of a particular input field and value is the input entered by the user.

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

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

The name attribute can be omitted here, as this is not the part of the information.

Supporting Browsers

Element

“Google Chrome

Microsoft

Firefox

Opera

Safari

Marquee

Yes

Yes

Yes

Yes

Yes

Go back to Previous Course