What are web forms?

Web forms are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage, or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).

A web form's HTML is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as HTML forms. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.

Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and visually impaired users.

The form element

All forms start with a <form> element, like this:

<form action="/my-handling-form-page" method="post"></form>

This element formally defines a form. It's a container element like a <section> or <footer> element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's standard practice to always set at least the action and method attributes:

• The action attribute defines the location (URL) where the form's collected data should be sent when it is submitted.
• The method attribute defines which HTTP method to send the data with (usually get or post).

In terms of HTML code we need something like the following to implement these form widgets:

<form action="/my-handling-form-page" method="post">
  <p>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </p>
  <p>
    <label for="mail">Email:</label>
    <input type="email" id="mail" name="user_email" />
  </p>
  <p>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </p>
</form>

The <p> elements are there to conveniently structure our code and make styling easier (see later in the article). For usability and accessibility, we include an explicit label for each form control. Note the use of the for attribute on all <label> elements, which takes as its value the id of the form control with which it is associated — this is how you associate a form control with its label.

There is great benefit to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users.

On the <input> element, the most important attribute is the type attribute. This attribute is extremely important because it defines the way the <input> element appears and behaves.

• In our simple example, we use the value text for the first input — the default value for this attribute. It represents a basic single-line text field that accepts any kind of text input.
• For the second input, we use the value email, which defines a single-line text field that only accepts a well-formed email address. This turns a basic text field into a kind of "intelligent" field that will perform some validation checks on the data typed by the user.

The button element

The markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form. This is done by using the <button> element; add the following just above the closing </form> tag:

<p class="button">
  <button type="submit">Send your message</button>
</p>

The <button> element also accepts a type attribute — this accepts one of three values: submit, reset, or button which send the form data to the server, reset the form controls to their default values, or do nothing, respectively.

Basic form styling

Now that you have finished writing your form's HTML code, try saving it and looking at it in a browser. At the moment, you'll see that it looks rather ugly.

Inside the style tags, add the following CSS:

body {
  text-align: center;
  background-color: beige;
}
 
form {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1em;
  border: 1px solid #888;
  background-color: white;
  border-radius: 0.25rem;
}
 
label {
  display: inline-block;
  min-width: 70px;
  text-align: right;
}
 
p {
  display: flex;
  gap: 0.5rem;
}
 
input,
textarea {
  font: 0.9rem sans-serif;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 0.25rem;
}
 
input:focus,
textarea:focus {
  outline-style: solid;
  outline-color: #000;
}
 
textarea {
  height: 6rem;
}
 
.button {
  padding-left: 90px;
}
 
button {
  margin-left: 0.5em;
}