EN

HTML・Taking user input

All kinds of input fields

Passwords, email addresses, long messages... input fields change their form to fit the job. With type, placeholder, and textarea, let's widen your range of input fields.

You made a field for typing text with <input type="text">. Changing type changes its form, remember? This lesson picks up from there. Let’s learn a few input fields suited to their purpose.

Trying out different types

Here are some frequently used type values, lined up.

<input type="text">
<input type="password">
<input type="email">
<input type="number">
typeWhat kind of field it becomes
textAn ordinary one-line input
passwordThe typed characters are hidden as ●●●
emailFor email (on a phone, the keyboard puts @ within reach)
numberNumbers only (with up/down buttons)
telFor phone numbers (on a phone, a number keypad tends to come up)
dateBecomes a field where you pick a date from a calendar

Even the same <input> changes this much with a single type. For now, it’s enough to just know “there’s a family of these.”

Click into them and type something, and the differences between the kinds become clear — password hides the characters as ●, and number gets up/down buttons.

Showing a faint example with placeholder

You can show an input example in an input field, in faint text. That’s placeholder.

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

It gently answers the question “what should I write here?” As soon as you start typing, it vanishes.

Click and try typing something. The faint text (the placeholder) disappears, and you can type.
AccessibilityAlways give a form a labelHere’s how to give an input field a proper label.

Long text goes in <textarea>

<input> is one line only. When you want to write several lines, like a comment or a message, you use <textarea>.

<textarea placeholder="Share your thoughts"></textarea>
Click and try typing a few lines. Unlike <input>, you can write with line breaks.

Give it a try

How much does an input field change its form when you change type? Let’s see for ourselves with the real thing. Sliders and color pickers are fun to play with.

Every one is the same <input>, yet a single type changes it this much. Getting to drag the range slider and pick a color with color is part of the fun of type.

Summary of this lesson

  1. <input> changes the kind of input field when you change type (password, email, number…)
  2. With placeholder, you can show a faint-text example
  3. Long text goes in <textarea>~</textarea> (write the closing tag too)

Try it: add a message field

To the contact parts you’ve placed so far, let’s add a message field (for long text). Place a <textarea> between the name <input> and the submit button.

<h2>Contact</h2>
<input type="text" placeholder="Your name">
<textarea placeholder="A message for Shima"></textarea>
<button>Send</button>

<input> is one line, <textarea> is a field you can write many lines in. All we’re adding this time is the single <textarea> line in the middle.

Browser view. Below the “Contact” heading, a one-line name input field, a large message input field, and a submit button are lined up
The name is one line, and the message is a wide field.

(type="password" and email aren’t used on Shima’s page, but they’re a big help for things like account sign-up. Knowing them is handy.)

FAQ

Can the placeholder text alone serve as the label for a name field?
No. Because a placeholder disappears once you start typing, the proper way is to provide a separate label for the formal description. A placeholder is only a hint shown alongside the field.
For entering numbers, should I use type="number" or type="text"?
For pure numbers (a count, an age, and so on), type="number" is handy. But for things like a phone number or postal code that are "numbers but not for calculating," type="tel" or type="text" is better suited, since a leading 0 can get dropped.
What happens if I submit a field with required set while it's empty?
The browser automatically shows a bubble saying "Please fill out this field" and stops the submission. Even without writing JavaScript, a minimal check works with HTML alone.