032.4 レッスン 1

フォーム特有のマークアップコードの説明に入る前に、まず、ボディコンテンツのないシンプルな空のHTML文書から始めましょう。

コードサンプルを、拡張子が .html の生のテキストファイル（ form.html のように）として保存し、お好みのブラウザで開いてください。変更後、ブラウザのリロードボタンを押すと、変更内容が表示されます。

基本的なフォームの構造は、 <form> タグ自体とその内部要素によって与えられます。

type のような一語の属性では二重引用符は必要ありませんので、 type=text は type="text" と同様に動作します。開発者はどちらの規約を使用するかを選択することができます。

新しいコンテンツを保存し、ブラウザでページを再読み込みします。 Figure 1 のような結果が表示されるはずです。

<form> タグは、それ自体ではページ上に何の目立った結果ももたらしません。 <form>…​</form> タグの中の要素は、訪問者に表示されるフィールドやその他の視覚的な補助を定義します。

サンプルコードには、一般的なHTMLタグ（ <h2> と <p> ）と、フォーム固有のタグである <input> タグが含まれています。一般的なタグはドキュメントのどこにでも現れることができますが、フォーム固有のタグは <form> 要素の中でのみ、つまり、開始の <form> と終了の </form> タグの間でのみ使用する必要があります。

例で示すように、パラグラフタグの <p> を使って訪問者にフィールドを説明することができます。しかし、ブラウザが <p> タグ内の説明を対応するinput要素と関連付けることができる明白な方法はありません。このような場合には、 <label> タグがより適切です（以降、すべてのコードサンプルは、HTMLドキュメントのボディ内にあると考えてください）。

<label> タグの for 属性には、対応するinput 要素の id 属性が含まれています。これにより、input要素にフォーカスが当たっているときに、スクリーンリーダーがlabel要素の内容を話すことができるようになり、ページのアクセス性が向上します。さらに、訪問者はラベルをクリックして、対応する入力フィールドにフォーカスを置くことができます。

id 属性は、ドキュメント内の他の要素と同様に、 '<form>' 要素に対しても機能します。これは、ドキュメント全体の中でユニークな要素の識別子を提供します。 name 属性は同様の目的を持っていますが、フォームのコンテキストの中でinput要素を識別するために使用されます。ブラウザは、フォームデータをサーバに送信する際に name 属性を使用して入力フィールドを識別するので、フォーム内では意味のあるユニークな name 属性を使用することが重要です。

type 属性はinput要素の主要な属性であり、要素が受け付けるデータタイプと訪問者への視覚的な表示を制御するからです。 type 属性が指定されていない場合、デフォルトでは '<input>' タグはテキストボックスを表示します。モダンブラウザでサポートされている入力タイプは以下の通りです。

password 、 search 、 tel 、 url 、 email の各入力タイプの外観は、標準の text タイプと変わりません。これらの入力タイプの目的は、その入力フィールドに意図されたコンテンツについてのヒントをブラウザに提供することであり、ブラウザやクライアント側で実行されるスクリプトは、特定の入力タイプに対してカスタムアクションを取ることができます。例えば、テキスト入力タイプとパスワードフィールドタイプの唯一の違いは、訪問者が入力する際にパスワードフィールドの内容が表示されないことです。タッチスクリーンデバイスでは、テキストがスクリーンキーボードで入力されるので、 tel タイプの入力がフォーカスされると、ブラウザは数字キーボードだけをポップアップすることができます。もう一つの可能なアクションは、 email タイプの入力にフォーカスが当たったときに、既知のメールアドレスのリストを提案することです。

number タイプは、シンプルなテキスト入力として表示されますが、横に増減の矢印が付いています。このタイプを使用すると、タッチスクリーンデバイスでフォーカスが当たったときに、数値キーボードが表示されます。

その他のinput要素は、それぞれ独自の外観と動作を持っています。例えば、 date タイプは、ローカルの日付フォーマットの設定に従ってレンダリングされ、フィールドにフォーカスが当たるとカレンダーが表示されます。

Figure 2 は、現在のデスクトップ版Firefoxがこのフィールドをどのように表示しているかを示しています。

これは、すべてのモダンブラウザの標準機能であり、余分なオプションやプログラミングを必要としません。

入力タイプにかかわらず、入力フィールドの内容はその value と呼ばれます。すべてのフィールドの値はデフォルトでは空ですが、 value 属性を使ってフィールドのデフォルト値を設定することができます。日付型の値は YYYY-MM-DD の形式を使わなければなりません。次の日付フィールドのデフォルト値は、2020年8月6日です。

特定の入力タイプは、訪問者がフィールドに入力する際の手助けとなりますが、訪問者が制限を回避して任意のフィールドに任意の値を入力することを防ぐことはできません。そのため、フィールドの値がサーバに到着したときに検証されることが重要です。

訪問者が値を入力しなければならない<form>要素には、入力を助ける特別な属性がある場合があります。 placeholder 属性は、input要素の中に例となる値を挿入します。

Figure 3 のように、input要素の中にプレースホルダーが表示されます。

訪問者がフィールドへの入力を開始すると、プレースホルダーテキストは消えます。訪問者がフィールドを空にした場合、プレースホルダーテキストはフィールド値として送信されません。

required 属性は、訪問者がフォームを送信する前に、対応するフィールドに値を入力することを要求します。

required 属性はブーリアン属性なので、単独で（等号を付けずに）配置することができます。必須のフィールドをマークすることは重要です。そうしないと、訪問者はどのフィールドが欠けていてフォームの送信を妨げているのかわからなくなってしまいます。

autocomplete 属性は、input要素の値をブラウザが自動的に補完するかどうかを示します。 autocomplete="off" に設定すると、ブラウザは入力を埋めるために過去の値を提案しません。クレジットカード番号のような機密情報を扱うinput要素は、 autocomplete 属性を off に設定すべきです。

1行のテキストしか挿入できないテキストフィールドとは異なり、 textarea 要素は訪問者が複数の行のテキストを入力できるようにします。textareaは別の要素ですが、input要素をベースにしているわけではありません。

textarea要素の典型的な外観は Figure 4 です。

input要素とのもう一つの違いは、 textarea 要素は閉じタグ（ </textarea> ）を持っているので、その内容（つまり値）はそれらの間に入ります。 rows と cols 属性は、テキストの量を制限するものではなく、レイアウトを定義するためにのみ使用されます。textareaには右下にハンドルがあり、訪問者がサイズを変更できるようになっています。

フォームコントロールには、 <select> 要素、 radio や checkbox といったinput要素のtype属性など、訪問者に選択肢のリストを提示するために使用できるものがあります。

<select> 要素は、定義済みのエントリのリストを持つドロップダウンコントロールです。

<option> タグは、対応する <select> コントロールの1つのエントリーを表します。 Figure 5 に示すように、ビジターがコントロールをタップまたはクリックすると、リスト全体が表示されます。

デフォルトでは、リストの最初のエントリが選択されます。この動作を変更するには、別のエントリーに selected 属性を追加して、ページが読み込まれたときに選択されるようにします。

radio の入力タイプは、 <select> コントロールに似ていますが、ドロップダウンリストの代わりに、すべてのエントリーを表示して、訪問者がそのうちの一つをマークできるようにします。以下のコードの結果を Figure 6 に示します。

同じグループ内のすべての radio 入力タイプは、同じ name 属性を持っていることに注意してください。それぞれの属性は排他的なので、選択されたエントリに対応する value 属性は、共有された name 属性に関連付けられたものになります。 checked 属性は、 <select> コントロールの selected 属性のように動作します。ページが最初にロードされたときに、対応するエントリがマークされます。 <label> タグは、特にラジオエントリに便利です。訪問者がコントロール自体に加えて、対応するテキストをクリックまたはタップすることによって、エントリをチェックすることができるからです。

radio コントロールがリストの1つのエントリのみを選択することを目的としているのに対して、 checkbox 入力タイプはビジターが複数のエントリをチェックすることを可能にします。

チェックボックスも checked 属性を使って、エントリーをデフォルトで選択状態にすることができます。チェックボックスは、 Figure 7 に示すように、ラジオ入力の丸いコントロールの代わりに、四角いコントロールとしてレンダリングされます。

複数のエントリが選択された場合、ブラウザはそれらを同じ名前で送信するため、バックエンドの開発者は、チェックボックスを含むフォームデータを適切に読み取るための特定のコードを記述する必要があります。

ユーザビリティを向上させるために、入力フィールドを <fieldset> タグでまとめておくことができます。

<legend> タグは、 <fieldset> タグがコントロールの周りに描くフレームの上部に配置されるテキストを含みます（ Figure 8 ）。

<fieldset> タグは、フィールドの値がサーバに送信される方法を変更するものではありませんが、フロントエンドの開発者がネストされたコントロールをより簡単に制御できるようにします。例えば、 <fieldset> 属性に disabled 属性を設定すると、その内側のすべての要素を訪問者が利用できないようにします。

開発者は、訪問者が操作できない情報をフォームに含めたい場合があります。つまり、訪問者が値を入力したり変更したりできるフォームフィールドを提示することなく、開発者が選択した値を送信したい場合です。例えば、開発者は、訪問者に見られる必要のない、特定のフォームのための識別トークンを入れたいと思うかもしれません。隠しhiddenタイプ属性は、以下の例のようにコード化されます。

隠し入力フィールドの値は、通常、サーバ側でドキュメントをレンダリングする際にドキュメントに追加されます。隠し入力は、ブラウザがサーバに送信する際には通常のフィールドと同様に扱われ、サーバも通常の入力フィールドとして読み込みます。

HTMLフォームでは、入力またはリストから選択されたテキストデータに加えて、任意のファイルをサーバに送信することもできます。 file という入力タイプでは、訪問者がローカルのファイルシステムからファイルを選び、それをWebページから直接送信することができます。

file の入力タイプでは、値を入力したり選択したりするフォームフィールドの代わりに、ファイルダイアログを開くための ファイルを選択 ボタンが表示されます。 file 入力タイプではあらゆるファイルタイプを受け付けることができますが、バックエンドの開発者はおそらく許可されるファイルタイプとその最大サイズを制限するでしょう。ファイルタイプの検証はフロントエンドでも accept 属性を追加することで行うことができます。例えば、JPEGとPNGの画像のみを受け付ける場合には、 accept 属性を accept="image/jpeg, image/png" とします。

デフォルトでは、訪問者が任意の入力フィールドでEnterキーを押すと、フォームが送信されます。より直感的に操作できるように、 submit という入力タイプで送信ボタンを追加する必要があります。

Figure 9 のように、 value 属性のテキストがボタンに表示されます。

また、複雑なフォームに入れると便利なのが reset ボタンで、フォームをクリアして元の状態に戻します。

サブミットボタンのように、 value 属性のテキストがボタンのラベルとして使われます。また、フォームやページ内の任意の場所にボタンを追加するには、 <button> タグを使用します。 <input> タグで作られたボタンとは異なり、buttonタグには閉じタグがあり、ボタンのラベルはその内側のコンテンツとなります。

フォームの中にあるとき、 button 要素のデフォルトのアクションは、フォームを送信することです。入力ボタンと同様に、ボタンのtype属性を reset に切り替えることができます。

HTMLフォームを作成する最後のステップは、データをどこにどのように送信するかを定義することです。これらの点は、クライアントとサーバの両方の詳細に依存します。

サーバサイドでは、アプリケーションの目的に応じて、フォームデータを解析、検証、処理するスクリプトファイルを用意するのが最も一般的なアプローチです。例えば、バックエンドの開発者は、フォームから送られてきたデータを受け取るために、 receive_form.php というスクリプトを書くことができます。クライアント側では、このスクリプトはformタグの action 属性で示されます。

action 属性は、すべてのHTTPアドレスと同じ慣例に従います。スクリプトがフォームを含むページと同じ階層にある場合は、パスなしで記述することができます。それ以外の場合は、絶対パスまたは相対パスを指定する必要があります。また、このスクリプトは、訪問者がフォームを送信した後にブラウザによって読み込まれるランディングページとしての役割を果たすためのレスポンスを生成する必要があります。

HTTPには、サーバとの接続を通じてフォームデータを送信するための個別のメソッドが用意されています。最も一般的なメソッドは get と post で、これらは form タグの method 属性で指定します。

または、

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 を使用してください。