モダンHTML機能ガイド

<button popovertarget="my-popover">ポップオーバーを開く</button>
<div id="my-popover" popover>
  <p>ポップオーバーの内容</p>
  <button popovertarget="my-popover" popovertargetaction="hide">閉じる</button>
</div>

<dialog id="my-dialog">
  <h2>ダイアログのタイトル</h2>
  <p>ダイアログの内容</p>
  <form method="dialog">
    <button>閉じる</button>
  </form>
</dialog>

<button onclick="document.getElementById('my-dialog').showModal()">
  ダイアログを開く
</button>

<button invoketarget="my-button">
  このボタンをクリックすると
</button>
<button id="my-button">
  このボタンがクリックされたことになります
</button>

<input inputmode="numeric" type="text" placeholder="数字のみ">
<input inputmode="email" type="text" placeholder="メールアドレス">
<input inputmode="url" type="text" placeholder="URL">

<input enterkeyhint="search" type="search" placeholder="検索">
<input enterkeyhint="done" type="text" placeholder="完了">
<input enterkeyhint="send" type="text" placeholder="送信">

<div contenteditable="true">
  このテキストは編集可能です
</div>

<div inert>
  <button>このボタンは操作できません</button>
  <input type="text" placeholder="この入力欄も操作できません">
</div>