HTML Input form* 属性

この章では、HTML <input> 要素のさまざまな form* 属性について説明します。

form属性

input の form 属性は、<input> 要素が属するフォームを指定します。

この属性の値は、それが属する <form> 要素の id 属性と等しくなければなりません。

例

HTML フォームの外部 (ただし、HTML フォームの一部) の入力フィールド:

<form action="/action_page.php" id="form1">
  <label for="fname">姓：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="送信">
</form>

<label for="lname">名前：</label>
<input type="text" id="lname" name="lname" form="form1">

自分で試してみてください

formaction 属性

input の formaction 属性は、フォームの送信時に入力 (データ) が処理されるファイルの URL を指定します。

注: この属性は、

<form action="/action_page.php">
  <label for="fname">姓：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名前：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="送信">
  <input type="submit" formaction="/action_page2.php" value="管理者として送信">
</form>

formenctype 属性

input の formenctype 属性は、送信時にフォーム データをエンコードする方法を指定します (method="post" のフォームにのみ適用されます)。

注: この属性は、<form> 要素の enctype 属性をオーバーライドします。

formenctype 属性は、入力タイプ submit と image に適用されます。

例

2 つの送信ボタンがあるフォーム。 1 つ目はデフォルトのエンコードを使用してフォーム データを送信し、2 つ目は「multipart/form-data」としてエンコードされたフォーム データを送信します。

<form action="/action_page_binary.php" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="送信">
  <input type="submit" formenctype="multipart/form-data"
  value="Multipart/form-data エンコーディングで送信する">
</form>

自分で試してみてください

formmethod 属性

input の formmethod 属性は、フォーム データをアクション URL に送信するための HTTP メソッドを定義します。

注: この属性は、<form> 要素のメソッド属性をオーバーライドします。

formmethod 属性は、入力タイプ submit と image に適用されます。

フォーム データは、URL 変数 (method="get") または HTTP ポスト トランザクション (method="post") として送信できます。

GET に関する注意:

• フォーム データを名前と値のペアとして URL に追加します
• 機密データの送信には GET を使用しないでください。 (送信されたフォーム データは URL に表示されます!)
• URL の長さは制限されています (2048 文字)
• ユーザーが結果をブックマークしたい場合のフォーム送信に役立ちます
• GET は、Google のクエリ文字列など、安全でないデータ用です

POST に関する注意:

• フォーム データを HTTP リクエストの本文に追加します（送信されたフォーム データを URL に表示しません）
• POST にはサイズ制限がないため、大量のデータを送信するために使用できます。
• POST を使用したフォーム送信はブックマークできません

ヒント: フォーム データに機密情報や個人情報が含まれる場合は、必ず POST を使用してください。

例

2 つの送信ボタンがあるフォーム。 1 つ目は、method="get" を使用してフォーム データを送信します。 2 つ目は、method="post" を使用してフォーム データを送信します。

<form action="/action_page.php" method="get">
  <label for="fname">姓：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名前：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="GETで送信">
  <input type="submit" formmethod="post" value="POSTで送信">
</form>

自分で試してみてください

formtarget 属性

input の formtarget 属性は、フォームの送信後に受信した応答を表示する場所を指定する名前またはキーワードを指定します。

注: この属性は、<form> 要素の target 属性をオーバーライドします。

formtarget 属性は、入力タイプの submit と image に適用されます。

例

2 つの送信ボタンと異なるターゲット ウィンドウを持つフォーム:

<form action="/action_page.php">
  <label for="fname">姓：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名前：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="送信">
  <input type="submit" formtarget="_blank" value="新しいウィンドウ/タブに送信">
</form>

自分で試してみてください

formnovalidate 属性

input の formnovalidate 属性は、送信時に <input> 要素を検証しないことを指定します。

注: この属性は、<form> 要素の novalidate 属性をオーバーライドします。

formnovalidate 属性は、次の入力タイプに適用されます: submit。

例

2 つの送信ボタン (検証ありおよび検証なし) があるフォーム:

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="送信">
  <input type="submit" formnovalidate="formnovalidate"
  value="検証なしでコミットする">
</form>

自分で試してみてください

novalidate 属性

novalidate 属性は <form> 属性です。

設定されている場合、novalidate 属性は、送信時にすべてのフォーム データを検証しないことを指定します。

例

送信時にフォーム データが検証されないことを指定します。

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="送信">
</form>

自分で試してみてください

HTML フォーム要素と入力要素