この章では、すべてのHTMLフォーム要素について説明します。
<input> 要素
最も重要なフォーム要素は<input> 要素です
<input> は type属性で指定することができます
例文
<input name=”firstname” type=”text”>
type を”text”にすると属性が省略され、入力フィールドは、デフォルトのタイプを取得します。
次の章では、さまざまな入力タイプについて説明します。
<select> 要素
<select>はドロップダウンリストを定義します。
例文
<select 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 そのオプションに属性を追加します。
例文
<option value=”fiat” selected>Fiat</option>
表示値
size 属性を使用して、表示される値の数を指定します。
例文
<select 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属性を使用して、ユーザーが複数の値を選択できるようにします。
例文
<select 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コードがブラウザに表示される方法です。
ノート: button要素には必ず type 属性を指定してください。 異なるブラウザはbutton要素に対して異なるデフォルトタイプを使用するかもしれません。
HTML5 フォーム要素
HTML5 は以下のフォーム要素を追加しました
<datalist><output>
ノート: ブラウザは未知の要素を表示しません。古いブラウザでサポートされていない新しい要素はあなたのWebページを”スタイルがくずれる” ことはありません。
HTML5の <datalist> 要素
<datalist> 要素は<input> 要素に対して事前定義されたオプションのリストを指定します
ユーザーがデータを入力すると、事前定義されたオプションのドロップダウンリストが表示されます。
list 属性は <input> とid と <datalist> 属性を参照する必要があります。
例文
<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>
HTML5の <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フォーム要素
| Tag | 説明 |
|---|---|
| <form> | ユーザー入力用のHTMLフォームを定義します |
| <input> | 入力コントロールを定義します |
| <textarea> | 複数行入力コントロール（テキスト領域）を定義します |
| <label> | <input> 要素のラベルを定義します |
| <fieldset> | 関連する要素をフォームにグループ化します |
| <legend> | <fieldset> 要素のキャプションを定義します |
| <select> | ドロップダウンリストを定義します |
| <optgroup> | ドロップダウンリストで関連オプションのグループを定義します |
| <option> | ドロップダウンリストでオプションを定義します |
| <button> | クリック可能なボタンを定義します |
| <datalist> | 入力コントロールの事前定義オプションのリストを指定します |
| <output> | 計算の結果を定義します |
さらにタグについてもっと知るには HTML Tag 辞典を参照して下さい