HTML フォーム属性
この章では、HTMLの<form>要素のさまざまな属性について説明します。
アクション属性
action属性は、フォームが送信されたときに実行されるアクションを定義します。
通常、ユーザーが送信ボタンをクリックすると、フォームデータがサーバー上のファイルに送信されます。
以下の例では、フォーム データは「action_page.php」というファイルに送信されます。このファイルには、フォームデータを処理するサーバー側スクリプトが含まれています。
例
送信時に、フォーム データを「action_page.php」に送信します。
<form action="/action_page.php">
<label for="fname">ファーストネーム:</label><br>
<input type="text" id="fname" name="fname" value="ジョン"><br>
<label for="lname">ラストネーム:</label><br>
<input type="text" id="lname" name="lname" value="ドゥー"><br><br>
<input type="submit" value="Submit">
</form>
ヒント：もしaction属性が省略された場合、アクションは現在のページに設定されます。
ターゲット属性
target属性は、フォームの送信後に受け取った応答を表示する場所を指定します。
target属性には、次のいずれかの値を指定できます。|
値 |
説明 |
|---|---|
| _blank | 応答が新しいウィンドウまたはタブに表示されます |
| _self | 応答は現在のウィンドウに表示されます |
| _parent | 応答は親フレームに表示されます |
| _top | 応答はウィンドウ全体に表示されます |
| framename | 応答は名前付きiframeに表示されます |
デフォルト値は_selfです。これは、応答が現在のウィンドウで開くことを意味します。
メソッド属性
method属性は、フォーム データを送信するときに使用するHTTPメソッドを指定します。
フォームデータは、URL変数(method="get"を使用)またはHTTPポストトランザクション(method="post"を使用)として送信できます。
フォームデータを送信するときのデフォルトのHTTPメソッドはGETです。
GETに関する注意事項:
- 名前と値のペアで、フォームデータをURLに追加します。
- GET を使用して機密データを送信しないでください。(送信されたフォームデータはURLで表示されます!)
- URLの長さは制限されています(2048文字)
- ユーザーが結果をブックマークしたいフォーム送信に役立ちます
- GETは、Googleのクエリ文字列など、セキュリティで保護されていないデータに適しています
POSTに関する注意事項:
- HTTPリクエストのボディ内にフォームデータを追加します(送信されたフォームデータはURLに表示されません)
- POSTにはサイズ制限がなく、大量のデータの送信に使用できます。
- POSTを使用したフォーム送信はブックマークできません
ヒント：フォームデータに機密情報や個人情報が含まれている場合は、常にPOSTを使用してください。
オートコンプリート属性
autocomplete属性は、フォームのオートコンプリートをオンにするかオフにするかを指定します。
オートコンプリートがオンの場合、ブラウザーはユーザーが以前に入力した値に基づいて値を自動的に補完します。
Novalidate属性
novalidate属性はブール属性です。
存在する場合、送信時にフォームデータ(入力)を検証しないことを指定します。
すべての<form>属性のリスト
|
属性 |
説明 |
|---|---|
| accept-charset | フォームの送信に使用される文字エンコーディングを指定します |
| action | フォームが送信されたときにフォームデータを送信する場所を指定します |
| autocomplete | フォームのオートコンプリートをオンにするかオフにするかを指定します |
| enctype | サーバーに送信するときにフォームデータをエンコードする方法を指定します(method="post"の場合のみ) |
| method | フォームデータの送信時に使用するHTTPメソッドを指定します |
| name | フォームの名前を指定します |
| novalidate | 送信時にフォームを検証しないことを指定します |
| rel | リンクされたリソースと現在のドキュメントの間の関係を指定します |
| target | フォームの送信後に受信した応答を表示する場所を指定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。