×

HTMLの中でも一風変わったフォームタグの理解を深めよう【超基礎編】

2015年11月15日 WEB

form、input、labelタグ

ウェブサイトを見ていると、入力・選択項目や送信ボタンなどのフォームが設置されていることがあります。

お問い合わせページ、各種申込画面、ローンの返済シミュレーションなどでよくフォームが利用されています。

入力・送信のフォームというのはフォームタグ(HTML)で作成されています。

フォームタグとは?
フォームタグとは、入力・送信フォームを作るためのHTMLタグで、代表的なものとしてform、input、buttonタグがある。

フォームメーラーのようなサービスや、WordPressのプラグイン(Contactform7)の使用によるフォームなどにより容易に設置できます。

しかし、顧客からの要望や、仕様によっては既存のサービスやツールだけで実現させるというのは限界があります。

フォームタグは他の一般的なHTMLタグ(divやaタグなど)に比べてちょっと変わっていて、イマイチ理解しきれていない人もたぶんいるはず。

最近、僕が業務でフォームタグに触れる機会が増えたということもあり、一度しっかりと学習することにしました。

というわけで、フォームタグが苦手だという方は一緒に学習していきましょう。

今回はフォームタグの超基礎編です。

フォームタグの種類を把握しよう

フォームタグにはいくつか種類があるので、下記のように大きく4つに分類してみました。

これだけ見てもよく意味が分からないので、それぞれの詳細を見ていきましょう。

入力・送信フォームの枠組みを作るタグ

ウェブサイト上で入力・送信フォームを作る際には「ここからここまでがフォームですよ」という必ずフォームの枠組みを作るためのタグが必要になります。

<form>タグ

入力・送信フォーム作成に絶対必要になるものが<form>タグです。
<form>~</form>間にフォーム部品(テキストボックス・チェックボックス・送信ボタンなど)を配置してフォームを作ることになります。

<form>タグによって入力されたデータの受け渡しを行うわけですが、そこで重要となるのがaction属性とmethod属性です。

【action属性】
action属性では、<form>タグ内のテキストボックスやラジオボタンなど入力したデータをどこに送信するか(送信先)を指定します。

action属性ではデータの送信先プログラムのURI(CGIプログラム※、ファイル名、URL)の名前を指定します。

Common Gateway Interfaceの略で、ウェブサーバー上でブラウザからの要求などに対してプログラムを実行するための仕組み、ルールを指します。このCGIに基づいて作られたプログラムをCGIプログラム(PerlやC言語などで作られることが多い)と呼びます。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>タグ

フォームの部品(フォームコントロール)といったら<input>タグというくらいよく使われます。

<input>タグでは属性によって種類や初期値などを指定します。

<input>タグの主な属性
・type属性…コントロールの種類を指定します
・value属性…入力したデータの初期値を指定します
・name属性…プログラムが送信された内容を区別するための名前を指定します

特徴は末尾を</input>で閉じないところでしょう。

例えば、このような記述をします。

<input type=”text” value=”テキストを入力してください。” name=”テキスト入力”>

<input>タグで用意されているtype属性は種類が豊富なので、ここでは代表的なものを紹介します。

type属性 詳細
text 通常のテキスト(単語レベル)を入力するフィールドを表示する
radio ラジオボタンを表示する
ボタン
checkbox チェックボックスを表示する
password パスワードを入力するフィールドを表示する
hidden 表には見えない隠しフィールドで、ユーザには見せたくない情報などをデータとして受け渡ししたい時などに使用する
submit 送信ボタンを作成する。クリックすると入力したデータが指定した場所へ送信される
reset 入力した値をキャンセルする
button 汎用ボタンを表示する(汎用ボタンをクリックした際にjavascriptの処理を起動させることが多い)

<textarea>タグ

2行以上のテキスト(文章)を入力させるためのタグです。
rows属性とcols属性の記述が必須で、どちらも数字を指定します。

rows属性…行数を指定
cols属性…列数を指定

rows属性とcols属性によって入力フィールドの縦幅横幅を指定できます。
<textarea>~</textarea>間にテキスト記述しておくと、初期値としてブラウザに表示されます。

記述例としてはこのような感じです。

<textarea rows=”4″ cols=”10″ name=”txtarea”>ここにテキストが入ります。</textarea>

<select>タグ

<select>タグはセレクトボックスを設置するためのタグです。
<option>タグで選択項目を設定します(<select>~</select>間に設置する)。

<option>タグにvalue属性を持たせます。

方角を選択できます

フォーム部品の関連付けやグループ化を目的としたタグ

ここまではフォームの核となるタグについて紹介してきましたが、これらのタグの他にもフォーム部品とテキストを関連付けたり、グループ化したりしてユーザビリティを向上させることのできるタグが存在します。
ここではよく使用される<label>タグについて紹介します。

<label>タグ

<label>タグは項目名と入力フォームの関連付けのためのタグです。

入力フォームは通常、実際に入力する場所(例えば、ラジオボタンならチェックを入れる○の部分)をクリックしなければ入力できません。
<label>タグを使用すれば、入力フォームと紐づいているテキストをクリックした時も入力が可能になります。

何言っているか分からないと思うので、実物を見て理解しましょう。

下に2つのラジオボタンを用意しました。

 関連付けなし

「関連付けなし」の方は<label>タグを使用しておらず、○のところをピンポイントでクリックしないとチェックが入りません。

反対に「関連付けあり」のほうは<label>タグを使用しているため、テキスト部分をクリックしてもチェックが入るようになっています。

HTMLソースは以下の通り。
「関連づけあり」のほうには<label>タグと紐づけのためのidが<input>タグに記述してあります。

 関連付けなし

送信ボタン、取消ボタン、汎用ボタンを作るためのタグ

ボタンを作るためのタグとして、<button>タグがあります。
<button>タグでtype属性指定することで、送信・取消・汎用ボタンを作ることができます。
ちなみに<button>タグでtype属性が未指定だとtype=”submit”がデフォルトになります。

ボタンは<input>タグでもtype=”button”、type=”submit”などでも作ることが可能で、同じ機能を付けられます。

では、<button>タグと<input>タグで作るボタンは何が違うのか?

それは<button>タグは</button>タグで閉じ、<input>タグは</input>タグで閉じないところに違いがあります。

<button>タグは閉じタグがあるので、<button>~<button>内に表示させたいspanやdivで装飾したテキストを入れたり、画像を使用することができるので、デザインや見栄えなどを自由に変えることができます。

一方、<input>タグは閉じタグが無いので、デザイン的に制限があります。

<button>タグと<input>タグでそれぞれ汎用ボタンを設置してみました。

<button>タグ

<button>タグは上記のように装飾の自由度が高いです。

<input>タグ

<input>タグは<装飾の自由度が低いです。

まとめ

今回は超基本的なフォームタグの知識を紹介しました。

実はフォームタグ自体は種類はめちゃくちゃ多いわけではないことが理解できたかと思います(属性はたくさんありますが…)。

次回は今回紹介したタグのどれかを深く掘り下げていこうと思います。

あせらずひとつひとつ学習していきましょう。それでは。

関連記事