【HTML入門】formタグを使ってフォームを作る方法を1から解説

この記事ではHTMLでフォームの外観を作る方法について解説します!フォームそのものはPHPなどを使ってデータを送信する必要がありますが、外見はHTMLでも簡単に作ることができます。

ただ、フォームと言っても、ボタン形式のものやテキスト形式など、様々なデータ形式のものがありますよね。この記事では、

HTMLでフォームの外見を作りたい!
フォームがどのように動くかを知りたい!

といった方に向けて、

  • フォームとは
  • フォームの仕組み
  • formタグの使い方
  • formタグと一緒に使われるタグの紹介

について解説していきます。HTMLでフォームを作ってみたい方はぜひご覧ください!

フォームとは

まず、フォームとは何かを知っておきましょう。こちらをご覧ください。

こちらは実際に使われている、侍エンジニアのお問い合わせフォームです。このようにフォームとは、ユーザーが入力した情報をサーバーに送信するためのページになります。

サーバーとのやり取りが必要になるので、Webサイトを作る中でもこのフォームを扱うページはPHPなどの言語で書かれることが多くなります。次はこのあたりの仕組みについて見ていきましょう!


【何から学べばいいかわからない…そんな悩みを解決します!】

完全無料ですぐわかる「プログラミング学習プラン診断」

・適性にあわせて学習プランを診断
・完全無料で気軽に診断できる
・学習の悩みもまるっと解決

さっそく診断してみる

フォームの仕組み

フォームでは先程解説したように、サーバーとのやり取りが必要になります。ですので、PHPでサーバーとのやり取りを記述しなければなりません。HTMLではフォームの入力する部分などの外観を作ります。

その入力された値をPHPに渡すことで、PHPでPOST送信(簡単に言うと個人情報を扱うときに使う方法)を行ってサーバーに送信されます。大まかな仕組みはこちらの記事で解説されているのでぜひご覧ください。

PHPのお問い合わせフォームはこう作る!サンプルつき解説
更新日:2023年3月21日

formタグの使い方

HTMLではフォームを作るためにformタグを使います。またformタグの中にも、

  • inputタグ
  • labelタグ
  • textareaタグ
  • selectタグ

を使ってそれぞれの入力フィールドに対して、部品を構成していきます。それではformタグの使い方から見ていきましょう。

formタグ

formタグはフォームを構成する部品を囲って、どのプログラムに値を渡すか、どのようなメソッド(方法)でデータを送信するかを決めることができます。こちらのコードをご覧ください。

<html>
    <form action="/form.php" method="post">
        <!-- フォームの部品 -->
    </form>
</html>

このコードを実行してブラウザで見てみても、フォームの部品を作っていないので何も起きていないように見えます。しかしここでは、「action="/form.php"」として、実際に動かすPHPのプログラムのパスを設定しています。

また「method="post"」では、POSTメソッドで送信させるということを設定しています。

labelタグ

labelタグは、それぞれのフォームの部品に対してラベル(名前)をつけることができます。こちらのコードをご覧ください。

<html>
    <form action="/form.php" method="post">
        <div>
            <label for="name">名前</label>
        </div>
        <div>
            <label for="email">メールアドレス</label>
        </div>
        <div>
            <label for="message">内容</label>
        </div>
        <p>送信する</p>
    </form>
</html>

実行結果

今回は、名前、メールアドレス、内容についてのフォームを設置すると仮定して、それぞれのラベルを作りました。「for="name"」では、このあとに設置するフォームの入力部分との紐付けをするために書いています。

pタグなどを使って書くこともできそうですが、このようにフォームにはフォームに向けたタグが用意されているのでぜひ、こちらを使っていきましょう。

input

inputタグでは、実際に入力するためのフィールドを設置することができます。こちらのコードをご覧ください。

<html>
    <form action="/form.php" method="post">
        <div>
            <label for="name">名前</label>
            <input type="text" id="name" name="name">
        </div>
        <div>
            <label for="email">メールアドレス</label>
            <input type="mail" id="email" name="email">
        </div>
        <div>
            <label for="message">内容</label>
        </div>
        <input type="submit" value="送信する">
    </form>
</html>

実行結果

ここでは名前とメールアドレス、送信の部分に、inputタグを追加しました。inputタグでは「type="text"」などで指定している部分があります。

これは入力される値が単純なテキストなのか、パスワードなのか、またはファイルなのかなどを決めることができます。今回は、「text」と「mail」、「submit」を設定しました。

ちなみにここで決めているidが、labelのfor属性と紐ついています。「name="name"」では、それぞれのフォームで入力された値に対して名前をつけています。

これで、一度に複数の値が送信された場合でも、どれがどの値かを認識することができます。

textarea

textareaタグでは、inputで「type="text"」にしたときに似た外観を作ることができます。

ただし、このtextareaでは、複数行のテキストも入力することができるようになっています。こちらのコードをご覧ください。

<html>
    <form action="/form.php" method="post">
        <div>
            <label for="name">名前</label>
            <input type="text" id="name" name="name">
        </div>
        <div>
            <label for="email">メールアドレス</label>
            <input type="mail" id="email" name="email">
        </div>
        <div>
            <label for="message">内容</label>
            <textarea id="message" name="message"></textarea>
        </div>
        <input type="submit" value="送信する">
    </form>
</html>

実行結果

このコードでは内容の部分にtextareaタグを追加しました。type属性を決める必要はありませんが、同じようにidとname属性はつけておきましょう。


【なかなかエラーが解決できない…そんな悩みを解決します!】

登録無料で始められるプログラミングスクール「侍テラコヤ」

・回答率100%のQ&A掲示板でエラーを解決!
現役エンジニアとのオンライン相談で悩みを解決!
・50種類以上の教材で複数言語を習得!

侍テラコヤについて詳しく見る

まとめ

この記事ではHTMLでフォームの外観を作る方法について解説してきました。フォームの意味や簡単な作り方は分かって頂けたでしょうか?

ここで解説したのはほんの基本で、他にも適用できるinputタグのtype属性などがあります。自分の作りたいフォームには何が必要なのかを明確にして、コーディングをしていきましょう。

プログラミング学習中、
誰かへ相談したいことはありませんか?

SAMURAI TERAKOYA

プログラミングはエラーの連続。作業を進めるなかで誰かに教えてほしい場面は多いですよね。

そんな悩みを解決できるのが、侍テラコヤです。登録無料で始められて、現役エンジニアとオンラインで相談できるほか、回答率100%のQA掲示版でプログラミングに関する悩みを解決します!

気になる方はぜひ詳細をご覧ください。

→侍テラコヤの詳細をみる

Writer

侍テック編集部

株式会社SAMURAI

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close