HTML Form 要素

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

<input> 要素

最も重要なフォーム要素は <input> 要素です。

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

<select> 要素

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

<option> 要素は、選択肢を定義します。

デフォルトでは、ドロップダウンリストの最初の項目が選択されます。

選択済みの選択肢を定義するには、selected 属性を option に追加します。

<textarea> 要素

<textarea> 要素は、複数行の入力フィールド (テキストエリア) を定義します：

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

cols テキスト領域の表示幅を指定します。

上記 HTML コードは、ブラウザに次のように表示されます：

<button> 要素

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

上記 HTML コードは、ブラウザに次のように表示されます：

HTML5 フォーム要素

HTML5 では、次のフォーム要素が追加されました：

• <datalist>
• <keygen>
• <output>

HTML5 <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>

Try it Yourself ❯

HTML5 <keygen> 要素

<keygen> 要素の目的は、ユーザを認証するための安全な方法を提供することです。

<keygen> 要素は、フォーム内で鍵ペアを生成するフィールドを指定します。

フォームを送信すると、秘密キーと公開キーの2つのキーが生成されます。

秘密キーはローカルに格納され、公開キーはサーバに送られます。

公開キーは、この先、ユーザを認証するためのクライアント証明書を生成に使用することができます。

例

A form with a keygen field:

<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form>

Try it Yourself ❯

HTML5 <output> 要素

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

例

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

<form action="action_page.html"
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>

Try it Yourself ❯

Test Yourself with Exercises!

Exercise 1 »   Exercise 2 »   Exercise 3 »

HTML フォーム要素

= HTML5 で新規に追加。