フォームをインタラクティブにするには、フォーム要素を追加する必要があります。データの入力と選択を行うコントロール、コントロールを記述する要素、フィールドをグループ化する要素、フォームを送信するためのボタンがあります。
フォーム要素とは
<input> 要素 <input type="text"> と <input type="file"> の 2 つが表示されています。見た目が変わった理由
要素名と 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 に変更してみてください。これを正しく行ってフォームを送信すると、hill が URL に表示されます。
入力タイプ
フォーム コントロールにはさまざまなタイプがあり、どのブラウザやプラットフォームでも動作する便利な機能が組み込まれています。ブラウザは、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 属性があるため、フォームデータを処理するときに区別できます。オプション要素内のテキストは、人が読める値です。
選択を変更せずにこの <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> 要素の代わりに <input> 要素を type="submit" と組み合わせて使用することもできます。入力の外観と動作は <button> と同様です。<label> 要素を使用して <input> を記述する代わりに、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 が適用されます。複数行のフォーム コントロールには何を使用しますか？
<input> 要素と type='multi-line'。<text> 要素。<textarea> 要素。<input> 要素と type='long'。フォームを送信するにはどうすればよいですか？
<button> 要素をクリックする。Enter キーを使用する。type='submit' で <input> 要素をクリックする。