Everything You Need to Know About HTML Form

@ HTML

Introduction

Web pages often need to receive information provided by users. For example, logging in requires “email and password”, booking a hotel requires entering “dates and room types”, or signing up for a competition requires submitting “work files”… Different types of data can easily be handled through native HTML tags. Whenever you want to submit data on a webpage, it’s a good time to use HTML forms.

Starting with <form>

In the early days before AJAX🔗 became popular, web pages used forms to submit data to servers, typically using the HTTP GET method by default, or it can be customized by specifying the method attribute:

<form method="POST">
  <!-- ... -->
</form>

For instance, if the form is on https://webdong.dev/contact, a POST request will be sent to that URL when the submit event is triggered. Of course, the backend will also need to be set up to listen for these requests to receive the data submitted by the form.

<form action="/new-contact" method="POST">
  <!-- ... -->
</form>

You can additionally specify the target URL using the action attribute, which will send a POST request to the relative address /new-contact, which translates to https://webdong.dev/new-contact.

In practice, native form action are rarely used for server communication anymore; this is just to illustrate some historical usage and explain why many tutorials mention blocking so-called “default events”. Originally, forms were designed to function this way in the chaotic early days of JavaScript.

Today, it’s common to use the preventDefault🔗 method to prevent the browser’s default action from occurring (sending requests to the server and refreshing the page) and manipulating form contents through JavaScript:

// Selecting the current DOM form
const form = document.querySelector('form');
// Execute function if the form is submitted
form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent the browser's default action
  const formData = new FormData(form); // Obtain form contents
});

Although there is no problem with not using <form> from a syntactical standpoint, it is still recommended to use it when writing form inputs for the following reasons:

  1. Organize data - <form> helps to group related form inputs together, allowing users to submit data more easily. For example, when asking users to fill in their name, email address, and message, these form elements are typically placed within the same <form> tag to submit the data together.
  2. Clear semantics - Clearly indicating what content is used for forms, as opposed to normal text or other elements. This helps maintain the structure and readability of the code, making it easier for developers and maintainers to understand and handle it.
  3. Form control - You can use the default methods provided by forms, such as submit🔗, reset🔗, or validate🔗 to implement common form functions.

For instance, the following code represents a simple form for entering a name, which can trigger the submission or reset event via the submit button:

<form>
  <label for="name">Name</label>
  <input id="name" type="text" placeholder="Please enter your name" />
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Form Controls

Specifically, there are several common types of form controls. While they appear numerous, their usage is quite similar. This article highlights some of the most commonly used ones:

  • input - single line text
  • textarea - multi-line text
  • select boxes - select a single option from a dropdown menu
  • radio buttons - select a single option from multiple options
  • checkboxes - select none, one, or multiple options from multiple options
  • file uploads - upload files
  • more…

<label>

The <label> element is used to describe form controls and can establish a clear relationship with the for attribute and the control’s corresponding id or create an implicit association by wrapping the control. Both methods are correct:

<label for="name">Name</label> <input id="name" type="text" placeholder="Please enter your name" />
<label>
  Name
  <input type="text" placeholder="Please enter your name" />
</label>

It’s important to note that <label> exists to aid in explaining form controls, and each form control should ideally have an associated label. Skipping this for aesthetic reasons can create confusion for users about the purpose of the fields. You can add descriptions for form controls without <label> by using methods such as: hiding labels🔗, using aria-label🔗, using aria-labelledby🔗, or using the title attribute🔗 as needed.

<input>

<input type="text" />

The <input> element is one of the most basic and frequently used elements in a form, capable of receiving various types of data, such as text, numbers, dates, times, email addresses, passwords, files, etc. The <input> element has multiple attributes🔗, with the most common being required🔗, type🔗, placeholder🔗, value🔗, and name🔗, disabled🔗, etc.

A. For example, you can add a textual hint to the input box using the placeholder attribute:

<input type="text" placeholder="input tag example..." />

B. You can also pre-fill the input box with a default value using the value attribute:

<input type="text" value="I am the default text" />

C. Or you can require filling it out before submission using the required attribute:

<input type="text" required />

D. Or use disabled to disable its functionality:

<input type="text" disabled />

You can also use the type attribute to restrict data entry types; for example, type="email" ensures that the input data must match the email format, type="number" restricts data input to numbers, type="password" hides the input data and prevents copying and cutting, and type="file" allows the user to select files for upload. You can specify the desired data type through the type attribute.

Please select a color:

<textarea>

The <textarea> element is used to receive multi-line text. You can set the default number of rows and columns using the rows and cols attributes, and you can also set default text and values using the placeholder and value attributes.

References