HTML Forms

What is HTML Form

HTML Forms are essential for gathering various types of user inputs. These inputs can range from contact information like name, email address, and phone numbers to more specific details like credit card information.

Forms have built-in controls such as inputbox, checkbox, radio-button, submit button, etc. Most of the time, users fill out a form by changing its controls (e.g., entering text, item selection, etc.) and sending it to the web server for processing.

The HTML form is created using the <form> tag. Here is a quick example of the login form:

<form>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</form>

In the next section, we’ll look at the various types of controls you can include in your form.

Input Element

This is the most used element in HTML forms.

It allows you to define different user input fields according to the type attribute. The input element can be a type text field, a password field, a checkbox, a radio button, a submit button, a reset button, a file select box, and several new input types added in HTML5.

The most popular input types are listed below.

Text Fields

One-line text fields are one-line areas where the user can enter text.

The <input> element is used to create one-line text controls. The type attribute of the <input> element has a text value.

Here is an example of a one-line text input to take the username:

<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>

— The output of this example will be as follows:

Password Field

Password fields are the same as text fields, the only difference is that the characters in the password fields are masked, that is, they appear as an asterisk or dot on the screen, so that no one else can read the password in the field.

The same is true for a single line text input controls that are created using the < input> element, whose type attribute contains the password value.

Let’s take a look at a single line password input controls that can be used to take the user password:

<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>

— The output of this example will be as follows:

Radio Buttons

Radio buttons are a type of button that allows the user to select a single option from a set of pre-defined options. They are created by using an <input> element with a type that has a radio value.

Let’s see an example of a radio button that collects user’s gender information:

<form>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</form>

— The output of this example will be as follows:

Checkboxes

Checkboxes are a way for the user to choose one or more options from a set of pre-defined options. The checkbox is created using an element <input> whose type attribute contains the checkbox value.

Here is an example of a checkbox that collects information about user’s interests:

<form>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
</form>

— The output of this example will be as follows:

File Select box

The file fields enable the user to browse for the local file and send the file as an attachment along with the form information.

Web browsers like Google Chrome and Firefox display a file select input box with a Browse button which allows the user to navigate to the local hard drive to select the file.

The <input> element is also created using the type attribute value set to file.

<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>

— The output of this example will be as follows:

Textarea

A textarea is a control that allows you to enter multiple lines of text. A textarea control is a control that lets you input multiple lines of text at once. Textarea controls are created with <textarea> as an element.

<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

— The output of this example will be as follows:

Select Boxes

A select box, on the other hand, is a drop-down list that allows you to choose one or more options from a list of drop-down options. A select box is created by using the element <select> and the element <option>.

Each list item is defined by an element <option> inside <select>.

<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>

— The output of this example will be as follows:

Submit and Reset Buttons

The submit button sends the form information to the web server. When you click on the submit button, the form information will be sent to the specified file in the form’s action attribute.

The reset button returns all the forms controls to their default values. Let’s see how it works:

Enter your name into the text field and click on the submit button to see it in action.

<form action="action.php" method="post">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Enter your name in the above-mentioned text box, and click on Submit button to see it in action.

Grouping Form Controls

Logically related controls and labels are also grouped within a web form with the help of <legend> elements. Categorizing form controls makes it easy for users to find a control, which makes the form easier to use. Let’s see how it works with the following example:

<form>
<fieldset>
<legend>Contact Details</legend>
<label>Email Address: <input type="email" name="email"></label>
<label>Phone Number: <input type="text" name="phone"></label>
</fieldset>
</form>

Frequently Used Form Attributes

The table below shows the most commonly used form element attributes:

In addition, there are a number of other attributes. If you want to know more about them, please check out the link <form> below.