EN

HTML・Taking user input

Bundle your inputs with a form

The form element turns input boxes and buttons into "one bundle" you can send off. Add labels too, and put together an easy-to-use input form.

Up to now, you’ve placed all kinds of input parts — boxes to type in, boxes to choose from. But left scattered about, it’s unclear “where one sign-up begins and ends, and how it gets sent.” What bundles them into one and sends them off is <form>. It’s what those input forms you know from contact pages and account sign-ups really are.

Bundle your input boxes together

Wrap the <input> and <button> you’ve used so far inside a <form>.

<form>
  <input type="text" placeholder="Your name">
  <button type="submit">Send</button>
</form>

<button type="submit"> is the “submit button.” Press it, and the form’s contents are all sent together. “Input box → submit button” wrapped in a <form> — this is the basic shape of a form.

The input box and button are now bundled into one <form>. Try typing some text in.

Use a label to show “what the box is for”

Adding a label that shows “what this box is for” makes your input boxes much friendlier. The tool for this is <label>.

<form>
  <label>
    Your name
    <input type="text">
  </label>
  <button type="submit">Send</button>
</form>

When you use <label> to bundle the descriptive text and the input box together, pressing the label text also activates the input box. It becomes easier to tap with a finger, and it tells screen readers “this box is for your name.” It’s a small touch, but it makes a big difference.

Try pressing the “Your name” text. The cursor moves to the input box wrapped by the label — try it and see.

Give a name to the data you send (name)

When a form’s contents are sent, each value arrives with a name that says “which box this value came from.” The thing that gives it that name is name.

<form action="/submit" method="post">
  <label>Your name
    <input type="text" name="username">
  </label>
</form>

With this in place, the data arrives as a pair like “username = the text that was typed.” The receiving side uses this name as a clue to sort things out: “this is the name, this is the message.” Put another way, the contents of a box without a name aren’t included when it’s sent. The same name attribute you used last time to group radio buttons works here as a “name tag for data.”

Decide where it gets sent

To really send a form, you write “where and how to send it” on the <form>.

<form action="/submit" method="post">
  ...
</form>
What you writeMeaning
action="..."Where the input is sent (the destination’s address)
method="post"The kind of sending method

There are mainly two kinds of sending method (method).

methodHow it sendsGood for
getAttaches the input to the end of the URLSearches and other cases where you want to share the results page
postWraps the input and sends it (doesn’t appear in the URL)Sign-ups, contact forms, passwords, and the like

You may have seen text like ?q=long-tailed+tit get tacked onto a URL after a search form. That’s the get method. For forms that send contents you don’t want appearing in the URL, like names or messages, choose post. If you’re unsure, just remember: go with post.

Give it a try

This is a form wrapped in <form> with <label>s added. Try confirming that pressing the label text moves the cursor into that input box.

Press the “Name” or “Message” text, and the cursor goes into the box below. That’s the effect of <label>.

Summary of this lesson

  1. Bundle input boxes and buttons together with <form>
  2. Adding a <label> conveys “what the box is for” and makes it easier to press
  3. name is a name tag for the data you send — the contents of a box without one aren’t sent
  4. action (destination) and method (sending method) decide how it’s sent

Try it: a message form

Let’s add a message form to the “Contact” section of Shima’s page. Above the links you placed earlier, put a <form>.

<h2>Contact</h2>

<form>
  <label>Name
    <input type="text" placeholder="Your name">
  </label>
  <label>Message
    <textarea placeholder="A word for Shima"></textarea>
  </label>
  <button type="submit">Send</button>
  <p id="thanks"></p>
</form>

<a href="https://www.youtube.com/">YouTube</a>
<a href="mailto:[email protected]">Email</a>

Leave the <h2> and the <a> (links) below as they are. What you’re adding this time is the <form> block. The name box, the message box, and the submit button get bundled into one bag. The faint text inside the boxes is placeholder (a hint about what to write). The <p id="thanks"></p> below the button is a container that’s still empty inside. In the JavaScript track, you’ll make a thank-you message appear here when the form is submitted.

Browser view. Below the “Contact” heading are a name input box, a message input box, and a “Send” button, with YouTube and Email links lined up below them
The input boxes and button are now bundled into one form.

Now your page has a message form. Receiving the submitted contents is another step, but the “input shape” is complete. And with that, the HTML skeleton is complete.

FAQ

Why does the page reload when I press the submit button?
Because that's what a form naturally does (it sends the data to its destination and switches the screen). When you want to show a response right there on the spot, you stop that behavior by calling event.preventDefault() inside a JavaScript submit event.
What should I write in action?
The location (destination) of the program that will receive the form's contents. While you're just practicing, there's no receiver, so it's fine to leave it out.
Why is a label necessary?
Because pressing the label's text also activates the input box, and it tells screen readers "what this box is for." It's not for looks — it's a part that makes the form easier to use.
What is the name on an input box for?
It gives the submitted data a name that says "which box this value came from." The contents of a box without a name aren't included when the form is sent. In a form that really sends data, you give every input box a name.