HTML Input form* 属性

おすすめコース： <input> 本章ではHTMLについて紹介します。 要素の違い 属性

form*

input の form属性 form <input> 属性は、

要素が属するフォーム。

例

この属性の値は、所属する<form>要素のid属性と同じでなければなりません。

HTMLフォーム（フォームの一部であるが、HTMLフォームの外に位置する）にある入力フィールド：
  <label for="fname">姓：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="送信">
</form>
<label for="lname">名前：</label>
<form action="/action_page.php" id="form1">

実際に試してみる

<input type="text" id="lname" name="lname" form="form1">

input の formaction formaction属性

注記：属性は、フォームを送信するときに、入力（データ）を処理するファイルのURLを定義します。 <form> この属性は、 要素の 属性

formaction 属性は以下の入力タイプに適用されます：submit と image。

例

異なる操作（action）を持つ2つの送信ボタンを持つHTMLフォーム：

<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.asp" method="post">
  <label for="fname">名前:</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 属性は、表单データを送信する action URLの HTTPメソッドを定義します。

注記：この属性は <form> 要素の method 属性。

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

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

GETに関する注意点：

  • フォームデータを名前/値の対の形式でURLに追加します
  • 決してGETを使用して敏感データを送信しないでください！（提出されたフォームデータはURLに表示されます！）
  • URLの長さには制限があります（2048文字）
  • ユーザーが結果をブックマークに追加したいフォームの提出に非常に役立ちます。
  • GETは非安全データ、例えばGoogleのクエリ文字列に適用されます。

POSTに関する注意点：

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

ヒント：フォームデータに重要な情報や個人情報が含まれている場合、POSTを使用する必要があります！

例

2つの提交ボタンを持つフォーム。最初のものは method="get" でフォームデータを送信。次のものは 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。

例

確認と確認しない二つのボタンを持つフォーム

<form action="/action_page.php">
  <label for="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 属性が設定されている場合、submit時にすべてのフォームデータの验证を行わないと規定されています。

例

提交時にフォームデータの验证を行わないことを指定

<form action="/action_page.php" novalidate>
  <label for="email">メールを入力してください:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="送信">
</form>

実際に試してみる

HTML フォームおよび Input 要素

タグ 説明
<form> ユーザー入力に HTML フォームを定義
<input> 入力コントロールの定義

すべての利用可能な HTML タグの完全なリストが必要な場合は、以下のURLにアクセスしてください HTML タグ参考手帳。