HOME
本記事は執筆時点（2020年12月14日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
<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と組み合わせていろいろな機能を作り出すことが出来ます。