HTML Forms

HTML Forms are required to collect different kinds of user inputs, such as contact details like name, email address, phone numbers, or details like credit card information, etc.

Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit buttons, etc. Users generally complete a form by modifying its controls e.g. entering text, selecting items, etc. and submitting this form to a web server for processing.

The <form> tag is used to create an HTML form. Here’s a simple example of a login form:

Example

<form>

<label>Username: <input type=”text”></label>

<label>Password: <input type=”password”></label>

</fieldset>

</form>

The following section describes different types of controls that you can use in your form.

Input Element

This is the most commonly used element within HTML forms.

It allows you to specify various types of user input fields, depending on the type attribute. An input element can be of type text field, checkbox, password field, radio button, submit button, reset button, etc. and several new input types introduced in HTML5.

The most used input types are described below.

Text Fields

Text fields are one line areas that allow the user to input text.

Single-line text input controls are created using an <input> element, whose type attribute has a value of text. Here’s an example of a single-line text input used to take username:

Example

<form>

<label for=”username”>Username:</label>

</form>

— The output of the above example will look something like this:

Note:The <label> tag to define labels for <input> elements. If you want your user to enter several lines you should use a <textarea> instead.

Password Field

Password fields are similar to text fields. The only difference is; characters in a password field are masked i.e. shown as asterisks or dots. This is to prevent others from reading the password on the screen. This is also a single-line text input controls created using an <input> element whose type attribute has a value of password.

Here’s an example of a single-line password input used to take user password:

Example

<form>

<label for=”user-pwd”>Password:</label>

</form>

— The output of the above example will look something like this:

Radio Buttons

Radio buttons are used to let the user select exactly one option from a pre-defined set of options. It is created using an <input> element whose type attribute has a value of radio.

Example

<form>

<label for=”female”>Female</label>

</form>

— The output of the above example will look something like this:

Note:If you want to allow your user to select more than one option at the same time you should use the check boxes instead.

Checkboxes

Checkboxes allows the user to select one or more option from a pre-defined set of options. It is created using an <input> element whose type attribute has a value of checkbox.

Example

<form>

<label for=”soccer”>Soccer</label>

<label for=”cricket”>Cricket</label>

<label for=”baseball”>Baseball</label>

</form>

— The output of the above example will look something like this:

File Select box

The file fields allow a user to browse for a local file and send it as an attachment to the form data. It normally rendered as a text box with a button that enables the user to browse for a file. However, the user can also type the path and name of the file in the text box.

This is also created using an <input> element, whose type attribute value is set to file.

Example

<form>

<label for=”file-select”>Upload:</label>

</form>

— The output of the above example will look something like this:

Textarea

Textarea is a multiple-line text input control that allows a user to enter more than one line of text. Multi-line text input controls are created using an <textarea> element.

Example

<form>

<label for=”address”>Address:</label>

</form>

— The output of the above example will look something like this:

Select Boxes

A select box is a dropdown list of options that allows user to select one or more option from a pull-down list of options. Select box is created using the <select> element and <option> element. The option elements within the <select> element define each list item.

Example

<form>

<option value=”sydney”>Sydney</option>

<option value=”melbourne”>Melbourne</option>

<option value=”cromwell”>Cromwell</option>

</select>

</form>

— The output of the above example will look something like this:

Submit and Reset Buttons

A submit button is used to send the form data to a web server. When submit button is clicked the form data is sent to the file specified in the form’s action attribute to process the submitted data. A reset button resets all the forms control to default values.

Example

<label for=”first-name”>First Name:</label>

</form>

— The output of the above example will look something like this:

Type your name in the text field above, and click on submit button to see it in action.

Note:you can also create buttons using the <button> element. Buttons created with the <button> element function just like buttons created with the input element, but they offer richer rendering possibilities.

Most frequently used form attributes are:

Attribute	Description
name	The name of the form.
action	URL of the program that processes the information submitted via form.
method	The HTTP method that the browser uses to submit the form. Possible values are get and post.
target	A name or keyword indicating the target page where the result of the script will be displayed. The reserved keywords are _blank, _self, _parent and _top.

Note:The name attribute has been included for backwards compatibility. You should instead use the id attribute to identify elements.