Forms

Learning Goals

• Understand the required structure of an HTML form
• Grab the user input from a form
• Give the user a customized response after a user completes a form

Technical Vocabulary

• Form
• Input
• Label
• Type

Warm Up

Visit the DisneyPlus login page. As a user, if you were to enter your email, then click “Continue,” what would you expect to happen next?

Visit the Discord login page. As a user, if you were to enter your email and password, then click “Login,” what would you expect to happen next?

Forms

As we illustrated in the Warm Up, forms are an essential part of a website. Without them, apps wouldn’t be able to do much to customize our experience as users.

So far, we’ve done an excellent job of displaying information to the user, but we haven’t really asked them for their input. HTML also includes a set of elements for building forms. In this lesson, we’ll learn about how to build the skeleton of a form with HTML, then how to make it grab the information a user provides with JavaScript.

Form Basics: Inputs and Buttons

There is a lot more to forms that we’ll go into depth with later, but to start we’ll focus on two elements:

• <input> creates an input field. <input> is like <img> in that it does not require or support a closing tag. It can take an optional type attribute that helps validate user input in some browsers (visit MDN to find out more).
• <button> creates a button. <button>, unlike <input>, supports a closing tag.

See the Pen Check It Out: Inputs and Buttons by Turing KWK (@turing-kwk) on CodePen.

Forms: Next Level

Basic input and button elements are a great starting point, but to build a truly usable form, we need to use the following base elements:

• form
• label
• input
• type attribute

As you look at the code for forms, you will notice quite a bit of nesting; this is necessary. It’s important to indent properly to make your code more readable!

Here’s a good example of indentation:

<form>
  <label>Your Name
    <input type="text">
  </label>
  <label>Your Email
    <input type="email">
  </label>
  <input type="submit">
</form>

Here’s a bad example of indentation:

<form>
<label>Your Name
  <input type="text">
  </label>
<label>Your Email
<input type="email">
</label>
<input type="submit">
</form>

What can you do within a form?

Most often, we ask users for text. If they are registering for an event like camp, we probably ask for their name, age, address, and food allergies. Sometimes we ask for an age/birthdate, and sometimes we ask them to “check all that apply.” We can have special inputs based on the information we are asking our users for. Here are some common input types you’ve probably seen. Can you predict what they do?

• <input type="password">
• <input type="number">
• <input type="date">
• <input type="color">

Using User Input

Now that we know how to write HTML forms let’s make them functional! Usually, the flow of interactions is as follows:

• User types in information
• User clicks a button
• User gets some sort of response

To make this happen, we will have to write code that:

• Listens for the button click
• Gets the information that the user typed in
• Use that information in a message/response

Check out the CodePen below to see what that looks like in JavaScript:

See the Pen Check It Out: Forms with JS by Turing KWK (@turing-kwk) on CodePen.

Takeaways:

• Inside our event handler, we can instruct our program to grab the current value of an input element. We do this with .val().
• We need to store the value of the input element in a variable.
• We have to wait until we are inside the event handler to grab the input value. Otherwise, it would still be an empty string.

Forms

Earlier in the lesson, we wrapped inputs in a form element. In the example above, we’ve just left input elements floating around. The form element has some default behavior that can be tricky, but we’ll briefly go into it.

By default, when a form is submitted, it will attempt to send that request somewhere (to our back-end, if we had one), then refresh the page. This isn’t ideal for us because we don’t actually want to send the information off or refresh the page. The video below illustrates the default behavior:

While this can be inconvenient, we have a work-around! We can prevent the default behavior that the click usually causes. We will add one line of code to our event handler:

function addName(event) {
  event.preventDefault();
  // the rest of your code here
}

The event variable we are passing around represents the click event. This is a little abstract, but when an event takes place, we have an object with a lot of information about that event. .preventDefault() is a function we can call on the event to prevent the refresh from occurring.

Take some time to put together everything we’ve learned today and complete the practice below.