【HTML】フォームタグの理解を深めよう【超基礎編】
Web制作初心者
「Webサイトの作り方を最近学び始めたけど、フォームタグがちょっとHTMLの中でも特殊な気がする。もっと理解を深めたい。」
こういった悩みにお答えします。
本記事の内容
- HTMLのフォームタグの超基礎
こんにちは、mine（@mineblog7）です。
ブログ歴は4年ほどになります。現在はmineblogを一人で運営しています。
Webサイトを見ていると、入力・選択項目や送信ボタンなどのフォームが設置されていることがあります。
フォームの設置例
- お問い合わせページ
- 各種申込画面
- ローンの返済シミュレーション
入力・送信のフォームというのはフォームタグ（HTML）で作成されています。
フォームタグとは？
フォームメーラーのようなサービスや、WordPressのプラグイン（Contactform7、MW WP Formなど）の使用によるフォームなどにより容易に設置できます。しかし、顧客からの要望や、仕様によっては既存のサービスやツールだけで実現させるというのは限界があります。
フォームタグは他の一般的なHTMLタグ（divやaタグなど）に比べてちょっと変わっていて、イマイチ理解しきれていない人もおそらくいるでしょう。
というわけで、この記事ではフォームタグの超基礎について触れます。
フォームタグが苦手だという方は一緒に学習していきましょう。
フォームタグの種類を把握しよう
フォームタグにはいくつか種類があるので、下記のように大きく4つに分類してみました。
- 入力・送信フォームの枠組みを作るタグ
- フォームの部品となるタグ
- フォーム部品の関連付けやグループ化を目的としたタグ
- 送信ボタン、取消ボタン、汎用ボタンを作るためのタグ
入力・送信フォームの枠組みを作るタグ
Webサイト上で入力・送信フォームを作る際には「ここからここまでがフォームですよ」という必ずフォームの枠組みを作るためのタグが必要になります。
入力・送信フォーム作成に絶対必要になるものが<form>タグです。
<form>～</form>間に、フォーム部品（テキストボックス・チェックボックス・送信ボタンなど）を配置してフォームを作ることになります。
<form>タグによって入力されたデータの受け渡しを行うわけですが、そこで重要となるのがaction属性とmethod属性です。
action属性
action属性では、<form>タグ内のテキストボックスやラジオボタンなど入力したデータをどこに送信するか（送信先）を指定します。
action属性ではデータの送信先プログラムのURI（CGIプログラム※、ファイル名、URL）の名前を指定します。
※CGIプログラム
例えば、mail.cgiというプログラムへデータを送信するときは、下記のようにaction属性へ記述をします。
例えば、このような記述をします。
<form action="mail.cgi" method="POST">（入力データ）</form>method属性
method属性では、<form>タグ内のテキストボックスやラジオボタンなど入力したデータの送信方法を指定します。method属性では、GETとPOSTの2種類があります。
GET
URLの後ろに”？”マークを使ったパラーメータを付けて送信する方法です。
Yahoo!の検索ボタンをクリックすると、GET形式で検索内容が送信されURLにパラーメータが後ろにくっついてきます。
文字制限がああるため、複雑なフォームになると、データを渡せないというデメリットがあります。
POST
文字制限がなく、複雑なフォームや大量のデータを送信する場合に適しています。
<form>タグは、データ受け渡しといったバックエンドの処理が主で、ブラウザ側では目に見えないものなので、入力フォーム（フォーム部品）に比べると多少理解しづらいかもしれません。
とりあえず<form>タグでaction属性とmethod属性によりデータを受け渡すということを覚えておきましょう。
他にもtarget属性（ウインドウの指定）、enctype属性（送信するデータ方式の指定）といった属性が用意されています。
フォームの部品となるタグ
自動車のボディだけあっても、エンジンやホイールが無ければそれは車とは言えません。フォームも同様に、フォームの枠だけでは意味は無く、フォームの部品が必要になります。
フォームの部品をフォームコントロールと呼び、このフォームコントロールで実際にユーザーが入力したり送信したりします。
フォームの部品となるタグ
- <input>タグ
- <textarea>タグ
- <select>タグ
それぞれ詳しく説明します。
<input>タグ
フォームの部品（フォームコントロール）といったら<input>タグというくらいよく使われます。
<input>タグでは属性によって種類や初期値などを指定します。
<input>タグの主な属性
| 属性 | 説明 |
| type | コントロールの種類を指定します |
| value | 入力したデータの初期値を指定します |
| name | プログラムが送信された内容を区別するための名前を指定します |
特徴は末尾を</input>で閉じないところでしょう。
例えば、このような記述をします。
<input type="text" value="テキストを入力してください。" name="テキスト入力"><input>タグで用意されているtype属性は種類が豊富なので、ここでは代表的なものを紹介します。
代表的なtype属性一覧
| type属性 | 詳細 |
| text | 通常のテキスト（単語レベル）を入力するフィールドを表示する |
| radio | ラジオボタンを表示する ボタン |
| checkbox | チェックボックスを表示する |
| password | パスワードを入力するフィールドを表示する |
| hidden | 表には見えない隠しフィールドで、ユーザには見せたくない情報などをデータとして受け渡ししたい時などに使用する |
| submit | 送信ボタンを作成する。クリックすると入力したデータが指定した場所へ送信される |
| reset | 入力した値をキャンセルする |
| button | 汎用ボタンを表示する（汎用ボタンをクリックした際にjavascriptの処理を起動させることが多い） |
<textarea>タグ
2行以上のテキスト（文章）を入力させるためのタグです。
rows属性（行数を指定）とcols属性（列数を指定）の記述が必須で、どちらも数字を指定します。
rows属性とcols属性によって入力フィールドの縦幅横幅を指定できます。
<textarea>～</textarea>間にテキスト記述しておくと、初期値としてブラウザに表示されます。
記述例としてはこのような感じです。
<textarea rows="4" cols="10" name="txtarea">ここにテキストが入ります。</textarea><select>タグ
<select>タグはセレクトボックスを設置するためのタグです。<option>タグで選択項目を設定します（<select>～</select>間に設置する）。
<option>タグにvalue属性を持たせます。
方角を選択できます
フォーム部品の関連付けやグループ化を目的としたタグ
<label>タグは項目名と入力フォームの関連付けのためのタグです。
入力フォームは通常、実際に入力する場所（例えば、ラジオボタンならチェックを入れる○の部分）をクリックしなければ入力できません。
<label>タグを使用すれば、入力フォームと紐づいているテキストをクリックした時も入力が可能になります。
何言っているか分からないと思うので、実物を見て理解しましょう。
下に2つのラジオボタンを用意しました。
関連付けなし
「関連付けなし」の方は<label>タグを使用しておらず、○のところをピンポイントでクリックしないとチェックが入りません。
反対に「関連付けあり」のほうは<label>タグを使用しているため、テキスト部分をクリックしてもチェックが入るようになっています。
HTMLソースは以下の通り。
「関連づけあり」のほうには<label>タグと紐づけのためのidが<input>タグに記述してあります。
<input type="radio" name="sample" checked="checked"> 関連付けなし
<input type="radio" name="sample" id="sample0"><label for="sample0"> 関連付けあり</label>送信ボタン、取消ボタン、汎用ボタンを作るためのタグ
ボタンを作るためのタグとして、<button>タグがあります。
<button>タグでtype属性指定することで、送信・取消・汎用ボタンを作ることができます。ちなみに<button>タグでtype属性が未指定だとtype=”submit”がデフォルトになります。
ボタンは<input>タグでもtype="button"、type="submit"などでも作ることが可能で、同じ機能を付けられます。では、<button>タグと<input>タグで作るボタンは何が違うのか？
それは<button>タグは</button>タグで閉じ、<input>タグはタグで閉じないところに違いがあります。
<button>タグは閉じタグがあるので、<button>～</button>内に表示させたいspanやdivで装飾したテキストを入れたり、画像を使用することができるので、デザインや見栄えなどを自由に変えることができます。
一方、<input>タグは閉じタグが無いので、デザイン的に制限があります。<button>タグと<input>タグでそれぞれ汎用ボタンを設置してみました。
<button>タグ
<button>タグは上記のように装飾の自由度が高いです。
<input>タグ
<input>タグは装飾の自由度が低いです。
まとめ
この記事では超基本的なフォームタグの知識を紹介しました。
実はフォームタグ自体は種類はめちゃくちゃ多いわけではないことが理解できたかと思います（属性はたくさんありますが…）。
次回は今回紹介したタグのうちのどれかを深く掘り下げていこうと思います。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の４点減点法」で面接に挑んだ結果