HTML フォーム要素
この章では、さまざまなHTMLフォーム要素をすべて説明します。
HTML <form>要素
HTML<form>要素には、次のフォーム要素を1つ以上含めることができます。
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
<input>要素
最もよく使用されるフォーム要素の1つは、<input>要素です。
<input>要素は、type属性に応じて、いくつかの方法で表示できます。
type属性のさまざまな値については、次の章HTML 入力タイプで説明します。
<label>要素
<label>要素は、いくつかのフォーム要素のラベルを定義します。
<label>要素は、ユーザーが入力要素にフォーカスすると、スクリーン リーダーがラベルを読み上げるため、スクリーン リーダーユーザーにとって便利です。
<label>要素は、非常に小さな領域(ラジオボタンやチェックボックスなど)をクリックするのが困難なユーザーにも役立ちます。<label>要素で、ラジオ ボタン/チェックボックスを切り替えます。
<label>タグのfor属性は、<input>要素のid属性と同じにして、それらをバインドする必要があります。
<select>要素
<select>要素は、ドロップダウンリストを定義します。
例
<label for="cars">車を選んでください:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<option>要素は、選択できるオプションを定義します。
デフォルトでは、ドロップダウンリストの最初の項目が選択されています。
事前に選択されたオプションを定義するには、selected属性をオプションに追加します。
目に見える値:
size属性を使用して、表示される値の数を指定します。
例
<label for="cars">車を選んでください:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
複数選択を許可:
ユーザーが複数の値を選択できるようにするには、multiple属性を使用します。
例
<label for="cars">車を選んでください:</label>
<select id="cars" name="cars" size="4"<strong> </strong>multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea>要素
<textarea>要素は、複数行の入力フィールド(テキストエリア)を定義します。
rows属性は、テキスト領域に表示される行数を指定します。
cols属性は、テキスト領域の表示幅を指定します。
上記のHTMLコードをブラウザに表示すると、次のようになります。
CSSを使用して、テキスト領域のサイズを定義することもできます。
<button>要素
<button>要素はクリック可能なボタンを定義します:
上記のHTMLコードをブラウザに表示すると、次のようになります。
注：button要素には必ずtype属性を指定してください。ブラウザーが異なれば、ボタン要素に異なるデフォルトのタイプが使用される場合があります。
<fieldset>要素と<legend>要素
<fieldset>要素は、フォーム内の関連データをグループ化するために使用されます。
<legend>要素は、<fieldset>要素のキャプションを定義します。
例
<form action="/action_page.php">
<fieldset>
<legend>ペルソナ:</legend>
<label for="fname">ファーストネーム:</label><br>
<input type="text" id="fname" name="fname" value="ジョン"><br>
<label for="lname">ラストネーム:</label><br>
<input type="text" id="lname" name="lname" value="ドゥー"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
上記のHTMLコードをブラウザに表示すると、次のようになります。
<datalist>要素
<datalist>要素は、<input>要素の事前定義されたオプションのリストを指定します。
ユーザーがデータを入力すると、事前定義されたオプションのドロップダウンリストが表示されます。
<input>要素のlist属性は、<datalist>要素のid属性を参照する必要があります。
例
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<output>要素
<output>要素は、(スクリプトによって実行されるような)計算の結果を表します。
例
計算を実行し、結果を<output>エレメント：
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTMLフォーム要素
| タグ | 説明 |
|---|---|
| <form> | ユーザー入力用のHTMLフォームを定義します |
| <input> | 入力コントロールを定義します |
| <textarea> | 複数行入力コントロール(テキスト領域)を定義します |
| <label> | <input>要素のラベルを定義します |
| <fieldset> | フォーム内の関連する要素をグループ化します |
| <legend> | <fieldset>要素のキャプションを定義します |
| <select> | ドロップダウンリストを定義します |
| <optgroup> | ドロップダウンリストで関連するオプションのグループを定義します |
| <option> | ドロップダウンリストのオプションを定義します |
| <button> | クリック可能なボタンを定義します |
| <datalist> | 入力コントロールの定義済みオプションのリストを指定します |
| <output> | 計算結果を定義します |
使用可能なすべての HTML タグの完全なリストについては、HTMLタグリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。