フォームをインタラクティブにするには、フォーム要素を追加する必要があります。データを入力して選択するコントロール、コントロールを説明する要素、フィールドをグループ化する要素、フォームを送信するボタンがあります。
フォーム要素とは
<input> 要素が 2 つ（<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 属性と type 属性はどうでしょうか？
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> 要素に気づきましたか？どのような用途に使用されると思いますか？
答えが「フォーム コントロールのグループを説明するため」であれば、正解です。
すべての <fieldset> 要素には <legend> 要素が必要です。これは、すべてのフォーム コントロールに <label> 要素が必要なのと同様です。また、<legend> は <fieldset> の最初の要素である必要があります。<legend> 要素の後に、グループに含めるフォーム コントロールを定義できます。
フォームを送信する
フォーム コントロールを追加してグループ化する方法を学習したら、ユーザーがフォームを送信するにはどうすればよいか疑問に思うかもしれません。
1 つ目の方法は、<button> 要素を使用することです。
<button>Submit</button>
ユーザーが [送信] ボタンをクリックすると、ブラウザは <form> 要素の action 属性で指定された URL に、フォーム コントロールのすべてのデータを含むリクエストを送信します。
<button> 要素の代わりに、type="submit" を含む <input> 要素を使用することもできます。入力は <button> と同じように見え、同じように動作します。<input> を記述するために <label> 要素を使用する代わりに、value 属性を使用します。
<input type="submit" value="Submit">
また、フォーム フィールドにフォーカスがあるときに Enter キーを使用しても、フォームを送信できます。
理解度を確認する
フォーム要素に関する知識をテストする
<label> をフォーム コントロールに接続するにはどうすればよいですか？
<label> の for='color'、<input> の name='color'。<label> の for='color'、<input> の id='color'。<label> の id='color'、<input> の for='color'。<label> の name='color'、<input> の for='color。複数行のフォーム コントロールには何を使用しますか？
type='multi-line' を含む <input> 要素。<text> 要素。<textarea> 要素。type='long' を含む <input> 要素。フォームを送信するにはどうすればよいですか？
<button> 要素をクリックする。Enter キーを使用する。type='submit' を含む <input> 要素をクリックする。