フォームへのデータ入力をサポートする

フォームをインタラクティブにするには、フォーム要素を追加する必要があります。データの入力と選択を行うコントロール、コントロールを記述する要素、フィールドをグループ化する要素、フォームを送信するボタンがあります。

フォーム要素とは

2 つの <input> 要素（<input type="text"> と <input type="file">）が表示されます。表示が異なるのはなぜですか？

ブラウザは、要素名と type 属性に基づいて、異なるユーザー インターフェースを表示し、異なる検証ルールを使用し、その他の多くの機能を提供します。適切なフォーム コントロールを使用すると、より優れたフォームを作成できます。

フォーム要素のラベル

ユーザーが好きな色を入力できる入力を追加するとします。そのためには、フォームに <input> 要素を追加する必要があります。しかし、ユーザーは好きな色を入力する必要があることをどうやって知るのでしょうか。

フォーム コントロールを記述するには、フォーム コントロールごとに <label> を使用します。

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

ラベル要素の for 属性が、入力の id 属性と一致します。

ユーザー入力をキャプチャする

名前が示すように、<input> 要素はユーザーからの入力を収集するために使用されます。

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

前述のように、id 属性は <input> を <label> に接続します。この例の名前属性とタイプ属性はどうなりますか？

name 属性

name 属性を使用して、ユーザーがコントロールで入力したデータを識別します。フォームを送信すると、この名前がリクエストに含まれます。フォーム コントロールに mountain という名前を付け、ユーザーが Gutenberg を入力した場合、この情報は mountain=Gutenberg としてリクエストに含まれます。

フォーム コントロールの名前を hill に変更してみてください。正しく設定してフォームを送信すると、URL に hill が表示されます。

入力タイプ

フォーム コントロールにはさまざまな種類があり、いずれもさまざまなブラウザやプラットフォームで動作する便利な組み込み機能を備えています。ブラウザは、type 属性に基づいて、さまざまなユーザー インターフェースをレンダリングし、さまざまな画面キーボードを表示し、さまざまな検証ルールを使用します。タイプを変更する方法を見てみましょう。

type="checkbox" を使用すると、ブラウザはテキスト フィールドではなくチェックボックスをレンダリングするようになりました。チェックボックスには追加の属性も付属しています。checked 属性を設定すると、チェック済みとして表示できます。

他にもさまざまなタイプを選択できます。詳細については、後述のモジュールで説明します。

複数行のテキストを許可する

たとえば、ユーザーがコメントを入力できるフィールドが必要だとします。そのため、複数行のテキストを入力できると便利だと思いませんか？これが <textarea> 要素の目的です。

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

オプションのリストから選択する

ユーザーに選択可能なオプションのリストを表示するにはどうすればよいですか？ <select> 要素を使用してこれを実現できます。

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

まず、<select> 要素を追加します。他のすべてのフォーム コントロールと同様に、id 属性を使用して <label> に接続し、name 属性を使用して一意の名前を付けます。

<select> 要素の開始タグと終了タグの間に、複数の <option> 要素を追加できます。各要素は 1 つの選択を表します。

各オプションには一意の value 属性があるため、フォームデータを処理するときに区別できます。option 要素内のテキストは、人が読める値です。

この <select> を使用して選択内容を変更せずにフォームを送信すると、リクエストに color=orange が含まれます。では、ブラウザはどのオプションを使用すべきかをどのようにして把握するのでしょうか。

次のいずれかの場合を除き、ブラウザはリスト内の最初のオプションを使用します。

• 1 つの <option> 要素に selected 属性があります。
• お客様が別のオプションを選択します。

オプションを事前に選択する

selected 属性を使用すると、1 つのオプションを事前に選択できます。これは、<option> 要素の定義順序に関係なく、デフォルトになります。

フォームコントロールのグループ化

フォーム コントロールをグループ化しなければならない場合もあります。この場合には <fieldset> 要素を使用できます。

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

<fieldset> 要素内に <legend> 要素があることに気付きましたか？どのような用途に使用されていると思いますか？

「フォーム コントロールのグループを記述するため」と答えた方は正解です。

すべてのフォーム コントロールに関連付けられた <label> 要素が必要であるように、すべての <fieldset> 要素には <legend> 要素が必要です。また、<legend> は <fieldset> の最初の要素でなければなりません。<legend> 要素の後に、グループに含めるフォーム コントロールを定義できます。

フォームの送信

フォーム コントロールを追加してグループ化する方法を学んだところで、ユーザーがフォームを送信する方法について考えてみましょう。

1 つ目の方法は、<button> 要素を使用する方法です。

<button>Submit</button>

ユーザーが [送信] ボタンをクリックすると、ブラウザは <form> 要素の action 属性で指定された URL にリクエストを行い、フォーム コントロールのすべてのデータを送信します。

<button> 要素の代わりに、type="submit" で <input> 要素を使用することもできます。入力は <button> とまったく同じように動作します。<label> 要素を使用して <input> を記述する代わりに、value 属性を使用します。

<input type="submit" value="Submit">

また、フォーム フィールドにフォーカスがあるときに Enter キーを使用してフォームを送信することもできます。

理解度を確認する

フォーム要素に関する知識をテストする

リソース

• ラベル要素
• 入力要素
• textarea 要素
• select 要素
• fieldset 要素
• ボタン要素