「HTML」formタグを使ったフォームの作成について紹介します。

TOP
コラム
「HTML」formタグを使ったフォ

HTMLを学習中の方に向けて、formタグを用いたフォームの形づくりとfromタグ内で使用されるタグについてご紹介いたします。

フォームとは

フォームとは、クライアント側（ユーザー）が何かを入力し、情報を送信できるようになっている画面のことです。何かのアカウントのログイン画面、資料請求、旅行サイトの予約など、個人情報を入力するような画面がありますが、ああいったものがフォームです。
そのフォームですが、多くはHTMLとサーバーサイド言語で構成されています。
フォームを作成するうえで重要なタグが「form」タグです。
実際にデータ送信など、動作するフォームの作成にはPHPなどのサーバーサイド言語が必要となってきますので、今回はフォームの表示とタグの解説を行っていきます。

formタグとは

HTMLにおける「form」タグとは、入力、送信を行うためのフォームを作成するためのタグです。
「form」で囲まれたエリアがフォームとして扱われ、タグ内に様々な部品を追加し、フォームを作成していきます。
以下にサンプルを用意しました。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>

<body>
<form method="POST" action="○○">
    <p><label for="name1>ユーザーネーム：</label><input type="text" name="NAME" id="name1"></p>
    <p>性別:</p>
    <p><label for="man">男</label>input type="radio" name="gender" id="man" value="0"></p>
    <p><label for="woman"></女"><input type="radio" name="gender" id="woman" value="1"></p>
    <select name="sentaku">
  　　<option value="select1">選択肢1</option>
 　　 <option value="select2">選択肢2</option>
 　　 <option value="select3">選択肢3</option>
    </select>

    <p><label for="address">メールアドレス：</label><input type="email" name="mail" id="address"></p>
    <p><input type="submit" value="送信"></p>
</form>

</body>

</html>

これだけでは意味がわからないかと思いますので、ひとつずつ解説していきます。

method/action

まずformタグ内についてる「method」と「action」についての解説ですが、これらは送信に関する情報の指定となります。
method属性では、送信先のサーバーサイドプログラムへのリクエストをGETリクエストにするか、POSTリクエストにするかを指定します。
action属性では、送信先となるURLを指定します。
フォーム内の情報をどこに送るのか、どのような形式で送信するのか、といった指定をすると思っていただいてかまいません。
HTMLを学習する段階では深く理解する必要はありませんので、PHPを学習する際にでも再度学習してけばかまいません。

label

「label」は項目名と部品を関連付けるためのタグです。上の例でいうと、性別内の「男」の文字をクリックすると、ラジオボタンが押された時と同じ動作をします。
labelをしっかりと設定しておくことで、ユーザビリティの向上につながります。

input type="○○"

「input type="○○"」とは、form内に部品を生成するためのタグです。ユーザーに入力や選択をしてもらいたい部分で使用します。
「input」で部品の生成エリアを確保、typeで生成する部品を指定します。
typeに指定する属性は主に以下のようなものがあります。

type="text"

1行のみのテキストエリアを生成します。

type="radio"

ラジオボタンを生成します。
ラジオボタンとは、選択肢のうち、1つだけしか選択できない形式のボタンです。

type="checkbox"

チェックボックスを生成します。
ラジオボタンとは逆に、選択肢のうち、複数選択可能な形式のボタンです。

type="number"

半角英数字のみ入力可能なエリアを生成します。

type="password"

パスワード入力エリアを生成します。このエリアでは入力した内容が「●●●●」のように表示されます。

type="email"

メールアドレス入力エリアを生成します。自動的に「@」が含まれているかを判定してくれ、正しい形式でなければエラーを返します。

type="submit"

サーバーにデータを送信するためのボタンです。
このボタンはフォーム内に最低1つ設ける必要があります。
最低1つと言いましたが、送信ボタンが複数あるとユーザーの混乱を招くため原則1つです。

他にも様々な属性が存在します。

select

selectタグはプルダウンメニューで選択肢を表示させるときに使用します。optionタグで選択肢を追加できます。

name

inputタグ内にあるnameとは、データを受信したサーバーサイドプログラムがそれぞれの項目を区別できるようにするためにつける名前のようなのものです。
例えばフォーム内に複数のボタンがあった場合、どのボタンが押されたのかを識別する必要がありますので、そういった時のためにname属性はほぼ必須です。
ちなみにラジオボタンでは同じnameが使われていますが、ラジオボタンやチェックボックスではnameを同じ値にし、グループ化してあげる必要があるからです。

value

value属性は、部品に初期値を設定するためのものです。送信ボタンなどにvalueを指定した場合、指定した文字がそのままボタンに表示されます。
ラジオボタンにもvalueが指定されていますが、複数の項目から1つを選ぶ際、それぞれにvalueで値を付与しておくことで、どの項目が選ばれたのかを識別するために役立っています。

最後に

HTMLでフォームを表示する際に、知っておくとよいことを紹介しました。
当然ですがこれだけではまだハリボテのフォームですが、初心者の方に動作も含めたフォームの構築は難易度が高いです。
まずはHTMLでフォームを表示し、CSSでレイアウトを調整していけるようになりましょう。