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

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

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点（2020年12月14日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

<form>タグとは？

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

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

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

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

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

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

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

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

<input>タグ

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

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

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

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

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

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

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

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

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

  1.     年齢：<input type="number" name="age">歳<br>
 年齢：歳

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

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

  1.     希望日：<input type="date" name="date"><br>
 希望日：

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

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

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

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

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

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

  1.         <p>希望する曜日</p>
  2.         月:<input type="checkbox" name="week" value="mon">
  3.         火:<input type="checkbox" name="week" value="tue">
  4.         水:<input type="checkbox" name="week" value="wed">
  5.         木:<input type="checkbox" name="week" value="thu" checked>
  6.         金:<input type="checkbox" name="week" value="fri">
  7.

希望する曜日

月: 火: 水: 木: 金:

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

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

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

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

性別

男性: 女性:

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

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

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

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

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

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

希望する曜日

: : : : :

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

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

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

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

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

  1.         <span>希望する曜日を選んでください</span>
  2.         <select name="week">
  3.             <option value="mon">月曜日</option>
  4.             <option value="tue">火曜日</option>
  5.             <option value="wed">水曜日</option>
  6.             <option value="thu">木曜日</option>
  7.             <option value="fri">金曜日</option>
  8.         </select>
  9.
希望する曜日を選んでください

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

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

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

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

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

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

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

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

  1.         <style>
  2.             #sample_form{
  3.                 background: beige;
  4.             }
  5.             #sample_form th,#sample_form td{
  6.                 font-weight:400;
  7.             }
  8.             #sample_form th{
  9.                 width:30%;
  10.             }
  11.             #sample_form td{
  12.                 width:70%;
  13.                 text-align: left;
  14.             }
  15.             #sample_form tr:nth-child(odd) th,#sample_form tr:nth-child(odd) td{
  16.                 background: #f9f9f9;
  17.             }
  18.             #sample_submit{
  19.                 width:50%;
  20.                 background: #333;
  21.                 color: white;
  22.             }
  23.         </style>
  24.         <table id="sample_form">
  25.         <form action="sample.php" method="post">
  26.             <tr><th colspan="2" style="text-align: center;">お問い合わせフォームのサンプル</th></tr>
  27.             <tr><th>名前<span style="color:red;font-size:12px;">必須</span></th><td><input type="text" name="name" placeholder="氏名" required></td></tr>
  28.             <tr><th>性別</th><td>
  29.                 <label for="man">男性</label><input type="radio" name="sex" value="man" id="man">
  30.                 <label for="woman">女性</label><input type="radio" name="sex" value="woman" id="woman">
  31.             </td></tr>
  32.             <tr><th>メールアドレス</th><td><input type="text" name="email" placeholder="yamada@sample.com"></td></tr>
  33.             <tr><th>問合せカテゴリー</th><td>
  34.                 <label for="use">使い方</label><input type="checkbox" name="category" value="use" id="use">
  35.                 <label for="price">価格</label><input type="checkbox" name="category" value="price" id="price">
  36.                 <label for="trouble">故障</label><input type="checkbox" name="category" value="trouble" id="trouble">
  37.                 <label for="other">その他</label><input type="checkbox" name="category" value="other" id="other">
  38.             </td></tr>
  39.             <tr><th>問合せ内容</th><td><textarea rows="10" cols="100" style="width:100%;"></textarea></td></tr>
  40.             <tr><th colspan="2"><input type="submit" value="送信" id="sample_submit"></th></tr>
  41.         </form>
  42.         </table>
  43.
お問い合わせフォームのサンプル
名前必須
性別
メールアドレス
問合せカテゴリー
問合せ内容

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

まとめ

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

広告
広告

関連する記事

サムネイル

HTMLのdetailsとsummaryでアコーディオン機能……

2025年02月06日
details要素を使えばHTMLだけでアコーディオン機能を実装できることを知ったので、summary要素も含めた使い方を備忘録としてまとめます。 detail […]
サムネイル

HTMLのpicture要素とsourceタグの使い方【レス……

2024年11月07日
picture要素を使った画像の表示について備忘録としてまとめます。 picture要素とは？ HTMLのpicture要素は、様々な画面サイズやブラウザに合わ […]
サムネイル

video要素とsource要素で画面サイズに応じて読み込む……

2024年09月19日
最終更新日:2024年11月07日
HTMLのsource要素とは？ HTMLのsource要素は、video要素やpicture要素の子要素として複数のメディアソースを指定したいときに使う要素で […]
サムネイル

HTMLのテキストボックスにクリアボタンを実装【inputの……

2024年09月04日
inputのtype属性を「search」にすれば自動的にクリアボタンが表示されます。簡単ですがデザインはブラウザに依存しておりカスタマイズはできません。JSを使って処理を自作する方法は、HTML・CSS・JSに関するある程度の知識が必要ですが、自由にカスタマイズできます。
サムネイル

HTMLのinputのdateで日付の入力欄を作る【初期値や……

2023年10月01日
最終更新日:2023年09月28日
HTMLのinputタグのtype属性にdateを指定すると、フォームなどに日付の入力欄を設置することができます。
サムネイル

ブラウザキャッシュを回避するCache Bustingの方法……

2023年09月01日
Cache Busting（キャッシュバスティング）とはキャッシュを利用せずに読み込みするように指定することです。
サムネイル

HTMLのdatalistタグの使い方【文字入力とプルダウン……

2023年08月08日
HTMLのdatalistは、テキストボックスとセレクトボックスを組み合わせたような入力欄を作ることができるタグです。一見普通のテキストボックスですが、クリックすると用意した入力候補が表示されます。