HTMLフォームの作成方法を徹底解説！初心者向けステップバイステップガイド

HTMLフォームは、テキストフィールド、ドロップダウン、チェックボックスなどを使ってユーザーからデータを収集するための仕組みです。HTMLのフォームは<form>タグで囲み、各要素は<input>タグを使って作成します。

---

HTMLフォームは、ユーザーがWebサイトやWebアプリケーションとやり取りするための重要な手段です。フォームを通じてユーザーが送信したデータは、Webサイトやサーバー側で処理・保存することができます。

「HTMLでフォームはどうやって作るの？」——この記事では、その疑問にお答えします。

本チュートリアルでは、具体的な例を交えながら、HTMLフォームの基本、入力フィールドの追加方法、そしてフォームからサーバーへデータを送信する方法までを解説します。読み終える頃には、HTMLフォームを自信を持って作成できるようになっているでしょう。

HTMLフォームとは

HTMLにおけるフォームは、1つ以上の要素で構成されます。HTMLフォームに含められる主な要素は以下のとおりです。

• 1行テキストフィールド
• テキストボックス（複数行）
• ドロップダウンボックス
• チェックボックス
• ボタン
• ラジオボタン

このうち、ボタンとテキストボックス以外の要素は、HTMLコード上で<input>タグを使用します。

ユーザーがフォームを送信すると、その内容は次のいずれかの方法で処理されます。

• サーバーに送信され、さらに処理が行われる
• Webブラウザ側で処理される

HTMLでフォームを作成する前に、まずフォームの設計について考えておきましょう。どんなデータを収集する必要があるのか？ フォームをシンプルに保つにはどうすればよいのか？ フォームが大きくなればなるほど、ユーザーが入力を完了してくれる可能性は下がります。必要最小限の項目に絞ることが、使いやすいフォームへの第一歩です。

サンプルプロジェクト：コーヒーショップのお問い合わせフォーム

このチュートリアルでは、コーヒーショップのWebサイト用フォームを作成していきます。「スリーブラザーズ・コーヒーハウス」という店舗から、Webサイト経由でお客様からの問い合わせを受け付けられるフォームを作ってほしい、という依頼があったとしましょう。

私たちが作るべきフォームは、次の4つの情報を受け付けるものです。

• ユーザーの名前
• ユーザーのメールアドレス
• ユーザーがそのコーヒーショップに来店したことがあるかどうか
• コーヒーショップに送りたいメッセージ

つまり、フォームには4つの入力要素が必要になり、さらにフォームを送信するためのボタンも1つ追加します。

HTMLの<form>タグ

HTMLのフォームは、<form>タグで囲んで定義します。基本的な構造は以下のとおりです。

<form>
	// ここにフォーム要素を記述
</form>

<form>タグは、HTMLでフォームを定義するために使われます。一度定義すれば、その中にチェックボックスや1行テキストフィールドなどのフォーム要素を配置できます。

<form>要素は、actionとmethodという2つの属性を受け付けます。これらについては後ほど詳しく解説します。

HTMLフォームの<input>要素

HTMLフォームのコントロールの多くは、input要素を含みます。input要素は、ユーザーからさまざまな種類のデータを収集するために使用され、<input>タグで定義します。

input要素がWebページ上でどのように表示されるかは、指定されたtype属性によって決まります。たとえば、テキストボックスとして表示される場合と、ラジオボタンとして表示される場合では、見た目が異なります。

<input>要素の基本構文は次のとおりです。

<input type="type" id="elementId">

この例では、<input>が2つの属性を受け取っています。1つ目の属性はtypeで、フォームフィールドが受け付ける入力の種類を指定します。type属性には多くの値を設定できますが、特によく使われるものは以下のとおりです。

• button
• checkbox
• email
• text
• number
• radio

2つ目の属性はidです。この属性はinput要素を一意に識別するために使用され、後述するフォーム処理スクリプトが、ユーザーが送信したデータにアクセスする際の鍵となります。

それでは、スリーブラザーズ・コーヒーハウスのフォームに戻りましょう。最初に収集したい情報は、ユーザーの名前とメールアドレスです。これらは2つの<input>タグで収集できます。

<form>
	<label for="name">名前：</label><br/>
	<input type="text" id="name" name="name"><br /><br />
	<label for="email">メールアドレス：</label><br/>
	<input type="email" id="email" name="email">
</form>

このように、ユーザーの名前とメールアドレスという2つの値を受け付けるフォームができました。この例では<label>要素も使用しています。この要素については後ほど詳しく説明します。

HTMLフォームのname属性

HTMLフォーム内のすべてのフォーム要素には、必ずname属性を指定しなければなりません。この属性は、フォームの内容を送信する際に使用されるためです。フォーム要素にname属性を指定しなかった場合、その要素の内容はサーバーに送信されません。

先ほどの例では、「名前」フィールドに値がnameのname属性を、「メールアドレス」フィールドに値がemailのname属性をそれぞれ指定しています。

HTMLの<label>要素

先ほどの例では、フォームの各項目にラベルを付けるために<label>要素を使用しました。<label>タグを使うことで、そのフォーム要素が何のためのもので、どんなデータを受け付けるのかを明確に示せます。

また、<label>タグにはアクセシビリティ上のメリットもあります。スクリーンリーダー（音声読み上げソフト）を利用しているユーザーに対して、コンピュータが読み上げるテキストを定義できるのです。スクリーンリーダーは、Webページ上で入力フィールドに遭遇すると、対応するラベルを読み上げます。

HTMLラベルの構文は以下のとおりです。

<form>
	<label for="name">名前：</label><br/>
	<input type="text" id="name" name="name">
</form>

この例では、ユーザーの名前を収集するフォームを作成し、<label>タグで「名前：」というラベルを追加しています。注目すべきは、<label>要素にfor属性を指定している点です。この属性の値は、ラベルが紐づくinput要素のid属性と同じ値にする必要があります。これにより、フォーム要素とラベルが正しく関連付けられます。

HTMLフォームの各種要素

再びスリーブラザーズ・コーヒーハウスのフォームに戻りましょう。冒頭で述べたとおり、収集したい情報は「名前」「メールアドレス」「来店経験の有無」「メッセージ」の4つでした。

ここまでに作成したのは、名前フィールドとメールアドレスフィールドの2つです。続いて、残りのフォーム要素の作り方を見ていきましょう。

ラジオボタン

ラジオボタンは、HTMLフォームでよく使われる入力タイプの一つです。限られた選択肢の中から、ユーザーに1つの値だけを選ばせたい場合に便利です。性別、年齢層、はい/いいえ形式の回答などを収集するフォームでよく使われています。

ラジオボタンの構文は次のとおりです。

<input type="radio" name="radio_button">

今回のフォームでは、「あなたはスリーブラザーズ・コーヒーハウスのお客様ですか？」という質問をしたいと思います。これはラジオボタンで実現できます。コードは以下のとおりです。

<form>
  <p>あなたはスリーブラザーズ・コーヒーハウスのお客様ですか？</p>
  <input type="radio" id="yes" name="customer" value="yes">
  <label for="yes">はい</label><br />
  <input type="radio" id="no" name="customer" value="no">
  <label for="no">いいえ</label><br />
</form>

これにより、ユーザーはyesまたはnoのいずれかの値を送信できるようになります。

コードを分解してみましょう。まず<form>を定義し、次に<p>タグでユーザー向けの説明文を追加しています。

その次の行で、値がyesのラジオボタンを作成し、そのボタン用のラベルとして「はい」というテキストを表示しています。同様に、値がnoのラジオボタンと、「いいえ」というテキストを表示するラベルも作成しています。

注目していただきたいのは、ラジオボタンにvalue属性を指定している点です。この値は、ユーザーがフォームを送信したときにサーバーへ送られるデータになります。つまり、ユーザーが「はい」のラジオボタンをクリックした場合、yesという値がサーバーに送信されるのです。

HTMLの<textarea>要素

最後に追加したい入力要素が、テキストエリア（複数行テキストボックス）です。ここまでで、ユーザーの名前、メールアドレス、来店経験の有無を収集できました。次は、コーヒーショップへメッセージを送れるフォーム要素を追加しましょう。

これには<textarea>要素を使用します。コードは以下のとおりです。

<form>
	<label for="message">メッセージ：</label><br />
	<textarea id="message" name="message">
	スリーブラザーズ・コーヒーハウスにどんなメッセージを送りますか？
	</textarea>
</form>

このコードでは、まず「メッセージ：」と表示されるlabelを定義しています。

次に、<textarea>タグでテキストエリアを定義し、2つの属性を指定しています。

1. id：ユーザーが回答を送信した後に、フォームの内容を参照するために使用します。
2. name：フォームの内容を送信するために必須の属性です。

最後に、開始タグと終了タグの間に「スリーブラザーズ・コーヒーハウスにどんなメッセージを送りますか？」というテキストを記述しています。これは、ユーザーが最初に見るデフォルトのメッセージになります。

これでテキストエリアフィールドが完成しました。ユーザーはこのフィールドを使って、コーヒーショップへメッセージを送信できます。

HTMLのsubmit（送信）ボタン

フォームの内容がすべて定義できたら、いよいよsubmitボタンを追加しましょう。submitボタンの構文は次のとおりです。

<input type="submit" value="送信">

submitボタンは、フォームの内容をフォームハンドラ（フォームハンドラとは通常、フォームの内容を処理できるWebサーバー上のページのことです）へ送信するために使用します。submitボタンはフォームハンドラにリンクされており、フォームハンドラは<form>タグのaction属性で指定する必要があります。

それでは、コーヒーショップのWebフォームにsubmitボタンを追加してみましょう。コード全体は以下のとおりです。

<form action="/post.php">
    <label for="name">名前：</label>
    <br/>
    <input type="text" id="name" name="name">
    <br />
    <br />
    <label for="email">メールアドレス：</label>
    <br />
    <input type="email" id="email" name="email">
    <br />

    <p>あなたはスリーブラザーズ・コーヒーハウスのお客様ですか？</p>
    <input type="radio" id="yes" name="customer" value="yes">
    <label for="yes">はい</label>
    <br />
    <input type="radio" id="no" name="customer" value="no">
    <label for="no">いいえ</label>
    <br /><br />

    <label for="message">メッセージ：</label><br />
    <textarea id="message" name="message">
    スリーブラザーズ・コーヒーハウスにどんなメッセージを送りますか？
    </textarea>

    <input type="submit" value="送信">
</form>

ご覧のとおり、フォームにsubmitボタンを追加し、あわせて<form>タグにactionパラメータを指定しました。このパラメータによって、フォームがその内容を処理するファイルとリンクされます。

Webフォームの送信処理

HTMLフォームを作成したら、次はユーザーがフォームから送信したデータを処理するハンドラを作成する必要があります。<form>要素には、フォームデータをサーバーへ送信するための2つの属性、actionとmethodが用意されています。

フォームのaction属性

action属性は、フォームハンドラのコードがある場所を定義します。フォームが送信される——つまりユーザーがsubmitボタンをクリックした——ときに、フォームが収集したデータはフォームハンドラへ送られます。

先ほどの例では、フォームが送信されると、フォームのデータはフォームハンドラのコードを含むページpost.phpへ送信されます。action属性を定義したフォームの例は以下のとおりです。

<form action="/post.php">
</form>

action属性が指定されていない場合、フォームは現在のページ自身に送信されます。

フォームのmethod属性

method属性は、フォーム送信時に使用すべきHTTPメソッドを指定します。デフォルトではフォームはGETメソッドを使用しますが、POSTなど他のHTTPメソッドを指定することも可能です。

フォームのmethod属性の使用例は以下のとおりです。

<form action="/post.php" method="POST">
</form>

このフォームが送信されると、収集されたデータはHTTPのPOSTメソッドを使ってサーバーへ送信されます。（もしGETリクエストを送りたい場合は、"GET"と明示的に指定するか、GETがデフォルトのメソッドであるため単純に省略することもできます。）

ほとんどの場合、データの送信にはHTTPのPOSTメソッドを使用すべきです。なぜなら、GETメソッドではフォームデータがページのアドレス欄に表示されてしまうからです。たとえば、「name」というフィールドに「Pauline」という値が入ったフォームをGETでpost.phpに送信した場合、次のようなURLがWebサイトに送信されることになります。

/post.php?name=Pauline

これは安全ではないデータ送信方法です。機密情報を扱う場合は、決してGETメソッドを使用してはいけません。

まとめ

フォームは、ユーザーデータを収集・処理できるHTMLの重要な機能です。

このチュートリアルでは、具体的な例を通じて、HTMLフォームの基礎と、初めてのWebフォームの作成方法を解説しました。これであなたも、プロのように自分だけのHTMLフォームを設計・開発する準備が整いました！