What Is A HTML Form?

Date First Published: 1st February 2023

Topic: Web Design & Development

Subtopic: Web Development

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 5/10

CONTENTS

Elements
Example Of A HTML Form

Learn more about what a HTML form is in this article.

In HTML, a form is an interactive element on a webpage used to process and collect user input. The user input is often sent to a server for processing. Forms can contain checkboxes, text fields, ‘radio’ buttons, submit buttons, and more. They can be used to fill out surveys, collect contact information, gather payment and shipping information, allow users to post comments, and perform other functions.

Elements

HTML forms are made up of the following elements:

Form element

The HTML <form> element provides a section to take input from the user. It does not create a form by itself, but it is a container to contain all the required form elements, such as <input>. All the form elements are located within the opening and closing tags.

Input element

This element specifies an input field where users can enter data. Depending on the ‘type’ attribute, the input element can be displayed in lots of different ways. Some ways include:

<input type="text"> - Displays a single-line text input field.
<input type="radio"> - Displays a ‘radio’ button.
<input type="checkbox"> - Displays a checkbox.
<input type="submit"> - Displays a submit button.
<input type="button"> - Displays a clickable button.

Text fields

The <input type="text"> is used to define a single-line input field for text input.

Labels

The label tag is used to define a label for form elements. For accessibility reasons, it should be used as screen readers will read out loud the label when the user focuses on the input element.

Radio buttons

The <input type="radio"> is used to define a radio button. These circular buttons only allow users to select one of a number of options.

Checkboxes

The <input type="checkbox"> is used to define a checkbox. These allow users to select 0 or multiple choices from a number of options.

Submit buttons

The <input type="submit"> is used to define a button for submitting the form data.

The data is usually submitted to a form handler. This is a file on a server that processes the input and it is specified in the action attribute of the form.

Textarea tag

The textarea tag is used to insert multiple-line text in a form. The size of <textarea> can be specified either using the "rows" or "cols" attribute, or by CSS.

<form>

Enter your message:<br>

</form>

Email fields

HTML5 introduces a new email field. It ensures that a valid email address is entered into the field. The symbols ‘@’ and ‘.’ must be used in the field. If it does not contain these symbols, it will return an error message.

<form>

<label for="email">Email: </label>

</form>