HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのformtarget属性とは？使い方と指定できる値を徹底解説

formtarget属性とは？

HTMLのformtarget属性は、フォームを送信した後に受け取るレスポンス（結果ページ）をどこに表示するかを指定するための属性です。この属性を設定すると、<form>タグのtarget属性で指定した内容が上書きされます。

なお、formtarget属性は <input type="submit"> および <input type="image"> でのみ使用できる点に注意してください。通常のテキスト入力欄などには指定できません。

formtarget属性に指定できる値の一覧

No.値説明
1_blankレスポンスを新しいウィンドウまたは新しいタブに表示します。
2_selfデフォルト値です。レスポンスを現在と同じフレーム内に表示します。
3_parentレスポンスを親フレームに表示します。
4_topレスポンスをウィンドウ全体（フレーム分割を解除した状態）に表示します。
5framenameレスポンスを指定した名前のiframe内に表示します。

formtarget属性の使用例

以下のコードでは、同じフォーム内に「通常の送信ボタン」と「新しいウィンドウで結果を開く送信ボタン」の2つを配置しています。これにより、クリックしたボタンによってレスポンスの表示先を切り替えることができます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML formtarget属性の例</title>
   </head>
   <body>
      <form action="/new.php" method="get">
         氏名<br><input type="text" name="name"><br>
         科目<br><input type="text" name="subject"><br>
         <input type="submit" value="送信">
         <input type="submit" formtarget="_blank" value="送信（新しいウィンドウ）">
      </form>
   </body>
</html>

コードのポイント

  • 1つ目の送信ボタンにはformtarget属性がないため、デフォルトの_selfが適用され、同じフレーム内に結果が表示されます。
  • 2つ目の送信ボタンにはformtarget="_blank"が指定されているため、クリックすると結果が新しいウィンドウまたはタブで開きます。
  • このように、1つのフォームの中でもボタンごとに表示先を柔軟に制御できるのがformtarget属性の大きなメリットです。
  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を徹底解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。multiple属性の主な特徴fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。emailタイプ：カンマ区切

  2. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali