032.4 HTMLフォーム | えるすた

032.4 HTMLフォーム

Web Development Essentials | 2024/02/29

多くのWebサイトには、ユーザーとサイト管理者がコンタクトを取るための「お問い合わせページ」が用意されています。HTMLでは、Webブラウザに表示させるだけでなく、WebブラウザからWebサーバへ入力した内容を送信することができます。本章では、HTMLフォームで送信するために必要なタグやフォームの記述方法について、詳しく説明していきます。

HTMLフォームの作成　

入力した内容を Webサーバに送信するには HTMLフォームを作成します。フォームを作成する場合は<form>タグを使用します。本項目では、<form>タグで使用するタグや属性について説明します。

<form>

ブロック要素
終了タグ：</form>
概要：HTMLフォームを作成する際に使用するタグです。<form>タグで囲まれた要素内に、データとして送信したい内容（名前やメールアドレス等の入力欄）を追加し、Webサーバへ送信します。<form>タグについて詳しく理解するために、HTMLドキュメント（※HTML文書）を使って具体的に説明を行います。以下のような「form.html」を作成し、ご自身でソースコードを記述してみましょう。

■form.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <form action="confirm.php" method="post" enctype="multipart/form-data">
            <label for="fullname">氏名：</label>
            <input id="fullname" type="text" name="name" value="" placeholder="山田　太郎">
            <br>    <!-- <br>は改行タグで、試験範囲には含まれません -->
            <label for="file">ファイル：</label>
            <input id="file" type="file" name="file" value="">
            <br>
            <button type="submit">送信</button>
        </form>
    </body>
</html>

「form.html」は<form>タグの子要素でよく使用する部品（タグ）を記述しています。<form>タグには設定できる属性はいくつかありますが、本項目では「action」属性、「method」属性、「enctype」属性について詳しく説明します。

action=””

概要：<form>タグに入力したデータの送信先を指定する属性で、外部のサーバに対してデータを送信する場合はURLを指定し、内部のサーバを使用する場合はデータを受け取るファイルを指定します。指定しない場合は現在のファイルが送信先となります。「form.html」では送信先としてPHPのプログラミング言語で書かれた「confirm.php」を指定しています。HTMLはマークアップ言語のため、受信したデータを表示したり、データベースに保存することが出来ません。そのため送信先でデータの保存等を行いたい場合はHTMLファイルではなく、PHP等のプログラミング言語を用いたファイルを指定する必要があります。（※本項目では「confirm.php」は作成しない為、「送信」ボタンを押しても正しく動作しないのでご注意ください。）

method=””

概要：データの送信方式を指定する属性です。指定方法は「GETメソッド」もしくは「POSTメソッド」があり、method属性の記述がない場合は「GETメソッド」が指定されます。（※GETメソッドとPOSTメソッドについてはこちらの記事で詳しく説明しています。）

enctype=””

概要：送信時のデータの形式を指定します。enctype属性の記述が無い場合は初期値として「application/x-www-form-urlencoded」が指定されます。

application/x-www-form-urlencoded：
データをURL形式にエンコード(変換)して送る形式となります。

multipart/form-data：
送信する内容が名前やemail等の「文字」データだけでなく、画像や音声ファイルなどの様々な形式のデータを含む場合、属性値に「multipart/form-data」を指定します。

formタグ内で使用する部品（タグ）について

続いて、<form>タグ内で使用する様々な部品（タグ）について説明します。

<label>

インライン要素
終了タグ：</label>
概要：任意の要素に対し、関連付けを行うことが出来ます。<label>タグ内の文言をクリックすると、関連付けた部品（タグ）の項目を選択することが出来ます。関連付けを行う方法は2種類あり、<label>タグに「for」属性、関連付けるタグに「id」属性を記述し、値を一致させる方法と、<label>タグ内部に関連付けるタグを配置する方法です。但し後者はIE6以前のブラウザでは対応していないため、一般的には前者を使用します。下記、記述例①では、「氏名：」というテキストと <input>タグで作成された入力フォームが「fullname」という値によって関連付けられているため、「氏名：」をクリックしてもカーソルが入力フォームにセットされ入力できる様になります。

■記述例①

<label for="fullname">氏名：</label>
<input id="fullname" type="text" name="name" value="" placeholder="山田　太郎">

■記述例②

<label>氏名：
    <input type="text" name="name" value="" placeholder="山田　太郎">
</label>

<input>

インライン要素
終了タグ：無し
概要：テキスト入力欄やボタン等の部品（タグ）を表す要素です。<input>タグは「name」属性、「value」属性、「type」属性を使用してHTMLフォームのデータを送信します。

name=””

概要：<input>タグ等の要素に名前を付けるために使用する属性です。「form.html」の場合、10行目の要素である<input>タグに「name」という名前を付けて、データを送信します。

value=””

概要：<input>タグ等のテキスト入力欄に初期値を設定する場合や、データの送信先に値を受け渡す場合等に使用する属性です。

placeholder=””

概要：placeholder属性で値を指定する事で入力見本を表示する事が出来ます。ユーザーが入力を開始すると、入力見本は表示されなくなります。

type=””

概要：<input>タグの型を指定する属性です。型には様々な種類があり、テキスト入力欄やボタン等、送りたいデータに応じて属性値を指定します。

その他タグ

<input>タグ以外にも、<form>タグ内で使用できる部品（タグ）がいくつかあるので紹介します。

<textarea>

インライン要素
終了タグ：</textarea>
概要：<input>タグと異なり、複数行入力することが可能です。

■記述例

<textarea name="sample"></textarea>

<select>

インライン要素
終了タグ：</select>
概要：選択式（プルダウン）のメニューを作成することが出来る要素です。メニューの選択肢は<option>タグを使用します。<option>タグで囲った文言がプルダウンの選択肢として表示され、<input>タグと同様にデータを送信するには「value」属性を使用します。

■記述例

<select name="sample">
    <option value="sample1">サンプル1</option>
    <option value="sample2">サンプル2</option>
    <option value="sample3">サンプル3</option>
</select>