HTML・入力を受け取る

フォームで入力をまとめよう

formタグで入力欄やボタンをまとめて送る仕組みの基本。labelで何の欄かを示す書き方、送るデータに名前をつけるname、送り先を決めるactionまで、使いやすい入力フォームの組み立て方を学びます。

書いた人：わーゆ

ここまで、打ち込む欄・選ぶ欄と、いろいろな入力部品を置いてきました。でもバラバラのままでは、「どこからどこまでが1つの申し込みで、どうやって送るのか」があいまいです。それらをひとまとまりにして送り出すのが<form>。お問い合わせや会員登録でおなじみの、あの入力フォームの正体です。

入力欄をひとまとめに

これまでの<input>や<button>を<form>で囲みます。

<form>
  <input type="text" placeholder="お名前">
  <button type="submit">送信する</button>
</form>

<button type="submit">は「送信ボタン」。押すと、フォームの中身がまとめて送られます。「入力欄 → 送信ボタン」を<form>で包む。これがフォームの基本の形です。

入力欄とボタンが、1つの<form>にまとまりました。実際に文字を打ち込んでみてください。

ラベルで「何の欄か」を示す

入力欄には、「これは何を入れる欄か」を示すラベルをつけると、親切になります。使うのは<label>。

<form>
  <label>
    お名前
    <input type="text">
  </label>
  <button type="submit">送信する</button>
</form>

<label>で説明の文字と入力欄をひとまとめにすると、ラベルの文字を押しても入力欄が反応するようになります。指で押しやすくなり、読み上げソフトにも「この欄は“お名前”だ」と伝わります。小さな工夫ですが、効果は大きいです。

「お名前」の文字を押してみてください。ラベルで囲まれた入力欄にカーソルが移ります。実際にさわってみてください。

送るデータに名前をつける（name）

フォームの中身が送られるとき、それぞれの値は「どの欄の値か」という名前つきで届きます。その名前をつけるのがnameです。

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

こうしておくと、送信のとき「username＝打ち込まれた文字」というペアで届きます。受け取る側は、この名前を手がかりに「これはお名前、これはメッセージ」と仕分けるわけです。逆にいうと、nameのない欄の中身は送信に含まれません。前回ラジオボタンのグループ分けに使ったnameと同じ属性が、ここでは「データの名札」として働きます。

どこへ送るかを決める

フォームを本当に送るには、「どこへ、どうやって送るか」を<form>に書きます。

<form action="/submit" method="post">
  ...
</form>
書くもの意味
action="..."入力を送る先（送信先の住所）
method="post"送り方の種類

送り方（method）には、おもに2種類あります。

method送り方向いている場面
get入力内容をURLの後ろにくっつけて送る検索など、結果のページを共有したいとき
post入力内容を包んで送る（URLに出ない）申し込み・お問い合わせ・パスワードなど

検索フォームのあとにURLへ?q=しまえながのような文字がつくのを見たことがあるかもしれません。あれがgetの送り方。名前やメッセージのようにURLに出てほしくない中身を送るフォームでは、postを選びます。迷ったらpost、と覚えておけば大丈夫です。

さわってみよう

<form>で囲んで、<label>をつけたフォームです。ラベルの文字を押すと、その入力欄にカーソルが移ることを確かめてみてください。

「なまえ」「メッセージ」の文字を押すと、下の欄にカーソルが入ります。これが<label>の効果です。

このレッスンのまとめ

  1. 入力欄やボタンは<form>でひとまとめにする
  2. <label>をつけると「何の欄か」が伝わり、押しやすくなる
  3. nameは送るデータの名札。ない欄の中身は送られない
  4. action（送り先）とmethod（送り方）で送信のしかたを決める

やってみよう：おたよりフォーム

しまちゃんのページの「れんらく」に、おたよりフォームを足しましょう。前に置いたリンクの上に、<form>をおきます。

<h2>れんらく</h2>

<form>
  <label>なまえ
    <input type="text" placeholder="あなたのなまえ">
  </label>
  <label>メッセージ
    <textarea placeholder="しまちゃんへひとこと"></textarea>
  </label>
  <button type="submit">おくる</button>
  <p id="thanks"></p>
</form>

<a href="https://www.youtube.com/">YouTube</a>
<a href="mailto:shima@example.com">メール</a>

<h2>と下の<a>（リンク）はそのまま。今回足すのは<form>のかたまり。なまえの欄・メッセージの欄・送信ボタンが、ひとつのふくろにまとまります。欄の中のうすい文字はplaceholder（何を書くかのヒント）です。ボタンの下にある<p id="thanks"></p>は、まだ中身が空っぽの器。JavaScriptトラックで、送信したときにここへお礼の文字を出します。

ブラウザ表示。「れんらく」の見出しの下に、なまえの入力欄・メッセージの入力欄・「おくる」ボタン、その下にYouTubeとメールのリンクが並んでいる
入力欄とボタンが、ひとつのフォームにまとまりました。

これで、あなたのページにおたよりフォームがつきました。送信の中身を受け取るのはまた別のステップですが、「入力の形」は完成です。そしてこれでHTMLの骨組みは完成です。

よくある質問

送信ボタンを押すとページが再読み込みされるのはなぜ？
それがフォーム本来の動き（送り先への送信と画面の切り替え）だからです。その場で反応を見せたいときは、JavaScriptのsubmitイベントの中でevent.preventDefault()を呼んで止めます。
actionには何を書けばいい？
フォームの中身を受け取ってくれるプログラムの場所（送り先）を書きます。練習の段階では受け取り先がないので、省略したままで大丈夫です。
labelはなぜ必要？
ラベルの文字を押しても入力欄が反応するようになり、読み上げソフトにも「何を入れる欄か」が伝わるからです。見た目のためではなく、使いやすさの部品です。
入力欄のnameは何のためにある？
送信されるデータに「どの欄の値か」という名前をつけるためです。nameのない欄の中身は、送信のときに含まれません。本当に送るフォームでは、各入力欄にnameをつけます。