こんにちは、後藤です。

今回は、ホームページを運用していく上で必須と言っても過言ではない、お問い合わせフォームなどを作成するときに使用する、フォームについて解説していきます。

 

<form>タグ

まず、フォームを作成するには、後述するフォームコントロールをグループ化するために<form>タグで囲う必要があります。

また、<form>タグを使用する際には、action属性とmethod属性を記述しましょう。

action属性では、入力データの送信先を指定します。

method属性では、送信方法を指定します。

このように記述します。

（例）

 

フォームコントロール

フォームコントロールは、次のタグを利用して作成します。

<input>：各種入力フィールドやボタン

<select>：選択肢

<textarea>：複数行のテキストフィールド

<button>：ボタン

name属性

フォームコントロールはname属性でコントロール名を指定する必要があります。

分かりやすい名前を付けておきましょう。

例えば、メールアドレスを入力するコントロールには、「name=”mail”」と指定します。

コントロール名を省略した場合、データが送信されないので注意しましょう。

ラベルの指定

項目名と入力フィールドに関連性を持たせるために、<label>タグを使用します。

二通りの方法があります。

 

一つ目は、<label>タグで項目名と入力フィールドを囲う方法。

（例）

 

二つ目は、フォームコントロールにIDを指定し、<label>にfor属性を指定する方法。

IDとfor属性には、同じ名前を指定します。

（例）

 

<input>タグ

<input>タグでは、type属性を指定することによって、様々な入力フィールドやボタンを作成することができます。

type属性を省略した場合、「text」で処理されます。

このように記述します。閉じタグは必要ありません。

（例）

以下に一覧を記述します。

テキストフィールド

テキスト：text

検索：search

URL：url

電話番号：tel

メールアドレス：email

パスワード：password

日付

年月日：date

年月：month

週：week

時刻：time

日時：datetime-local

数値・色

数値：number

大まかな数値：range

カラーピッカー：color

選択肢

チェックボックス：checkbox

ラジオボタン：radio

チェックボックスでは複数の選択が、ラジオボタンでは一つのみの選択が可能です。

value属性で送信する値を指定します。

選択肢をグループ化するためには、同じname属性を指定します。

（例）

特殊なコントロール

ファイルアップロード：file

隠しフィールド：hidden

ボタン

送信ボタン：submit

画像ボタン：image

リセットボタン：reset

ボタン：button

 

<select>タグ

<select>タグでは選択肢をプルダウン形式で表示できます。

選択肢は<option>タグで指定します。

value属性で送信する値を指定します。

このように記述します。

（例）

 

<textarea>タグ

<textarea>タグでは、複数行のテキストフィールドを作成できます。

横幅はcols属性で文字数、高さはrows属性で行数を指定することも可能です。

このように記述します。

閉じタグが必要なことに注意してください。

（例）

 

<button>タグ

<button>タグを利用すると、囲ったコンテンツをボタンとして機能させることができます。

例えば、画像などです。

ボタンの機能はtype属性で指定します。

submit：送信ボタン

reset：リセットボタン

button：汎用ボタン

（例）

 

終わりに

今回は、お問い合わせフォームなどに利用されるフォームについて解説しました。

簡単な部分だけを解説しましたが、まだまだフォームにはいろいろな機能があります。

name属性の記述を忘れてしまうとデータが送信されないので、name属性の記述は忘れないようにしましょう。