HTML フォームと入力

HTML フォームは、ユーザーの入力情報を収集するために使用されます。

HTML フォームは、ドキュメント内の領域を表し、この領域にはインタラクティブコントロールが含まれ、ユーザーから収集した情報をWebサーバーに送信します。

HTML フォームには通常、さまざまな入力フィールド、チェックボックス、ラジオボタン、ドロップダウンリストなどの要素が含まれます。

以下は簡単なHTMLフォームの例です：

  • <form>要素はフォームを作成するために使用され、action属性は、フォームデータの送信先URLを定義し、method属性は、送信データのHTTPメソッドを定義します（ここでは "post" を使用しています）。
  • <label>要素は、フォーム要素にラベルを追加し、アクセシビリティを向上させるために使用されます。
  • <input>要素は最も一般的に使用されるフォーム要素の1つで、テキスト入力ボックス、パスワードボックス、ラジオボタン、チェックボックスなどを作成できます。type属性は入力ボックスのタイプを定義し、id属性は関連付けに使用され、<label>要素、name属性はフォームフィールドを識別するために使用されます。
  • <select>要素はドロップダウンリストを作成するために使用され、<option>要素はドロップダウンリスト内のオプションを定義するために使用されます。

サンプル

<form action="/" method="post">
    <!-- テキスト入力ボックス -->
    <label for="name">ユーザー名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- パスワード入力ボックス -->
    <label for="password">パスワード:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- ラジオボタン -->
    <label>性別:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- チェックボックス -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">お知らせを購読</label>

    <br>

    <!-- ドロップダウンリスト -->
    <label for="country">国:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 送信ボタン -->
    <input type="submit" value="送信">
</form>

試してみる »
Examples

オンラインサンプル

サンプル

次のサンプルは、2つの入力ボックスを含むフォームを作成します：

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

試してみる »

サンプル

次のサンプルは、通常の入力ボックスとパスワード入力ボックスを含むフォームを作成します：

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

試してみる »

（このページの下部にその他のサンプルがあります。）

HTML フォーム

フォームは、フォーム要素を含む領域です。

フォーム要素は、ユーザーがフォームにコンテンツを入力できるようにするもので、例：テキストエリア（textarea）、ドロップダウンリスト（select）、ラジオボタン（radio-buttons）、チェックボックス（checkbox）などがあります。

私たちは使用できます<form>タグを使用してフォームを作成します：

サンプル

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

HTML フォーム - 入力要素

ほとんどの場合に使用されるフォームタグは入力タグです。<input>。

入力タイプはtype属性によって定義されます。

次に、一般的に使用されるいくつかの入力タイプを紹介します。

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

テキストフィールドは<input type="text">タグを使用して設定します。ユーザーがフォームに文字や数字などを入力する必要がある場合に、テキストフィールドを使用します。

サンプル

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

ブラウザには次のように表示されます：

First name:
Last name:

注意：フォーム自体は表示されません。また、ほとんどのブラウザでは、テキストフィールドのデフォルトの幅は20文字です。

パスワードフィールド

パスワードフィールドはタグを使用して<input type="password">定義されます：

サンプル

<form>
Password: <input type="password" name="pwd">
</form>

ブラウザでの表示結果は次のとおりです：

Password:

注意：パスワードフィールドの文字は平文では表示されず、アスタリスク*またはドット.で置き換えられます。

ラジオボタン（Radio Buttons）

<input type="radio">タグはフォームのラジオボタンオプションを定義します：

サンプル

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

ブラウザでの表示結果は次のとおりです：

男
女

チェックボックス（Checkboxes）

<input type="checkbox">チェックボックスを定義します。

チェックボックスでは、1つまたは複数のオプションを選択できます：

サンプル

<form>
<input type="checkbox" name="vehicle[]" value="Bike">自転車が好き<br>
<input type="checkbox" name="vehicle[]" value="Car">車が好き
</form>

ブラウザでの表示結果は次のとおりです：

自転車が好き
車が好き

送信ボタン（Submit）

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

ユーザーが確認ボタンをクリックすると、フォームの内容がサーバーに送信されます。フォームのアクション属性はactionサーバー側のファイル名を定義します。

action属性は受け取ったユーザー入力データに関連する処理を行います：

サンプル

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

ブラウザでの表示結果は次のとおりです：

Username:

上のテキストボックスに数文字入力し、確認ボタンをクリックすると、入力データがhtml_form_action.phpファイルに送信され、そのページに入力結果が表示されます。

上記のサンプルには method 属性があり、フォームデータの送信方法を定義するために使用され、以下の値を使用できます：

  • post：HTTP POST メソッドを指します。フォームデータはフォーム本文に含まれてサーバーに送信され、ユーザー名やパスワードなどの機密データを送信するために使用されます。

  • get：デフォルト値で、HTTP GET メソッドを指します。フォームデータはaction属性のURLに追加され、?を区切り文字として使用します。一般に、ページネーションなどの機密性の低い情報に使用されます。例：https://www.example.com/?page=1 の場合、page=1 が get メソッドで送信されたデータです。

サンプル

<!-- 以下のフォームは GET リクエストを使用して現在の URL にデータを送信します。method のデフォルトは GET です。 -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 以下のフォームは POST リクエストを使用して現在の URL にデータを送信します。 -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- フォームは fieldset、legend、label タグを使用します -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

Try itその他のサンプル

ラジオボタン（Radio buttons）
この例では、HTML でラジオボタンを作成する方法を示します。

チェックボックス（Checkboxes）
この例では、HTML ページでチェックボックスを作成する方法を示します。ユーザーはチェックボックスをオンまたはオフにできます。

シンプルなドロップダウンリスト
この例では、HTML ページでシンプルなドロップダウンリストボックスを作成する方法を示します。ドロップダウンリストボックスは選択可能なリストです。

プリセットされたドロップダウンリスト
この例では、事前に選択された値を持つシンプルなドロップダウンリストを作成する方法を示します。

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

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

Try itフォームサンプル

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

入力ボックスと確認ボタン付きのフォーム
この例では、ページにフォームを追加する方法を示します。このフォームには2つの入力ボックスと1つの確認ボタンが含まれます。

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

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

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

HTML フォームタグ

New: HTML5 の新しいタグ

タグ 説明
<form> ユーザー入力用のフォームを定義します
<input> 入力フィールドを定義します
<textarea> テキストエリア（複数行の入力コントロール）を定義します
<label> <input> 要素のラベルを定義します。通常は入力タイトルです。
<fieldset> 関連するフォーム要素のグループを定義し、外枠で囲みます
<legend> <fieldset> 要素のタイトルを定義します
<select> ドロップダウンオプションリストを定義します
<optgroup> オプショングループを定義します
<option> ドロップダウンリスト内のオプションを定義します
<button> クリック可能なボタンを定義します
<datalist>New 事前定義された入力コントロールのオプションリストを指定する
<keygen>New フォームの鍵ペアジェネレーターフィールドを定義する
<output>New 計算結果を定義する
その他の拡張