Introduction to HTML Forms

In HTML Jan 23, 2024

Updated on Jan 24, 2024

We use HTML forms to collect user input and send this data to a server. A form is composed of HTML markup, content, and form controls with associated labels. In this blog post, we will build a signup form.

Let's start by creating a new form.html file. Let's open a code editor and start editing this file. Let's add a Doctype declaration, a head, and a body element:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Sign Up Form</title>
</head>
<body>
  <h1>Sign Up</h1>
</body>
</html>

Below the h1 element, we will add our form. The form element is a hyperlink that users can manipulate through various form-associated elements. The tag we use to delineate the form element is the <form> tag:

<form>
</form>

Now, let's start to populate this form with the necessary components for the signup form.

Data collection within forms relies on various form controls, with one of the most common being the input element. This element creates a single-line input control. An input element can have a type attribute. The HTML5 specifications introduce a variety of states for the type attribute.

The most common state for the type attribute is Text. The input element is a plain text element with no line breaks. Let's start building our form with such input. First, we want a field to collect our customer's first name. Let's add this inside the form element within a paragraph:

<p>
  <input type="text" id="firstname">
</p>

Here, we've incorporated an input element with a text type, assigning an id of firstname for easy identification in styling or scripting.

A required attribute for almost all input form controls is the name attribute. The name attribute is used for form submission. Let's add a name attribute to our input:

<input type="text" id="firstname" name="firstname">

Another useful attribute is the required attribute. It is added to make the field mandatory for form submission. Let's add this attribute to our input:

<input type="text" id="firstname" name="firstname" required>

We can add labels to form controls. Labels play a crucial role in enhancing the accessibility and usability of form controls. They serve as descriptive identifiers for associated form elements, aiding not only sighted users but also those utilizing assistive technologies like screen readers.

To explicitly associate a label with a form control, we use the for attribute, setting its value to the id of the associated form control. Let's apply this concept to our first name input field:

<p>
  <label for="firstname">First Name</label>
  <input type="text" id="firstname" name="firstname" required>
</p>

Here, the label element precedes the input field, explicitly linked to it via the for attribute, which matches the id of the input field. This association not only improves accessibility by providing a clear description but also enhances the user experience by making the form more intuitive and navigable.

Similarly, we'll add a label and an input element for users to enter their last name:

 <p>
   <label for="lastname">Last Name</label>
   <input type="text" id="lastname" name="lastname" required>
 </p>

Another state of the input type attribute is the Email state. It is useful when you want to collect a user's email address, as it triggers built-in browser validation to ensure the entered value adheres to a valid email format. Let's incorporate this into our form:

<p>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
</p>

The use of an input with an email type contributes to a more seamless and error-resistant user experience, reinforcing the effectiveness of HTML form elements.

When users sign up for a website, they must choose a password. The type state we'll use here is the Password state. We'll add two such inputs to our form: one for password, and one for password confirmation.

<p>
  <label for="password">Password</label>
  <input type="password" id="password" name="password" required>
</p>
<p>
  <label for="passwordconfirm">Password Confirmation</label>
  <input type="password" id="passwordconfirm" name="passwordconfirm" required>
</p>

Using type="password" conceals the entered characters for the password, providing an added layer of privacy.

We don't want weak passwords, so we'll impose a minimum length for them. To do that, we'll use the minlength attribute. Let's set its value to 8:

<p>
  <label for="password">Password</label>
  <input type="password" id="password" name="password" minlength="8" required>
</p>
<p>
  <label for="passwordconfirm">Password Confirmation</label>
  <input type="password" id="passwordconfirm" name="passwordconfirm" minlength="8" required>
</p>

By incorporating minlength="8", we establish a baseline for password strength. Users attempting to create accounts will be prompted to provide a password with at least 8 characters.

Another useful state of the type attribute for an input element is the Radio Button state. Radio buttons are an effective way to present exclusive choices within a group. We can use an input with a radio type for collecting users' gender:

<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="gender" value="female" id="female">
  <label for="female">Female</label>
  <input type="radio" name="gender" value="male" id="male">
  <label for="male">Male</label>
</fieldset>

Utilizing type="radio" ensures that users can select only one option from the provided choices within the same name group. Here, the name attribute associates both radio buttons, guaranteeing exclusive selection. The value attribute defines the data associated with each option, which is crucial for form submission.

To enhance the structure and accessibility, we've enclosed the radio buttons within a fieldset element, which is useful when we want to group related controls and labels. The legend element provides a caption for the group, making it more informative and user-friendly.

Another state for the type attribute of the input element is the Date state. We can use such an input to collect the user's date of birth:

<p>
  <label for="bornon">Date of Birth</label>
  <input type="date" id="bornon" name="bornon" required>
</p>

The type="date" attribute transforms the input into a date picker, allowing users to conveniently select their birthdate. This not only ensures accuracy in data entry but also enhances the user experience by providing a standardized and familiar interface for choosing dates.

Another state of the type attribute is the Checkbox state. Checkboxes are an ideal choice when users have multiple selections. Let's incorporate them to allow users to choose their preferred topics of interest:

<fieldset>
  <legend>Choose Your Interests:</legend>
  <input type="checkbox" name="interests" value="technology" id="technology">
  <label for="technology">Technology</label>
  <input type="checkbox" name="interests" value="fashion" id="fashion">
  <label for="fashion">Fashion</label>
  <input type="checkbox" name="interests" value="sports" id="sports">
  <label for="sports">Sports</label>
</fieldset>

Here, users can select multiple checkboxes based on their interests. The name attribute associates all checkboxes, allowing users to make independent choices. The value attribute defines the data associated with each option, essential for form submission.

Another essential form element is the select element, often used to create a dropdown menu for users to choose from a list of options. Each choice is represented by an option element. In our form, we can utilize this element to offer users a selection of cities:

<p>
  <label for="city">City</label>
  <select id="city" name="city" required>
    <option value="" disabled selected>Please select</option>
    <option value="New York City">New York City</option>
    <option value="Los Angeles">Los Angeles</option>
    <option value="Chicago">Chicago</option>
    <option value="Houston">Houston</option>
    <option value="Phoenix">Phoenix</option>
  </select>
</p>

Here, users can choose their city from a dropdown menu. The option elements define each city, and the value attribute represents the data associated with the selected choice. The first option serves as a placeholder with disabled and selected attributes, guiding users to make a selection.

We can't finish our form without using a textarea element. The textarea element is a multiline edit text control. Let's use it to allow users to enter additional comments:

<p>
  <label for="comments">Additional Comments</label>
  <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Write your comments here..."></textarea>
</p>

We've used the rows and cols attributes to define the visible dimensions of the textarea, allowing users to see and input multiline text conveniently. The placeholder attribute provides guidance on what type of information is expected.

We want to submit this form. To achieve this, we will use an input with a submit type. Before the closing </form> tag we put this:

<p>
  <input type="submit" value="Register">
</p>

The type="submit" attribute signifies that this input element acts as a submit button. The value attribute defines the text displayed on the button, conveying its purpose to the user.

In addition to the submit button, we introduce a reset button to provide users with the option to clear the form and start anew. Placed after the submit button, this input element with the reset type serves this purpose:

<input type="reset" value="Reset">

After completing the form, you might wonder how the information you've provided is processed. The method and action attributes play a key role in this process.

Method Attribute: This attribute specifies the HTTP method used when sending the form data. The most common methods are GET and POST. In our form, we use the POST method, which is often employed for more secure and complex data submissions.
Action Attribute: The action attribute defines the URL where the form data is sent upon submission. In most cases, the data is sent to the server for processing. The absence of an explicit action attribute means the data is sent to the same page that contains the form.

Here's an example of how these attributes are applied:

<form method="POST" action="/submit-form">
 <!-- Your form controls go here -->
 <p>
   <input type="submit" value="Register">
   <input type="reset" value="Reset">
 </p>
</form>

Conclusion:

In conclusion, we've explored the fundamental elements of an HTML form, each serving a unique purpose in collecting user input. From text fields to radio buttons and dropdown menus, we've created a comprehensive signup form. Understanding how these elements work together provides valuable insights into the mechanics of form submission.