HTML フォーム

HTMLフォームは、異なるタイプのユーザー入力を収集するために使用されます。すべてのブラウザが<form>タグをサポートしています。<form>タグは、ユーザー入力を作成するためのHTMLフォームを定義します。フォームにはinput要素（テキストフィールド、チェックボックス、ラジオボックス、送信ボタンなど）が含まれます。

オンラインサンプル

テキストフィールドの入力ボックスを作成します
この例では、HTMLページでテキストフィールドを作成する方法を示します。ユーザーはテキストフィールドにテキストを書き込むことができます。

パスワードフィールドの入力ボックスを作成します
この例では、HTMLのパスワードフィールドの作成方法を示します。

HTML フォーム

フォームはフォーム要素を含むエリアです。

フォーム要素はユーザーがフォームに内容を入力できるようにします、例えば：テキストフィールド(textarea)、ドロップダウンリスト、ラジオボックス(radio-ボタons)、チェックボックス(checkboxes)などがあります。

フォームはフォームタグ<form>で設定されます：

<form>
.
input要素
.
</form>

HTML フォーム - 入力要素

最もよく使用されるフォームタグは入力タグ（<input>）です。

入力タイプはtype属性（type）で定義されています。最もよく使用される入力タイプは以下の通りです：

テキストフィールド（Text Fields）

テキストフィールドは<input type="text">タグで設定され、ユーザーがフォームにアルファベット、数字などの内容を入力する際に使用されます。

<form action="/run/demo-form.php"> 　　
First name:<input type="text" name="firstname" size="20"/><br/>Last name:<input type="text" name="lastname" size="20"/><br/><input type="submit" value="Submit"/> </form>

ブラウザが表示するのは以下の通りです：

注意:フォーム自体は見えません。また、ほとんどのブラウザでは、テキストボックスのデフォルトの幅は 20 个字符。

パスワードフィールド

パスワードフィールドは、<input type="password"> タグによって定義されます:

<form action="/run/demo-form.php"> 　　
Password:<input type="password" name="pwd"/><input type="submit" value="Submit"/> </form>

ブラウザの表示効果は以下の通りです:

注意:パスワードフィールドの文字は明示的に表示されず、星号または円点で代わりに表示されます。

単選ボタン（Radio Buttons）

<input type="radio"> タグは、フォームの単選ボックスオプションを定義します

<form action="/run/demo-form.php"> 　　
<input type="radio" name="sex" value="male"/>Male<br/><input type="radio" name="sex" value="female"/>Female<input type="submit" value="Submit"/> </form>

ブラウザの表示効果は以下の通りです:

チェックボックス（Checkboxes）

<input type="checkbox"> は、チェックボックスを定義します。ユーザーはいくつかの给定の選択肢から一つまたは複数のオプションを選択する必要があります。

<form action="/run/demo-form.php"> 　　
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike<br/><input type="checkbox" name="vehicle" value="Car"/>I have a car<input type="submit" value="Submit"/> </form>

ブラウザの表示効果は以下の通りです:

送信ボタン（Submit Button）

<input type="submit"> は、送信ボタンを定義します。

ユーザーが確認ボタンをクリックすると、フォームの内容が別のファイルに送信されます。フォームのアクション属性は、目的ファイルのファイル名を定義します。アクション属性で定義されたこのファイルは、受け取った入力データに対して関連する処理を行うことが通常です。:

<form name="input" action="/run/demo-form.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

ブラウザの表示効果は以下の通りです:

上記のテキストボックスにいくつかの文字を入力し、確認ボタンをクリックすると、入力データが "html_form_action.php" ページに送信されます。このページは入力結果を表示します。

さらに多くのオンラインサンプル

単選ボタン(Radio buttons)
この例では、HTMLに単選ボタンを作成する方法を示します。

チェックボックス(Checkboxes)
この例では、HTMLページにチェックボックスを作成する方法を示します。ユーザーはチェックボックスを選択または選択解除できます。

簡単なドロップダウンリスト
この例では、HTMLページに簡単なドロップダウンリストボックスを作成する方法を示します。ドロップダウンリストボックスはオプションリストです。

プリセットドロップダウンリスト
この例では、簡単なプリセット値付きのドロップダウンリストを作成する方法を示します。

テキストエリア(Textarea)
この例では、テキストエリア（複数行のテキスト入力コントロール）を作成する方法を示します。ユーザーはテキストエリアにテキストを書き込むことができます。書き込める文字数には制限はありません。

ボタンを作成
この例では、ボタンを作成する方法を示します。ボタンのテキストはカスタマイズできます。

フォーム例

枠付きのフォーム
この例では、データの周りにタイトル付きのボックスを描画する方法を示します。

入力フィールドと確認ボタンのフォーム
この例では、フォームをページに追加する方法を示します。このフォームには、2つの入力フィールドと確認ボタンが含まれています。

チェックボックスのフォーム
このフォームには、2つのチェックボックスと確認ボタンが含まれています。

ラジオボタンのフォーム
このフォームには、2つのラジオボタンと確認ボタンが含まれています。

フォームからメールを送信
この例では、フォームからメールを送信する方法を示します。

HTML フォームタグ

New : HTML5新しいタグ