HTML inputs

Introduction

In this guide, we will learn how to configure a HTML form so that its data can be targetted by JavaScript.

Although it won’t change anything from the end-user’s point of view, it is an essential step in configuring our application code ready for processing.

HTML inputs: the `id` attribute

To capture form data in HTML, you need to create a form element with input fields for the data you want to collect.

Luckily, the form has already been created and styled for us:

Sign-up form

We just need to add an id attribute to the HTML code that uniquely identifies each of our form input elements ready for the JavaScript to target them.

The id and class attributes

1. The HTML `id` attribute

The id attribute is a unique identifier that coders can give to an HTML element.

It is used to target a HTML element in JavaScript code.

For example, if you have an input field for the user’s email address, you could give it the id attribute email:

<input type="email" id="email" name="email" placeholder="Email address">

Note that the id and name attributes are different things. These can both be the same without causing any problems.

Using an id attribute like this allows you to capture the input field as a variable in your JavaScript code using the document.querySelector() method:

const emailInput = document.querySelector("#email");

An `id` should be unique

Because of this, no HTML page should have more than one element with the same id attribute value.

Once we name the input with an id of email, we cannot use the same id value for another element on the same page.

2. The HTML `class` attribute

The class attribute is primarily used to apply CSS classes to individual HTML elements, or to groups of elements.

Unlike the id attribute, the class attribute can be used multiple times on the same page:

<form class="form-wrapper">
  <input type="email" class="form-input" />
  <input type="text" class="form-input" />
  <input type="number" class="form-input" />
</form>

In the example above, all three input fields have the same class attribute value of form-input, but we only have one class attribute value of form-wrapper for the form element.

In our CSS file, we might define the styles for these two classes like this:

.form-wrapper {
  /* CSS styles for the form */
}

.form-input {
  /* CSS styles for the input fields */
}

Because of this, we can apply the same CSS styles to all input fields by using the form-input class, whilst applying different styles to the form itself using the form-wrapper class.

Updating the HTML form code

Look carefully at HTML code for the form, and find where the <form> tag starts and ends (around lines 8 and 50).

This is the area where we will be capturing the form data. Try expanding the code snippet below to see the full form:

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Harmony | Sign Up</title>
5
    <link rel="stylesheet" href="./index.css" />
6
  </head>
7
  <body>
8
    <form class="form-wrapper">
9
      <div class="form-section">
39 collapsed lines
10
        <img
11
          class="mobile-display"
12
          src="./assets/harmony-music-academy-logo.svg"
13
          alt="Harmony Music Academy logo"
14
        />
15
        <div class="form-field">
16
          <label for="email" class="form-label">Email*</label>
17
          <input
18
            name="email"
19
            type="text"
20
            class="form-input"
21
            placeholder="Your email"
22
          />
23
        </div>
24
        <div class="form-field">
25
          <label for="level" class="form-label">Level*</label>
26
          <select name="level" class="form-input">
27
            <option value="basic">Basic</option>
28
            <option value="advanced">Advanced</option>
29
          </select>
30
        </div>
31
        <div class="form-field">
32
          <label for="hoursPerWeek" class="form-label">Hours per week*</label>
33
          <input
34
            name="hours-per-week"
35
            type="number"
36
            class="form-input"
37
            placeholder="How many?"
38
          />
39
        </div>
40

41
        <button type="submit" class="submit-btn">Sign up</button>
42
      </div>
43

44
      <div class="form-section mobile-hidden">
45
        <img
46
          src="./assets/harmony-music-academy-logo.svg"
47
          alt="Harmony Music Academy logo"
48
        />
49
      </div>
50
    </form>
51

52
    <script type="module" src="./index.js"></script>
53
  </body>
54
</html>

Within this section, look for the very first div with the class name of form-field (around line 15), and look carefully at the <label> and <input> tags within it:

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Harmony | Sign Up</title>
5
    <link rel="stylesheet" href="./index.css" />
6
  </head>
7
  <body>
8
    <form class="form-wrapper">
6 collapsed lines
9
      <div class="form-section">
10
        <img
11
          class="mobile-display"
12
          src="./assets/harmony-music-academy-logo.svg"
13
          alt="Harmony Music Academy logo"
14
        />
15
        <div class="form-field">
16
          <label for="email" class="form-label">Email*</label>
17
          <input
18
            name="email"
19
            type="text"
20
            class="form-input"
21
            placeholder="Your email"
22
          />
23
        </div>
26 collapsed lines
24
        <div class="form-field">
25
          <label for="level" class="form-label">Level*</label>
26
          <select name="level" class="form-input">
27
            <option value="basic">Basic</option>
28
            <option value="advanced">Advanced</option>
29
          </select>
30
        </div>
31
        <div class="form-field">
32
          <label for="hoursPerWeek" class="form-label">Hours per week*</label>
33
          <input
34
            name="hours-per-week"
35
            type="number"
36
            class="form-input"
37
            placeholder="How many?"
38
          />
39
        </div>
40

41
        <button type="submit" class="submit-btn">Sign up</button>
42
      </div>
43

44
      <div class="form-section mobile-hidden">
45
        <img
46
          src="./assets/harmony-music-academy-logo.svg"
47
          alt="Harmony Music Academy logo"
48
        />
49
      </div>
50
    </form>
51

52
    <script type="module" src="./index.js"></script>
53
  </body>
54
</html>

Adding an `id` attribute to an input field

To capture the user’s email address, we need to add an id attribute to the <input> tag for the email field:

15
<div class="form-field">
16
  <label for="email" class="form-label">Email*</label>
17
  <input
18
    id="email"
19
    name="email"
20
    type="text"
21
    class="form-input"
22
    placeholder="Your email"
23
  />
24
</div>

Challenge: add `id` attributes to the form fields

Look for the other form input fields in the HTML code, and add id attributes to each of them.

Make sure that each id attribute is unique, and that it matches the for attribute of the corresponding <label> tag.

Solution

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Harmony | Sign Up</title>
5
    <link rel="stylesheet" href="./index.css" />
6
  </head>
7
  <body>
8
    <form class="form-wrapper">
6 collapsed lines
9
      <div class="form-section">
10
        <img
11
          class="mobile-display"
12
          src="./assets/harmony-music-academy-logo.svg"
13
          alt="Harmony Music Academy logo"
14
        />
15
        <div class="form-field">
16
          <label for="email" class="form-label">Email*</label>
17
          <input
18
            id="email"
19
            name="email"
20
            type="text"
21
            class="form-input"
22
            placeholder="Your email"
23
          />
24
        </div>
25
        <div class="form-field">
26
          <label for="level" class="form-label">Level*</label>
27
          <select id="level" name="level" class="form-input">
28
            <option value="basic">Basic</option>
29
            <option value="advanced">Advanced</option>
30
          </select>
31
        </div>
32
        <div class="form-field">
33
          <label for="hoursPerWeek" class="form-label">Hours per week*</label>
34
          <input
35
            id="hoursPerWeek"
36
            name="hours-per-week"
37
            type="number"
38
            class="form-input"
39
            placeholder="How many?"
40
          />
41
        </div>
42

9 collapsed lines
43
        <button type="submit" class="submit-btn">Sign up</button>
44
      </div>
45

46
      <div class="form-section mobile-hidden">
47
        <img
48
          src="./assets/harmony-music-academy-logo.svg"
49
          alt="Harmony Music Academy logo"
50
        />
51
      </div>
52
    </form>
53

54
    <script type="module" src="./index.js"></script>
55
  </body>
56
</html>

Click to reveal

Summary

In this guide, we have configured our HTML form inputs with unique id attributes.

These will ensure that the values of each input field can be targetted by JavaScript.

Next steps

In the next step, we will capture the values from our HTML forms and store them in variables ready for processing.