HTMLフォーム要素

❮ 前次 ❯

この章では、さまざまなHTMLフォーム要素すべてについて説明します。

HTMLの<form>要素

HTML<form>要素には、次の1つ以上のフォーム要素を含めることができます。

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

<input>要素

最もよく使用されるフォーム要素の1つは、<input>要素です。

要素は、属性<input>に応じていくつかの方法で表示できます。type

例

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

属性のさまざまな値はすべて、type 次の章「 HTML入力型」で説明されています。

<label>要素

この<label>要素は、いくつかのフォーム要素のラベルを定義します。

この<label>要素は、ユーザーが入力要素にフォーカスするとスクリーンリーダーがラベルを読み上げるため、スクリーンリーダーのユーザーに役立ちます。

この<label>要素は、非常に小さな領域（ラジオボタンやチェックボックスなど）をクリックするのが難しいユーザーにも役立ちます。ユーザーが<label>要素内のテキストをクリックすると、ラジオボタン/チェックボックスが切り替わるためです。

タグのfor属性は、それらをバインドするための要素の属性<label>と同じである必要があります。id<input>

<select>要素

この<select>要素は、ドロップダウンリストを定義します。

例

<label for="cars">Choose a car:</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">Choose a car:</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">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<textarea>要素

この<textarea>要素は、複数行の入力フィールド（テキスト領域）を定義します。

例

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

このrows属性は、テキスト領域に表示される行数を指定します。

このcols属性は、テキスト領域の表示幅を指定します。

上記のHTMLコードがブラウザに表示される方法は次のとおりです。

CSSを使用して、テキスト領域のサイズを定義することもできます。

例

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

<button>要素

この<button>要素は、クリック可能なボタンを定義します。

例

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

上記のHTMLコードがブラウザに表示される方法は次のとおりです。

注：typeボタン要素の属性は常に指定してください。ブラウザが異なれば、ボタン要素に異なるデフォルトタイプを使用する場合があります。

<fieldset>および<legend>要素

この<fieldset>要素は、関連データをフォームにグループ化するために使用されます。

要素は、<legend>要素のキャプションを定義し<fieldset> ます。

例

<form action="/action_page.php">
<fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
</fieldset>
</form>

上記のHTMLコードがブラウザに表示される方法は次のとおりです。

<datalist>要素

要素は、<datalist>要素の事前定義されたオプションのリストを指定します<input>。

ユーザーがデータを入力すると、事前定義されたオプションのドロップダウンリストが表示されます。

要素のlist属性は、要素の属性を<input>参照する必要があります。id<datalist>

例

<output>要素

この<output>要素は、計算の結果を表します（スクリプトによって実行されるようなもの）。

例

計算を実行し、結果を<output>要素に表示します。

HTML演習