HTML・入力を受け取る

いろいろな入力欄

パスワード、メールアドレス、長い文章……用途に合わせて入力欄は姿を変えます。typeとplaceholder、そしてtextareaで、入力欄のバリエーションを増やそう。

<input type="text"> で文字を打つ欄を作りました。type を変えると姿が変わるのでしたね。今回はその続き。用途に合った入力欄を、いくつか覚えましょう。

typeを変えてみる

よく使う type を並べてみます。

<input type="text">
<input type="password">
<input type="email">
<input type="number">
typeどんな欄になるか
textふつうの1行入力
password打った文字が ●●● で隠れる
emailメール向け(スマホだと @ が出やすい)
number数字だけの入力(上下ボタンつき)

同じ <input> でも、type ひとつでこんなに変わります。まずは「そういう仲間がいる」と知っておけば十分です。

placeholder でお手本を薄く表示

入力欄に、薄い文字で入力例を出せます。それが placeholder です。

<input type="text" placeholder="お名前をどうぞ">

「ここに何を書けばいいの?」を、そっと案内してくれます。文字を打ち始めると、すっと消えます。

長い文章は <textarea>

<input> は1行だけ。感想やメッセージのように何行も書きたいときは、<textarea> を使います。

<textarea placeholder="ご感想をどうぞ"></textarea>

このレッスンのまとめ

  1. <input>type を変えると入力欄の種類が変わる(password・email・number…)
  2. placeholder で、薄い文字のお手本を出せる
  3. 長い文章は <textarea>〜</textarea>(終了タグまで書く)

type="password"email はしまちゃんのページには使いませんが、会員登録などで大活躍。知っておくと便利です。) :::

やってみよう:メッセージ欄を足す

ここまでで置いたれんらくの部品に、メッセージ欄(長い文章)を足しましょう。なまえの <input> とおくるボタンのあいだに、<textarea> を置きます。

<h2>れんらく</h2>
<input type="text" placeholder="あなたのなまえ">
<textarea placeholder="しまちゃんへひとこと"></textarea>
<button>おくる</button>

<input> は1行、<textarea> は何行も書ける欄。今回足すのはまん中の <textarea> の1行です。

ブラウザ表示。「れんらく」の見出しの下に、1行のなまえ入力欄、大きなメッセージ入力欄、おくるボタンが並んでいる
なまえは1行、メッセージは広い欄です。