032.4 レッスン 1
Certificate: |
Web開発の要点 |
---|---|
Version: |
1.0 |
Topic: |
032 HTMLドキュメントマークアップ |
Objective: |
032.4 HTMLフォーム |
Lesson: |
1 of 1 |
はじめに
Webフォームは、HTMLページから訪問者の情報を要求するためのシンプルで効率的な方法を提供します。フロントエンドの開発者は、テキストフィールド、チェックボックス、ボタンなどの様々なコンポーネントを使用して、構造化された方法でサーバにデータを送信するインターフェースを構築することができます。
シンプルなHTMLフォーム
フォーム特有のマークアップコードの説明に入る前に、まず、ボディコンテンツのないシンプルな空のHTML文書から始めましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Working with HTML Forms</title>
</head>
<body>
<!-- The body content goes here -->
</body>
</html>
コードサンプルを、拡張子が .html
の生のテキストファイル( form.html
のように)として保存し、お好みのブラウザで開いてください。変更後、ブラウザのリロードボタンを押すと、変更内容が表示されます。
基本的なフォームの構造は、 <form>
タグ自体とその内部要素によって与えられます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Working with HTML Forms</title>
</head>
<body>
<!-- Form to collect personal information -->
<form>
<h2>Personal Information</h2>
<p>Full name:</p>
<p><input type="text" name="fullname" id="fullname"></p>
<p><input type="reset" value="Clear form"></p>
<p><input type="submit" value="Submit form"></p>
</form>
</body>
</html>
type
のような一語の属性では二重引用符は必要ありませんので、 type=text
は type="text"
と同様に動作します。開発者はどちらの規約を使用するかを選択することができます。
新しいコンテンツを保存し、ブラウザでページを再読み込みします。 Figure 1 のような結果が表示されるはずです。

<form>
タグは、それ自体ではページ上に何の目立った結果ももたらしません。 <form>…</form>
タグの中の要素は、訪問者に表示されるフィールドやその他の視覚的な補助を定義します。
サンプルコードには、一般的なHTMLタグ( <h2>
と <p>
)と、フォーム固有のタグである <input>
タグが含まれています。一般的なタグはドキュメントのどこにでも現れることができますが、フォーム固有のタグは <form>
要素の中でのみ、つまり、開始の <form>
と終了の </form>
タグの間でのみ使用する必要があります。
Note
|
HTMLには、フォームの標準的な外観を変更するための基本的なタグやプロパティしかありません。CSSは、フォームの外観を変更するための精巧なメカニズムを提供します。したがって、推奨されるのは、フォームの機能面のみを扱うHTMLコードを記述し、CSSで外観を変更することです。 |
例で示すように、パラグラフタグの <p>
を使って訪問者にフィールドを説明することができます。しかし、ブラウザが <p>
タグ内の説明を対応するinput要素と関連付けることができる明白な方法はありません。このような場合には、 <label>
タグがより適切です(以降、すべてのコードサンプルは、HTMLドキュメントのボディ内にあると考えてください)。
<form>
<h2>Personal Information</h2>
<label for="fullname">Full name:</label>
<p><input type="text" name="fullname" id="fullname"></p>
<p><input type="reset" value="Clear form"></p>
<p><input type="submit" value="Submit form"></p>
</form>
<label>
タグの for
属性には、対応するinput 要素の id
属性が含まれています。これにより、input要素にフォーカスが当たっているときに、スクリーンリーダーがlabel要素の内容を話すことができるようになり、ページのアクセス性が向上します。さらに、訪問者はラベルをクリックして、対応する入力フィールドにフォーカスを置くことができます。
id
属性は、ドキュメント内の他の要素と同様に、 '<form>' 要素に対しても機能します。これは、ドキュメント全体の中でユニークな要素の識別子を提供します。 name
属性は同様の目的を持っていますが、フォームのコンテキストの中でinput要素を識別するために使用されます。ブラウザは、フォームデータをサーバに送信する際に name
属性を使用して入力フィールドを識別するので、フォーム内では意味のあるユニークな name
属性を使用することが重要です。
type
属性はinput要素の主要な属性であり、要素が受け付けるデータタイプと訪問者への視覚的な表示を制御するからです。 type
属性が指定されていない場合、デフォルトでは '<input>' タグはテキストボックスを表示します。モダンブラウザでサポートされている入力タイプは以下の通りです。
の値 type |
データ型 | 表示方法 |
---|---|---|
|
任意の文字列 |
N/A |
|
改行のないテキスト |
テキストコントロール |
|
改行のないテキスト |
検索コントロール |
|
改行のないテキスト |
テキストコントロール |
|
絶対URL |
テキストコントロール |
|
メールアドレスまたはメールアドレスのリスト |
テキストコントロール |
|
改行のないテキスト(機密情報) |
データ入力を隠すテキストコントロール |
|
タイムゾーンのない日付(年、月、日) |
日付コントロール |
|
タイムゾーンのない年と月で構成される日付 |
月コントロール |
|
週年番号と週番号で構成されるタイムゾーンのない日付 |
週のコントロール |
|
タイムゾーンのない時間(時、分、秒、小数点以下の秒数) |
時間コントロール |
|
タイムゾーンのない日付と時刻(年、月、日、時、分、秒、小数点以下の秒数) |
日付と時刻のコントロール |
|
数値 |
テキストコントロールまたはスピナーコントロール |
|
正確な値は重要ではないという追加のセマンティクスを持つ数値 |
スライダーコントロールなど |
|
8ビットの赤、緑、青のコンポーネントを備えたsRGBカラー |
カラーピッカー |
|
事前定義されたリストからの0個以上の値のセット |
チェックボックス(選択肢を提供し、複数の選択肢を選択できるようにします) |
|
列挙値 |
ラジオボタン(選択肢を提供し、1つの選択肢のみを選択できます) |
|
それぞれMIMEタイプとオプションのファイル名を持つ0個以上のファイル |
ラベルとボタン |
|
入力プロセスを終了し、フォームを送信する列挙値 |
ボタン |
|
特定の画像のサイズに関連する座標。これにより、入力プロセスが終了し、フォームが送信されます。 |
クリック可能な画像またはボタンのいずれか |
|
N/A |
一般的なボタン |
|
N/A |
他のすべてのフィールドを初期値にリセットする機能を持つボタン |
password
、 search
、 tel
、 url
、 email
の各入力タイプの外観は、標準の text
タイプと変わりません。これらの入力タイプの目的は、その入力フィールドに意図されたコンテンツについてのヒントをブラウザに提供することであり、ブラウザやクライアント側で実行されるスクリプトは、特定の入力タイプに対してカスタムアクションを取ることができます。例えば、テキスト入力タイプとパスワードフィールドタイプの唯一の違いは、訪問者が入力する際にパスワードフィールドの内容が表示されないことです。タッチスクリーンデバイスでは、テキストがスクリーンキーボードで入力されるので、 tel
タイプの入力がフォーカスされると、ブラウザは数字キーボードだけをポップアップすることができます。もう一つの可能なアクションは、 email
タイプの入力にフォーカスが当たったときに、既知のメールアドレスのリストを提案することです。
number
タイプは、シンプルなテキスト入力として表示されますが、横に増減の矢印が付いています。このタイプを使用すると、タッチスクリーンデバイスでフォーカスが当たったときに、数値キーボードが表示されます。
その他のinput要素は、それぞれ独自の外観と動作を持っています。例えば、 date
タイプは、ローカルの日付フォーマットの設定に従ってレンダリングされ、フィールドにフォーカスが当たるとカレンダーが表示されます。
<form>
<p>
<label for="date">Date:</label>
<input type="date" name="date" id="date">
</p>
</form>
Figure 2 は、現在のデスクトップ版Firefoxがこのフィールドをどのように表示しているかを示しています。

Note
|
これらの要素は、ブラウザやOSによって表示が多少異なることがありますが、その機能や使い方は常に同じです。 |
これは、すべてのモダンブラウザの標準機能であり、余分なオプションやプログラミングを必要としません。
入力タイプにかかわらず、入力フィールドの内容はその value と呼ばれます。すべてのフィールドの値はデフォルトでは空ですが、 value
属性を使ってフィールドのデフォルト値を設定することができます。日付型の値は YYYY-MM-DD の形式を使わなければなりません。次の日付フィールドのデフォルト値は、2020年8月6日です。
<form>
<p>
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="2020-08-06">
</p>
</form>
特定の入力タイプは、訪問者がフィールドに入力する際の手助けとなりますが、訪問者が制限を回避して任意のフィールドに任意の値を入力することを防ぐことはできません。そのため、フィールドの値がサーバに到着したときに検証されることが重要です。
訪問者が値を入力しなければならない<form>要素には、入力を助ける特別な属性がある場合があります。 placeholder
属性は、input要素の中に例となる値を挿入します。
<p>Address: <input type="text" name="address" id="address" placeholder="e.g. 41 John St., Upper Suite 1"></p>
Figure 3 のように、input要素の中にプレースホルダーが表示されます。

訪問者がフィールドへの入力を開始すると、プレースホルダーテキストは消えます。訪問者がフィールドを空にした場合、プレースホルダーテキストはフィールド値として送信されません。
required
属性は、訪問者がフォームを送信する前に、対応するフィールドに値を入力することを要求します。
<p>Address: <input type="text" name="address" id="address" required placeholder="e.g. 41 John St., Upper Suite 1"></p>
required
属性はブーリアン属性なので、単独で(等号を付けずに)配置することができます。必須のフィールドをマークすることは重要です。そうしないと、訪問者はどのフィールドが欠けていてフォームの送信を妨げているのかわからなくなってしまいます。
autocomplete
属性は、input要素の値をブラウザが自動的に補完するかどうかを示します。 autocomplete="off"
に設定すると、ブラウザは入力を埋めるために過去の値を提案しません。クレジットカード番号のような機密情報を扱うinput要素は、 autocomplete
属性を off
に設定すべきです。
大きなテキストの入力:textarea
1行のテキストしか挿入できないテキストフィールドとは異なり、 textarea
要素は訪問者が複数の行のテキストを入力できるようにします。textareaは別の要素ですが、input要素をベースにしているわけではありません。
<p> <label for="comment">Type your comment here:</label> <br>
<textarea id="comment" name="comment" rows="10" cols="50">
My multi-line, plain-text comment.
</textarea>
</p>
textarea要素の典型的な外観は Figure 4 です。

textarea
要素input要素とのもう一つの違いは、 textarea
要素は閉じタグ( </textarea>
)を持っているので、その内容(つまり値)はそれらの間に入ります。 rows
と cols
属性は、テキストの量を制限するものではなく、レイアウトを定義するためにのみ使用されます。textareaには右下にハンドルがあり、訪問者がサイズを変更できるようになっています。
オプションのリスト
フォームコントロールには、 <select>
要素、 radio
や checkbox
といったinput要素のtype属性など、訪問者に選択肢のリストを提示するために使用できるものがあります。
<select>
要素は、定義済みのエントリのリストを持つドロップダウンコントロールです。
<p><label for="browser">Favorite Browser:</label>
<select name="browser" id="browser">
<option value="firefox">Mozilla Firefox</option>
<option value="chrome">Google Chrome</option>
<option value="opera">Opera</option>
<option value="edge">Microsoft Edge</option>
</select>
</p>
<option>
タグは、対応する <select>
コントロールの1つのエントリーを表します。 Figure 5 に示すように、ビジターがコントロールをタップまたはクリックすると、リスト全体が表示されます。

select
要素デフォルトでは、リストの最初のエントリが選択されます。この動作を変更するには、別のエントリーに selected
属性を追加して、ページが読み込まれたときに選択されるようにします。
radio
の入力タイプは、 <select>
コントロールに似ていますが、ドロップダウンリストの代わりに、すべてのエントリーを表示して、訪問者がそのうちの一つをマークできるようにします。以下のコードの結果を Figure 6 に示します。
<p>Favorite Browser:</p>
<p>
<input type="radio" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="radio" id="browser-chrome" name="browser" value="chrome">
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="radio" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="radio" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>

radio
タイプ属性同じグループ内のすべての radio
入力タイプは、同じ name
属性を持っていることに注意してください。それぞれの属性は排他的なので、選択されたエントリに対応する value
属性は、共有された name
属性に関連付けられたものになります。 checked
属性は、 <select>
コントロールの selected
属性のように動作します。ページが最初にロードされたときに、対応するエントリがマークされます。 <label>
タグは、特にラジオエントリに便利です。訪問者がコントロール自体に加えて、対応するテキストをクリックまたはタップすることによって、エントリをチェックすることができるからです。
radio
コントロールがリストの1つのエントリのみを選択することを目的としているのに対して、 checkbox
入力タイプはビジターが複数のエントリをチェックすることを可能にします。
<p>Favorite Browser:</p>
<p>
<input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="checkbox" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="checkbox" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
チェックボックスも checked
属性を使って、エントリーをデフォルトで選択状態にすることができます。チェックボックスは、 Figure 7 に示すように、ラジオ入力の丸いコントロールの代わりに、四角いコントロールとしてレンダリングされます。

checkbox
タイプ属性複数のエントリが選択された場合、ブラウザはそれらを同じ名前で送信するため、バックエンドの開発者は、チェックボックスを含むフォームデータを適切に読み取るための特定のコードを記述する必要があります。
ユーザビリティを向上させるために、入力フィールドを <fieldset>
タグでまとめておくことができます。
<fieldset>
<legend>Favorite Browser</legend>
<p>
<input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="checkbox" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="checkbox" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
</fieldset>
<legend>
タグは、 <fieldset>
タグがコントロールの周りに描くフレームの上部に配置されるテキストを含みます( Figure 8 )。

fieldset
タグで要素をグループ化します。<fieldset>
タグは、フィールドの値がサーバに送信される方法を変更するものではありませんが、フロントエンドの開発者がネストされたコントロールをより簡単に制御できるようにします。例えば、 <fieldset>
属性に disabled
属性を設定すると、その内側のすべての要素を訪問者が利用できないようにします。
hidden
タイプ属性
開発者は、訪問者が操作できない情報をフォームに含めたい場合があります。つまり、訪問者が値を入力したり変更したりできるフォームフィールドを提示することなく、開発者が選択した値を送信したい場合です。例えば、開発者は、訪問者に見られる必要のない、特定のフォームのための識別トークンを入れたいと思うかもしれません。隠しhiddenタイプ属性は、以下の例のようにコード化されます。
<input type="hidden" id="form-token" name="form-token" value="e730a375-b953-4393-847d-2dab065bbc92">
隠し入力フィールドの値は、通常、サーバ側でドキュメントをレンダリングする際にドキュメントに追加されます。隠し入力は、ブラウザがサーバに送信する際には通常のフィールドと同様に扱われ、サーバも通常の入力フィールドとして読み込みます。
ファイル入力タイプ
HTMLフォームでは、入力またはリストから選択されたテキストデータに加えて、任意のファイルをサーバに送信することもできます。 file
という入力タイプでは、訪問者がローカルのファイルシステムからファイルを選び、それをWebページから直接送信することができます。
<p>
<label for="attachment">Attachment:</label><br>
<input type="file" id="attachment" name="attachment">
</p>
file
の入力タイプでは、値を入力したり選択したりするフォームフィールドの代わりに、ファイルダイアログを開くための ファイルを選択
ボタンが表示されます。 file
入力タイプではあらゆるファイルタイプを受け付けることができますが、バックエンドの開発者はおそらく許可されるファイルタイプとその最大サイズを制限するでしょう。ファイルタイプの検証はフロントエンドでも accept
属性を追加することで行うことができます。例えば、JPEGとPNGの画像のみを受け付ける場合には、 accept
属性を accept="image/jpeg, image/png"
とします。
アクションボタン
デフォルトでは、訪問者が任意の入力フィールドでEnterキーを押すと、フォームが送信されます。より直感的に操作できるように、 submit
という入力タイプで送信ボタンを追加する必要があります。
<input type="submit" value="Submit form">
Figure 9 のように、 value
属性のテキストがボタンに表示されます。

また、複雑なフォームに入れると便利なのが reset
ボタンで、フォームをクリアして元の状態に戻します。
<input type="reset" value="Clear form">
サブミットボタンのように、 value
属性のテキストがボタンのラベルとして使われます。また、フォームやページ内の任意の場所にボタンを追加するには、 <button>
タグを使用します。 <input>
タグで作られたボタンとは異なり、buttonタグには閉じタグがあり、ボタンのラベルはその内側のコンテンツとなります。
<button>Submit form</button>
フォームの中にあるとき、 button
要素のデフォルトのアクションは、フォームを送信することです。入力ボタンと同様に、ボタンのtype属性を reset
に切り替えることができます。
フォームのアクションとメソッド
HTMLフォームを作成する最後のステップは、データをどこにどのように送信するかを定義することです。これらの点は、クライアントとサーバの両方の詳細に依存します。
サーバサイドでは、アプリケーションの目的に応じて、フォームデータを解析、検証、処理するスクリプトファイルを用意するのが最も一般的なアプローチです。例えば、バックエンドの開発者は、フォームから送られてきたデータを受け取るために、 receive_form.php
というスクリプトを書くことができます。クライアント側では、このスクリプトはformタグの action
属性で示されます。
<form action="receive_form.php">
action
属性は、すべてのHTTPアドレスと同じ慣例に従います。スクリプトがフォームを含むページと同じ階層にある場合は、パスなしで記述することができます。それ以外の場合は、絶対パスまたは相対パスを指定する必要があります。また、このスクリプトは、訪問者がフォームを送信した後にブラウザによって読み込まれるランディングページとしての役割を果たすためのレスポンスを生成する必要があります。
HTTPには、サーバとの接続を通じてフォームデータを送信するための個別のメソッドが用意されています。最も一般的なメソッドは get
と post
で、これらは form
タグの method
属性で指定します。
<form action="receive_form.php" method="get">
または、
<form action="receive_form.php" method="post">
get
メソッドでは、フォームのデータはリクエストURLに直接エンコードされます。訪問者がフォームを送信すると、ブラウザは action
属性で定義されたURLを、フォームフィールドが付加された状態で読み込みます。
シンプルなコンタクトフォームのように少量のデータを扱う場合は、 get
メソッドを使うとよいでしょう。しかし、URLは数千文字を超えることはできないので、フォームに画像のような大きなフィールドやテキスト以外のフィールドが含まれる場合は、 post
メソッドを使うべきです。
post
メソッドは、ブラウザがHTTPリクエストのボディセクションにフォームデータを記述して送信するようにします。URLのサイズ制限を超えるようなバイナリデータの場合には必要ですが、よりシンプルなテキストフォームで使用する場合には、 post
メソッドは接続に不要なオーバーヘッドを追加するので、そのような場合には get
メソッドを使用することをお勧めします。
選択されたメソッドは訪問者がフォームをどのように操作するかには影響しません。 get
と post
のメソッドは、フォームを受け取ったサーバサイドのスクリプトによって異なる処理が行われます。
post
メソッドを使うときには、 enctype
フォーム属性を使って、フォームのコンテンツのMIMEタイプを変更することもできます。これは、サーバとのHTTP通信において、フォームのフィールドと値がどのようにスタックされるかに影響します。 enctype
のデフォルト値は application/x-www-form-urlencoded
で、これは get
メソッドで使われるフォーマットに似ています。フォームが file
タイプの入力フィールドを含む場合は、代わりにenctype multipart/form-data
を使用してください。
演習
-
<label>
タグと<input>
タグを関連付けるには、どのような方法がありますか? -
数値を入力するスライダーコントロールを提供するinput要素タイプは何でしょうか?
-
placeholder
属性の目的は何ですか? -
select要素の2つ目のoption要素がデフォルトで選択されていることを指定する属性は何でしょうか?
発展演習
-
ファイルの入力を変更して、PDFファイルだけを受け付けるようにするにはどうすればいいですか?
-
フォームのどのフィールドが必須であるかを訪問者にどのように知らせることができますか?
-
このレッスンの3つのコードスニペットを1つのフォームにまとめてください。複数のフォームコントロールで同じ
name
属性やid
属性を使わないように注意してください。
まとめ
このレッスンでは、サーバにデータを送り返すための簡単なHTMLフォームの作成方法を説明します。クライアント側では、HTMLフォームは標準的なHTML要素で構成されており、それらを組み合わせてカスタムインターフェースを構築します。また、フォームはサーバと適切に通信するように設定する必要があります。このレッスンでは、次のようなコンセプトと手順を説明しました。
-
<form>
タグと基本的なフォーム構造 -
基本的な入力要素と特殊な入力要素
-
<label>
、<fieldset>
、<legend>
のような特別なタグの役割 -
フォームのボタンとアクション
演習の回答
-
<label>
タグと<input>
タグを関連付けるには、どのような方法がありますか?<label>
タグのfor
属性には、対応する<input>
タグのid属性を指定します。 -
数値を入力するスライダーコントロールを提供するinput要素タイプは何でしょうか?
range
タイプです。 -
placeholder
属性の目的は何ですか?placeholder
属性には、対応する入力フィールドが空のときに表示される訪問者の入力例が含まれています。 -
select要素の2つ目のoption要素がデフォルトで選択されていることを指定する属性は何でしょうか?
2つ目の
option
要素にはselected
属性が必要です。
発展演習の回答
-
ファイルの入力を変更して、PDFファイルだけを受け付けるようにするにはどうすればいいですか?
input 要素の
accept
属性にはapplication/pdf
を設定してください。 -
フォームのどのフィールドが必須であるかを訪問者にどのように知らせることができますか?
通常、必須項目にはアスタリスク(
*
)を付け、“*でマークされたフィールドは必須です” というような簡単な注意書きをフォームのそばに置きます。 -
このレッスンの3つのコードスニペットを1つのフォームにまとめてください。複数のフォームコントロールで同じ
name
属性やid
属性を使わないように注意してください。<form action="receive_form.php" method="get"> <h2>Personal Information</h2> <label for="fullname">Full name:</label> <p><input type="text" name="fullname" id="fullname"></p> <p> <label for="date">Date:</label> <input type="date" name="date" id="date"> </p> <p>Favorite Browser:</p> <p> <input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked> <label for="browser-firefox">Mozilla Firefox</label> </p> <p> <input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked> <label for="browser-chrome">Google Chrome</label> </p> <p> <input type="checkbox" id="browser-opera" name="browser" value="opera"> <label for="browser-opera">Opera</label> </p> <p> <input type="checkbox" id="browser-edge" name="browser" value="edge"> <label for="browser-edge">Microsoft Edge</label> </p> <p><input type="reset" value="Clear form"></p> <p><input type="submit" value="Submit form"></p> </form>