この章では、すべての HTML フォーム要素について説明します。
最も重要なフォーム要素は <input> 要素です。
<input> 要素は、さまざまな type 属性に応じてさまざまな形式に変更できます。
注: 次の章では、すべての HTML 入力タイプについて説明します。
<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> 要素は、選択するオプションを定義します。
通常、リストには最初のオプションが選択された状態で表示されます。
選択した属性を追加することで、事前定義されたオプションを定義できます。
<option value="fiat" selected>Fiat</option>
<textarea> 要素は、複数行の入力フィールド (textarea) を定義します。
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>
上記の HTML コードはブラウザに次のように表示されます。
The cat was playing in the garden.
<button> 要素は、クリック可能なボタンを定義します。
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
上記の HTML コードはブラウザに次のように表示されます。
HTML5 では、次のフォーム要素が追加されます。
注:デフォルトでは、ブラウザには不明な要素は表示されません。 新しい要素がページを壊すことはありません。
<datalist> 要素は、<input> 要素の事前定義されたオプションのリストを指定します。
ユーザーがデータを入力すると、事前定義されたオプションのドロップダウン リストが表示されます。
<input> 要素の list 属性は、<datalist> 要素の id 属性を参照する必要があります。
<datalist> によって設定された事前定義値を持つ <input> 要素::
<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>