What is a HTML form

An HTML form consists of several form elements in which a user can enter data through inputs and submit the form data for processing to a web server. In HTML, a form tag is used to encapsulate all other form elements. Common form elements may include input fields, field labels, form actions, and a form submit button. These elements allow the web browser to create and render the form to the user’s computer by using the web browser's HTML engine.

Here is a list of the most commonly found input fields inside a form:

• 1

  Email

• 2

  Radio Buttons

• 3

  Checkboxes

• 4

  File upload

• 5

  Number

• 6

  Date

• 7

  Text

• 8

  Textarea

• 9

  URL

• 10

  Tel

Each input element uses a field label or label tag to describe the input data that is expected from the user. For example, an email input field might say, “What’s your email address?”. Field labels are associated with a particular input by referencing the input field ID. The field label uses the for attribute to specify the input field ID.

Input fields can be arranged or added to suit the purpose of the given form. For example, a contact form might be comprised of an email input, a name input, a tel input, and a text area. Whereas a job resume form may use different input fields, such as a file upload field, to capture the user's resume.

When a user enters the data into the form's input elements, a form action tells the browser where to send the submitted form data. The form action points to a URL located on the web server that can process the forms' submission, validate, and safely store the form data in the web server's database. The form action is located inside the opening form tag, is not visible to the user, and can only be located by inspecting the web page. Without the form action attribute, the form data cannot be processed, which is a required attribute for the form to be successfully submitted.

A form action is not required when using a JavaScript event listener to listen for when the form's submit button is clicked. This is called a submit event listener and will bypass the need for a form action attribute.

In addition to form elements, there are form attributes. Attributes can be used to tell the browser useful information for allowing or preventing certain actions to take place with the form. These actions may include whether to allow auto-completing input fields with user data that has been saved to the computer, or to validate the forms' data when submitting the form.

Form validation, also known as client-side validation, can be addressed with HTML by using a combination of input attributes. Such as a required attribute that prevents a form submission if the input field is either empty or a selection has not been made. The MinLength and MaxLength attributes define the minimum and maximum character count, and in the case of a number input, the min or max attribute defines to the browser the min and max numerical values that are acceptable. Additionally, the regex and pattern attributes define the acceptable formatting for the input. E.g., +1 (999)999-9999 instead of 9999999999.

HTML is a starting point for creating semantically correct webform markup. HTML forms by themselves are not functional. It is important to note that while a form may exist on the website, it does not handle server-side validation or the routing of captured form data. In order to have a basic functioning form, an HTML form also needs a server-side script, a database or an email server in order to send form notifications and/or to view submissions.

HTML forms are a crucial and integral starting point for any website or web application needing to collect data. HTML forms can be added to any HTML document or to any webpage and are fully supported across all major web browsers.