フォームのタグ

入力フォームを作成するタグとその属性を紹介します。

FORMタグ

入力フォーム全体を定義します。action属性でフォームの送信先を指定します。FORMタグ内に送信したい項目すべてと、送信ボタンを定義します。すると1つのボタンでフォーム内容がすべて送信されます。

action属性

フォームの送信先、つまり送信データを処理するプログラムのパスを指定します。

method属性

フォームの送信方式を指定します。GETとPOSTがあります。どちらにするかはプログラマに確認しましょう。

INPUTタグ

テキストフィールド、ラジオボタン、チェックボックス、送信ボタンなどさまざまなフォームコントロールを定義します。種類はtype属性で設定します。

type属性

フォームコントロールの種類を指定します。

type=”text”
1行のテキストフィールドを作成します。
type=”email”
メールアドレス入力用テキストフィールドを作成します。スマートフォンではメールアドレス入力用のキーボードになります。
type=”tel”
電話番号入力用テキストフィールドを作成します。スマートフォンでは電話番号入力用のキーボードになります。
type=”password”
パスワード入力用テキストフィールドを作成します。入力された値が伏字となります。
type=”radio”
ラジオボタンを作成します。name属性が同じラジオボタンはグループとなり、グループ内では1つしか選択ができなくなります。checked属性を指定すると初期値がオンとなります。
type=”checkbox”
チェックボックスを作成します。チェックボックスでは複数の項目を選択することが許されています。checked属性を指定すると初期値がオンとなります。
type=”submit”
送信ボタンを作成します。ボタンのキャプションはvalue属性で指定します。
type=”image”
画像を使用した送信ボタンを作成します。src属性で画像のパスを指定します。
type=”reset”
リセットボタンを作成します。ボタンを押すと各コントロールがリセットされ、初期値に戻ります。
type=”hidden”
隠し項目を作成します。画面上には表示されず、送信日時などプログラムで値を設定し、送信ボタンで他の項目と一緒に送信します。

LABELタグ

フォームコントロールと項目名をグループ化します。コントロールと項目名をLABELタグでくくる方法と、コントロールのid名を、LABELタグのfor属性に設定する方法があります。

フォームのサンプル

Webブラウザで表示すると、以下のようになります。
sample16

その他のフォームコントロール

TEXTAREAタグ

複数行のテキストフィールドを作成します。終了タグが必須なので忘れないようにしましょう。タグ内に文字列を指定すると、初期値となります。

SELECTタグ

プルダウンリストを作成します。複数のリスト項目の中から1つだけ選択する形式と、複数行を同時に表示し複数項目を選択する形式があります。

OPTIONタグ

プルダウンリストのリスト項目を作成します。selected属性を指定すると、初期値となります。

OPTGROUPタグ

プルダウンリストのリスト項目をグループ化します。label属性でグループ名を指定します。

その他のフォームコントロールサンプル

Webブラウザで表示すると、以下のようになります。
sample17
sample17-1