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 は対応していません。

参考文献