• HOME > 
  • HTML > 
  • HTMLのformタグで入力フォームを作る方法

HTMLのformタグで入力フォームを作る方法

投稿日:

<form>タグとは?

「フォームで入力した内容を送信する」機能をもつHTMLタグです。

問い合わせフォームは、別に集計してメールを送る処理を記述したファイルを用意し、そのファイルへ向けてデータを送信するという仕組みになっています。

<form>タグ内に「action="送信先のファイル名"」と「method="送信方法"」を指定します。

<form action="get.php" method="get">
-省略-
</form>

フォームを形成するための各種タグ

<form>タグはデータの送信先や送信方法を指定するだけなので、入力の部分を担う各種タグを組み合わせてフォームを作成します。

大きく分けて「<input>タグ」、「<select>タグ」、「<textarea>タグ」が存在します。

どの項目データかどうか受信先のファイルに伝えるために「name=""」や「id=""」、「value=""」といった情報を設定して記述します。

<input>タグ

直接テキストを入力できるテキストボックスの他、type=""を指定することで「年月日入力」、「チェックボックス」、「ラジオボタン」まで作ることが出来ます。

フォームに欠かすことのできない送信ボタンもinputにtype="submit"を指定することで作成します。

<input>タグには閉じタグはなく単独で機能します。

<テキストボックスを作る<input type="text">タグ

テキストの入力欄を作成することが出来ます。

    名前:<input type="text" name="namae" placeholder="入力して下さい"><br>
    住所:<input type="text" name="adress" placeholder="東京都○○区○○1-2-3">
名前:
住所:

・name=""には何の項目のデータかわかるように任意の名前を付けます。
・必要に応じて、タグ内のplaceholder=""に最初に表示させておく文章を設定します。

<数値入力欄を作る<input type="number">タグ

矢印ボタンで数値を増やしたり減らしたりする入力欄を作成することが出来ます。

    年齢:<input type="number" name="age">歳<br>
年齢:

<年月日入力用の<input type="date">タグ

カレンダーを表示させ日付を選択する欄を作成することが出来ます。

    希望日:<input type="date" name="date"><br>
希望日:

<送信ボタンを作る<input type="submit">タグ

フォームに欠かすことのできない送信ボタンを作成することが出来ます。

        名前:<input type="text" name="namae" placeholder="入力して下さい"><br>
        住所:<input type="text" name="adress" placeholder="東京都○○区○○1-2-3"><br>
        <input type="submit" value="送信する">
    
名前:
住所:

input type="submit"ではvalue=""に記述したテキストがボタン内に表示されます。

<チェックボックスを作る<input type="checkbox">タグ

複数選択が可能なチェックボックスを作成することが出来ます。value=""にデータの値を設定します。

        <p>希望する曜日</p>
        月:<input type="checkbox" name="week" value="mon">
        火:<input type="checkbox" name="week" value="tue">
        水:<input type="checkbox" name="week" value="wed">
        木:<input type="checkbox" name="week" value="thu" checked>
        金:<input type="checkbox" name="week" value="fri">
    

希望する曜日

月: 火: 水: 木: 金:

input type="checkbox"にcheckedを追記すると最初からチェックが入った状態にしておくことが出来ます。

<ラジオボタンを作る<input type="radio">タグ

一つだけ選択可能なラジオボタンを作成することが出来ます。value=""にデータの値を設定します。

        <p>性別</p>
        男性:<input type="radio" name="sex" value="man" checked>
        女性:<input type="radio" name="sex" value="woman">
    

性別

男性: 女性:

input type="checkbox"にcheckedを追記すると最初からチェックが入った状態にしておくことが出来ます。

チェックボックスやラジオボタンの項目名を作る<label>タグ

項目名を表示する際に<label>タグを使用すると、項目名をクリックしたときに該当するチェックボックスやラジオボタンにチェックを入れることが出来ます。

特にスマホなどの場合にはチェックボックス自体をタッチするのが難しいので項目名の表示は<label>タグで行った方が良いです。

<input>タグにIDを付け、タグ内のfor=""にそのIDを記述し、どの入力項目の項目名かを結びつけます。

        <p>希望する曜日</p>
        <label for="mon">月</label>:<input type="checkbox" id="mon" name="week" value="mon">
        <label for="tue">火</label>:<input type="checkbox" id="tue" name="week" value="tue">
        <label for="wed">水</label>:<input type="checkbox" id="wed" name="week" value="wed">
        <label for="thu">木</label>:<input type="checkbox" id="thu" name="week" value="thu" checked>
        <label for="fri">金</label>:<input type="checkbox" id="fri" name="week" value="fri">
    

希望する曜日

: : : : :

見た目は変わりませんが項目名をクリックするとチェックが入るようになっています。

ドロップダウンリスト(プルダウン)を作る<select>タグと<option>タグ

選択肢をプルダウンするリストの中から選べるドロップダウンリストを作成することが出来ます。

<select>タグで囲み、ひとつひとつの項目を<option>タグで生成します。

<select>タグの方にname=""を設定し、<option>タグそれぞれにvalue=""でデータの値を設定します。

        <span>希望する曜日を選んでください</span>
        <select name="week">
            <option value="mon">月曜日</option>
            <option value="tue">火曜日</option>
            <option value="wed">水曜日</option>
            <option value="thu">木曜日</option>
            <option value="fri">金曜日</option>
        </select>
    
希望する曜日を選んでください

テキストエリアを作る<textarea>タグ

<input type="text">タグが一行のテキスト入力欄を作るのに対し、<textarea>タグは 複数行に渡る大きなテキスト入力欄を作ることが出来ます。

<textarea>タグは閉じタグが必要なので注意が必要です。

    <textarea rows="10" cols="50" placeholder="これがテキストエリアです。質問内容の入力欄などに使われています。" style="width:100%;"></textarea>

入力欄の行数はrowsに1行あたりに入力可能な文字数はcolsにそれぞれ指定します。

<form>タグで作るお問い合わせフォームの例

お問い合わせフォームは上記で紹介した各タグを組み合わせることで出来上がります。

フォームのレイアウトの組立には、テーブルを利用することが多いです。<input>タグなどもすべてCSSでスタイルを変更することが出来ます。

        <style>
            #sample_form{
                background: beige;
            }
            #sample_form th,#sample_form td{
                font-weight:400;
            }
            #sample_form th{
                width:30%;
            }
            #sample_form td{
                width:70%;
                text-align: left;
            }
            #sample_form tr:nth-child(odd) th,#sample_form tr:nth-child(odd) td{
                background: #f9f9f9;
            }
            #sample_submit{
                width:50%;
                background: #333;
                color: white;
            }
        </style>
        <table id="sample_form">
        <form action="sample.php" method="post">
            <tr><th colspan="2" style="text-align: center;">お問い合わせフォームのサンプル</th></tr>
            <tr><th>名前<span style="color:red;font-size:12px;">必須</span></th><td><input type="text" name="name" placeholder="氏名" required></td></tr>
            <tr><th>性別</th><td>
                <label for="man">男性</label><input type="radio" name="sex" value="man" id="man">
                <label for="woman">女性</label><input type="radio" name="sex" value="woman" id="woman">
            </td></tr>
            <tr><th>メールアドレス</th><td><input type="text" name="email" placeholder="yamada@sample.com"></td></tr>
            <tr><th>問合せカテゴリー</th><td>
                <label for="use">使い方</label><input type="checkbox" name="category" value="use" id="use">
                <label for="price">価格</label><input type="checkbox" name="category" value="price" id="price">
                <label for="trouble">故障</label><input type="checkbox" name="category" value="trouble" id="trouble">
                <label for="other">その他</label><input type="checkbox" name="category" value="other" id="other">
            </td></tr>
            <tr><th>問合せ内容</th><td><textarea rows="10" cols="100" style="width:100%;"></textarea></td></tr>
            <tr><th colspan="2"><input type="submit" value="送信" id="sample_submit"></th></tr>
        </form>
        </table>
    
お問い合わせフォームのサンプル
名前必須
性別
メールアドレス
問合せカテゴリー
問合せ内容

各タグに「required」を指定するとその項目は入力必須項目となり、入力せずに送信ボタンを押すとエラーメッセージが出るようになります。

まとめ

WEBサイトの中では、問合せフォームだけでなく会員登録やログインフォーム、検索フォームなど様々な箇所で<form>タグは使用されています。 また、フォームを形成する各タグは単体でもJavascriptと組み合わせていろいろな機能を作り出すことが出来ます。

関連する記事

サムネイル

HTMLのpタグ(段落)の使い方【改行タグbrとの違い】

2023年03月15日
pタグの「p」は段落・節を意味するParagraphの頭文字で、ひとかたまりの文章であることを指定するためのタグです。開始タグと終了タグからなる要素で、pタグを使用して段落を分けると前後の要素と改行されます。
サムネイル

Google Chromeのデベロッパーツールの使い方【画像……

2022年01月15日
最終更新日:2022年02月12日
デベロッパーツールとはWEBブラウザであるGoogle Chromeにはじめから備わっている機能の一つです。閲覧中のWEBサイトのページを構成しているHTMLやCSSといったソースコードを確認することができます
サムネイル

HTMLとCSSだけでアコーディオンメニューを作る方法【初心……

2020年12月18日
最終更新日:2022年07月05日
アコーディオンメニューとは、メニューの項目名をクリックすると非表示にされていたコンテンツが項目名の下に広がって表示される機能のことです。HTMLとCSSだけで簡単に実装することが可能です。
サムネイル

HTMLでスクロールバーを表示させる方法

2020年12月17日
最終更新日:2022年01月28日
HTMLで表示させるスクロールバーとは? HTMLとCSSを用いることでサイト内のコンテンツを一部だけ見えるようにし隠れた部分をスクロールして見るようにすること […]
サムネイル

HTMLにGoogle MAP(グーグルマップ)の埋め込みを……

2020年12月16日
最終更新日:2022年01月28日
Google MAPとは? 埋め込みとは? 自身のサイトのページの中に特定の場所を示したGoogle MAPを表示させることが出来ます。 簡単かつ無料なうえ、ペ […]
サムネイル

HTMLのtable(テーブル)タグの使い方

2020年12月15日
最終更新日:2022年01月27日
<table>タグとは? WEBサイトに表を表示させたい場合にHTMLの<table>(テーブル)タグを使用します。 単に表の作成に利用 […]