フォームをインタラクティブにするには、フォーム要素を追加する必要があります。 データの入力と選択のためのコントロール、コントロールを説明する要素、 フィールドをグループ化する要素や フォームを送信するためのボタンがあります
フォーム要素とは
<input type="text"> と <input type="file"> という 2 つの <input> 要素が表示されます。見た目が違うのはなぜでしょうか？
要素名と 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> 要素に気づきましたか？どのような用途で使われると思いますか？
「フォーム コントロールのグループについて説明する」なら、正解です。
すべての <fieldset> 要素には <legend> 要素が必要です。
すべてのフォーム コントロールに <label> 要素が関連付けられている必要があります。
また、<legend> が <fieldset> 内の最初の要素である必要もあります。
<legend> 要素の後に、グループに含めるフォーム コントロールを定義できます。
フォームを送信する
フォームのコントロールを追加してグループ化する方法を学んだところで、ユーザーがフォームを送信するにはどうすればよいでしょうか。
1 つ目のオプションは、<button> 要素を使用することです。
<button>Submit</button>
ユーザーが [送信] ボタンをクリックした後、
ブラウザは、<form> 要素の
アクション属性
すべてのデータが含まれます
また、<button> 要素の代わりに、type="submit" と <input> 要素を使用することもできます。
入力の外観と動作は <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 です。複数行のフォームの管理には何を使用しますか？
type='multi-line' を持つ <input> 要素。<text> 要素。<textarea> 要素。type='long' を持つ <input> 要素。フォームを送信する方法
<button> 要素をクリックする。Enter キーを使用する。type='submit' が指定された <input> 要素をクリックする。