HTML の form 要素の rel 属性 ― 2021年12月06日 23時00分
この記事は HTML アドベントカレンダーの 6 日目の分です。
HTML の link
要素や a
要素には rel
属性を指定できます。もともとは閲覧中の Web ページとリンク先のリソースの関係性を示すものでしたが、現在はリンクの挙動を指定するためにも使われています。rel="noreferrer"
ならリンク先の文書にリファラーを送らない、rel="noopener"
ならリンク先文書の JavaScript から元の文書へのアクセスを禁止する、といった挙動です。
これらの rel
属性の値は、a
要素だけでなく form
要素にも使えます。以下のようなフォームがあったとき、フォームを送信すると新たなタブ (またはウィンドウ) が開きますが、そのタブの JavaScript から window.opener
プロパティで元のタブの文書を参照することはできません。
<form method="get" action="/search" target="_blank" rel="noopener">
...
</form>
2021 年 12 月現在、Safari の開発版では form
要素の rel
属性への対応が進んでいますが、Chorme と Firefox は対応していません。
最近のコメント