TECH I.S.

HTML 入力フォーム属性

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

フォーム属性

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

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

例

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="Submit"> </form> <label for="lname">苗字:</label> <input type="text" id="lname" name="lname" form="form1">

formaction属性

formaction属性は、フォームが送信されたときに入力を処理するファイルのURLを指定します。

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

formaction属性は、submitとimageの入力タイプで機能します。

例

アクションが異なる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="Submit">   <input type="submit" formaction="/action_page2.php" value="Submit as Admin"> </form>

formenctype属性

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="Submit">   <input type="submit" formenctype="multipart/form-data"   value="Submit as Multipart/form-data"> </form>

formmethod属性

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

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

formmethod属性は、submitとimageの入力タイプで機能します。

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

「get」メソッドに関する注意事項:

  • このメソッドは、フォームデータを名前と値のペアでURLに追加します。
  • このメソッドは、ユーザーが結果をブックマークしたいフォーム送信に役立ちます
  • URLに配置できるデータの量には制限があります(ブラウザーによって異なります)。したがって、すべてのフォームデータが正しく転送されるとは限りません
  • 機密情報を渡すために「get」メソッドを使用しないでください。(パスワードやその他の機密情報がブラウザのアドレスバーに表示されます)

「post」メソッドに関する注意事項:

  • このメソッドは、フォーム データをHTTPポストトランザクションとして送信します
  • 「post」メソッドを使用したフォーム送信はブックマークできません
  • 「post」メソッドは「get」よりも堅牢で安全であり、「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="Submit using GET">   <input type="submit" formmethod="post" value="Submit using POST"> </form>

formtarget属性

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="Submit">   <input type="submit" formtarget="_blank" value="Submit to a new window/tab"> </form>

formnovalidate属性

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

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

formnovalidate属性は、次の入力タイプで機能します:submit。

例

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

<form action="/action_page.php">   <label for="email">メールアドレスを送信する:</label>   <input type="email" id="email" name="email"><br><br>   <input type="submit" value="Submit">   <input type="submit" formnovalidate="formnovalidate"   value="Submit without validation"> </form>

novalidate属性

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

novalidateが存在する場合、送信時にすべてのフォームデータを検証しないように指定します。

例

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

<form action="/action_page.php" novalidate>   <label for="email">アドレスを送信する:</label>   <input type="email" id="email" name="email"><br><br>   <input type="submit" value="Submit"> </form>

HTMLフォームと入力要素
タグ 説明
<form> ユーザー入力用のHTMLフォームを定義します
<input> 入力コントロールを定義します

使用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。



チュートリアル