EN

HTML・Taking user input

Buttons and input fields

A button you can press, a field you can type into. Let's place the starting points for "interaction" on your page. Behavior comes later — start with the shapes.

What we’ve built so far have been “pages for reading.” This time we change tack a little and place parts the user operates: buttons and input fields. Your page takes a step closer from something you “look at” to something you “use.”

A button you can press

<button> is a tag that makes a button, just as its name says. The text you wrap becomes the label on the button.

<button>Send</button>

That alone shows a button you can click. “Something happens when you press it” — that “something” is what you can attach later, once you learn JavaScript. For now, just placing a pressable part is a big success.

Try actually pressing it. Its appearance changes, but nothing happens yet.

Links (<a>), which you learned earlier, were also “things you can press.” So how do you choose between them? The answer is what happens after you press.

PartWhat happens when pressedExamples
<a>Moves to another placeA menu, a link to an article
<button>Does something on the spotSubmit, calculate, toggle a display

Using CSS, you can make a link look button-like. Even so, the basic rule is to choose by role: “moving, use <a>; doing, use <button>.” When you use them by their role, they’re also handled correctly by keyboard operation and screen-reader software.

An input field for typing text

<input> makes an input field the user can type into. Like <img>, it’s a tag that doesn’t wrap any content.

<input type="text" placeholder="Enter your name">

Broken down, it looks like this.

What you writeMeaning
<input>The input-field part. A tag that’s complete on its own
type="text"What kind of input field it is (text means a field for typing text)
placeholder="..."The faintly shown hint text before you type

Changing type changes the kind of input field. For example, type="password" makes the characters into dots, and type="checkbox" makes a checkbox. The fun part is that the same <input> changes its form depending on type.

Click and try typing. The faint hint text disappears the moment you start typing.

Putting text in from the start (value)

Similar to placeholder but different in role is value. This one is the “real text” that’s in the input field from the start.

<input type="text" value="Shima">
<input type="text" placeholder="Enter your name">

Line them up side by side and the difference is clear.

What you writeThe text shownWhen you start typing
valueNormal dark textDoesn’t disappear (you delete it and rewrite yourself)
placeholderFaint textVanishes at once

value is used in situations like “pre-fill what was entered before” or “set a recommended value from the start.” Remember it as: hint means placeholder, contents means value.

The top field uses value, so it has dark text in it from the start and stays unless you delete it yourself. The bottom field uses placeholder, so it vanishes at once when you start typing.
JavaScriptRun code when a button is pressedWhat solves “nothing happens when I press it” is JavaScript. Let’s go give the button some “behavior.”

Give it a try

Rather than just reading, it’s best to try the real thing. Try pressing the button and typing into the input fields.

The top input field uses value="Shima", so it has dark text from the start. The bottom uses placeholder, so it vanishes at once when you start typing. The button can be pressed, but it’s correct that nothing happens yet.

Summary of this lesson

  1. A pressable button is <button>label</button>. Moving, use <a>; doing, use <button>
  2. A field for typing text is <input type="text"> (it doesn’t wrap any content)
  3. <input> changes its form when you change type
  4. A hint is placeholder (disappears when you type), contents is value (doesn’t disappear)

Try it: place the parts for “contact”

Let’s start making a “contact” section at the very bottom of Shima’s page. First the parts — place an <input> for typing a name and a “Send” <button>.

<h2>Contact</h2>
<input type="text" placeholder="Your name">
<button>Send</button>

Set up a heading with <h2>; what we add this time is the <input> (a field for typing text) and the <button> (a part to press). Remember, placeholder is faint hint text.

Browser view. Below the “Contact” heading, an input field for typing a name and a “Send” button are placed
Everything is still plain and scattered about.

Change type="text" to type="password", and the typed characters become dots — the same <input> changes its form with type.

FAQ

Why doesn't anything happen when I press the button?
Because all HTML makes is the "pressable shape." What happens when you press it is specified with JavaScript. A button with nothing specified is working correctly when it's pressable but does nothing.
How do I choose between a button and a link (a tag)?
If it moves to another page, use an a tag; if it does something on the spot (submitting, calculating, toggling a display, and so on), use a button. You can make them look alike, but the basic rule is to choose by role.
Does input need a closing tag?
No. Like img, input is a standalone tag that doesn't wrap any content, so you don't write a closing tag. button wraps text, so you do write its closing tag.