HTMLのフォームとは？form・input・label・buttonの違いと書き方を初心者向けに解説

問い合わせフォームを作ろうとして、入力欄やボタンをどう組み合わせればよいのか、ボタンを押すだけでメールが届くのかと迷っていませんか。

HTMLのフォームは、入力した情報をまとめて送るための仕組みです。全体をまとめるform、入力欄を作るinput、項目名を示すlabel、操作を行うbuttonに分けると、構造を理解しやすくなります。

この記事では、4つの要素の違いを確認し、名前とメールアドレスを入力するフォームを書きます。完成コードを保存してブラウザーで開き、ラベルの連動や入力チェックを確かめるところまで進めます。入力画面と、メールを届ける処理の違いも分かるようになります。

HTMLのフォームとは？

HTMLのフォームは、ユーザーが入力・選択した情報をまとめて送信するための領域です。問い合わせフォームなら名前やメールアドレス、検索フォームなら検索キーワードを受け取ります。

MDNのform要素の解説では、formは情報を送信するための対話型コントロールを含む文書の区間と説明されています。

フォームは入力欄だけでなく送信のまとまり

フォームには、テキスト入力欄だけでなく、項目名、チェックボックス、送信ボタンなども含められます。formは、それらを一つの送信単位としてまとめる外側の要素です。

<form>
  <!-- ラベル、入力欄、ボタンを入れる -->
</form>

formは見た目の枠を作るためではなく、どの入力項目を一緒に送るかをまとめるために使います。見た目の枠線や余白はCSSで整えます。

HTMLだけでできること・できないこと

HTMLでは、入力欄と送信ボタンを画面に表示し、送信先や送信方法を指定できます。ただし、送られた内容を保存したり、担当者へメールで届けたりする処理はHTMLの役割ではありません。

formの内側で、labelが項目を説明し、inputが値を受け取り、buttonが送信を実行します。この流れを先に覚えると、属性を追加しても役割を見失いません。

form・input・label・buttonの違い

4つの要素は、フォーム全体・入力欄・項目名・操作ボタンという役割に分かれます。

formはフォーム全体を囲む

この基本例では、formの開始タグと終了タグの間へ、同じフォームとして送信したいinputやbuttonを書きます。formの中に別のformを入れ子にはできません。

inputは値を受け取る

inputは入力欄を作る要素です。type="text"なら1行の文字入力、type="email"ならメールアドレス入力の用途を示せます。MDNのinput要素の解説にあるように、typeによって見た目と動作が変わり、省略時の既定値はtextです。

labelは入力欄の意味を示す

labelには「お名前」「メールアドレス」のような項目名を書きます。for属性とinputのidを同じ値にすると、両者を関連付けられます。

buttonは送信などの操作を実行する

buttonはクリックできるボタンを作ります。フォームを送信するならtype="submit"、JavaScriptなどで独自の処理を実行するならtype="button"を使います。

HTMLで基本のフォームを書く方法

ここでは、テキストエディターでHTMLファイルを編集します。開始タグと終了タグの書き方が分かれば進められます。名前とメールアドレスの2項目を使い、入力画面とブラウザー側のチェックを確認しましょう。

<form>
</form>

<form>
  <p>
    <label for="name">お名前</label>
    <input type="text" id="name" name="name">
  </p>

  <p>
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email">
  </p>
</form>

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>フォームの練習</title>
</head>
<body>
  <form action="/contact" method="post">
    <p>
      <label for="name">お名前（必須）</label>
      <input type="text" id="name"
             name="name" required>
    </p>
    <p>
      <label for="email">メールアドレス（必須）</label>
      <input type="email" id="email"
             name="email" required>
    </p>
    <button type="submit">送信する</button>
  </form>
</body>
</html>

formのaction・methodの書き方

formでは、主にactionで送信先、methodで送信方法を指定します。

<form action="/contact" method="post">
  <!-- 入力項目 -->
</form>

actionはデータの送信先を指定する

actionには、フォームデータを受け取るURLを書きます。/contactのような相対的な指定も、https://example.com/contactのような完全URLも使えます。パスの基準が分からない場合は、HTMLの相対パスと絶対パスの違いも確認してください。

methodはGETまたはPOSTを指定する

基本的な送信方法はgetとpostです。

methodを省略した場合はgetとして扱われます。ただし、postを選べば自動的に安全になるわけではありません。HTTPS、入力値の検証、保存方法などは送信先側でも設計します。

検索条件のようにURLへ残したい情報はGET、問い合わせ内容のように送信処理へ渡す情報はPOSTを基本に検討します。

inputのtype・id・nameの書き方

inputは属性の組み合わせで用途が決まります。初心者が最初に覚えたいのはtype・id・nameです。

typeは入力欄の種類を決める

よく使うtypeは次のとおりです。

送信ボタンはinput type="submit"でも作れますが、表示する文字や要素を柔軟に扱いやすいbuttonを使う方法も覚えておくと便利です。

idはページ内で要素を識別する

idはページ内で要素を識別する値です。labelのforから入力欄を指すときにも使います。同じページ内で重複しない値にします。

nameは送信データの項目名になる

nameは、送信データに付く項目名です。例えば、次の入力欄にhoai@example.comと入力すると、項目名emailと入力値hoai@example.comが組になります。ここでは、送信前の関係をemail=hoai@example.comと表しています。実際の送信時には、送信形式に応じて文字が符号化されます。

<input type="email" id="email" name="email">

入力欄が画面に表示されていても、nameがなければ通常のフォーム送信データにはその値が含まれません。

type="text"やtype="email"にHTMLで書くvalue属性は、最初に表示する値です。利用者が書き換えた後に送られるのは現在の入力値なので、HTMLに書いた初期値と分けて考えましょう。

labelのforとinputのidを関連付ける

labelとinputを関連付ける代表的な方法は、forとidに同じ値を書くことです。

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

MDNのlabel要素の解説でも、明示的な関連付けではinputのidと同じ値をlabelのforへ指定すると説明されています。

ラベルをクリックして入力欄を選べる

正しく関連付けると、ラベルの文字をクリックしたときに対応する入力欄へフォーカスが移ります。チェックボックスやラジオボタンでは、文字部分も選択に使えるため操作しやすくなります。

この例では、forとidの一致によって、どの項目名がどの入力欄に対応するかを伝えます。

for・idとnameは役割が異なる

forとidは、画面上でラベルと入力欄を結び付けます。一方、nameは送信先へ渡すデータの項目名です。

buttonのtypeを使い分ける

buttonのtypeには、主にsubmit・button・resetがあります。

<button type="submit">送信する</button>
<button type="button">入力欄を追加する</button>

MDNのbutton要素の解説では、フォームに関連付いたbuttonはtypeを指定しないとsubmitとして扱われること、送信しないボタンにはtype="button"を指定することが示されています。

フォーム内のbuttonは、送信させたいかどうかを判断してtypeを明示します。

入力しやすいフォームにする基本

正しく送信できるだけでなく、何を入力すればよいかが分かり、キーボードや読み上げソフトでも操作しやすい形を目指します。

placeholderだけで項目名を済ませない

placeholderは入力例や補足に使えますが、入力を始めると見えなくなります。項目名はlabelで示し、placeholderは補助として使います。

<label for="email">メールアドレス</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="name@example.com"
>

requiredは必須入力を示す

requiredを付けると、その入力欄を空のまま送信しようとしたときに、ブラウザの入力チェックが働きます。

<input type="text" id="name" name="name" required>

ただし、ブラウザ側のチェックだけに頼らず、送信先側でも入力値を検証します。

複数の選択肢はfieldsetとlegendでまとめる

ラジオボタンやチェックボックスが一つの質問に属する場合は、fieldsetでまとめ、legendで質問名を示せます。次は2項目の入力例から、連絡方法を選ぶ例への発展です。ここでは、labelでinputを囲む別の関連付け方を使っています。

<fieldset>
  <legend>希望する連絡方法</legend>

  <label>
    <input type="radio" name="contact" value="email">
    メール
  </label>

  <label>
    <input type="radio" name="contact" value="phone">
    電話
  </label>
</fieldset>

フォームが動かないときの確認ポイント

うまく動かないときは、自分の症状に合う項目から確認します。直した後は保存・再読み込みし、その症状が解消すれば確認を終えて構いません。

入力欄の一部が送信対象にならない

この基本例では、一緒に送信したい入力欄と送信ボタンを、同じform内へ置きます。終了タグが途中に入っていないか、別のformを入れ子にしていないかを確認します。送信先を用意した段階で、必要な項目が一緒に届けば修正できています。

ラベルを押しても入力欄へ移動しない

labelのforと入力欄のidを、大文字小文字やハイフンも含めて一致させます。同じidをほかの入力欄に使っていないかも確認し、ラベルを押して狙った欄にカーソルが移れば完了です。

<!-- 一致している例 -->
<label for="user-email">メールアドレス</label>
<input id="user-email" name="email" type="email">

入力した値が送信先で見つからない

入力欄のnameが空になっていないか、送信先が受け取る項目名と一致するかを確認します。disabledで無効にした欄や、未選択のチェックボックス・ラジオボタンは送信されません。受け取り処理で、期待した項目名と値を確認できれば完了です。

ボタンを押しても送信が始まらない

ブラウザーが入力を促している場合は、必須項目やメール形式を直します。案内が出ない場合は、送信ボタンがtype="submit"か確認してください。反対に、送信したくない操作にはtype="button"を指定します。送信先を用意した後で、意図した動作になるか確かめます。

送信後にエラーが出る・メールが届かない

actionのURLと、そのURLで受け取る処理を確認します。練習コードの/contactは仮の指定なので、エラーになっても入力欄の書き方が原因とは限りません。実用化するときは、受け取り処理の仕様に合わせてactionとmethodを設定し、受付結果・保存内容・メール到着まで確認します。

一度に複数箇所を変えず、症状に関係する箇所を一つずつ直すと、原因を特定しやすくなります。

HTMLフォームでよくある質問

同じページにフォームを2つ置けますか？

置けます。ただし、form同士を入れ子にせず、別々に並べます。入力欄のidはページ全体で重複させず、それぞれのlabelのforを対応する値にします。

buttonとinput type=”submit”はどちらを使えばよいですか？

どちらもフォームを送信できます。文字以外の要素も含めて柔軟に内容を組み立てたい場合はbutton type="submit"が使いやすく、単純な送信ボタンならinput type="submit"でも構いません。

まとめ

HTMLフォームは、form・input・label・buttonの役割を分けて考えると書きやすくなります。

• formは入力項目を一つの送信単位にまとめる
• inputは文字や選択状態などの値を受け取る
• labelは入力欄の意味を示し、forとidで関連付ける
• nameは送信データの項目名になる
• buttonはtypeで送信するかどうかを明示する
• メール送信や保存には、HTMLとは別に受け取り処理が必要

まずは完成コードを保存してブラウザーで開き、ラベルのクリックと未入力・メール形式のチェックを試してみましょう。入力画面を確認できたら、必要な入力欄や送信先の設定へ進めます。

目的に合わせて次の内容を学ぶ

入力欄の種類や初期値を詳しく知りたい場合は、inputの解説へ進んでください。

あわせて読みたい

HTMLのinputタグとは？type属性の種類・name・valueの書き方を初心者向けに解説 HTMLのinputタグを初心者向けに解説。type属性の種類、name・value・id・placeholderの違い、送信データの仕組みをコードと図解で学べます。

入力画面を作れたら、送信先と送信方法を確認しましょう。受け取り側に合わせて設定する考え方を解説しています。

あわせて読みたい

HTMLフォームのaction・method属性とは？送信先と送信方法の書き方を初心者向けに解説 HTMLフォームのaction属性とmethod属性について、送信先URLとGET・POSTの書き方、データ送信の流れ、よくある失敗を初心者向けに解説します。