Атрибут autofocus тега <button> — фокус при завантаженні

<p>Приклад використання атрибуту 'autofocus'</p>
<form >
  <p>З використанням атрибута 'autofocus'</p>
  <p><input placeholder="Ваше ім'я" name="user" form="data"></p>
<p><input placeholder="Прізвище" name="user"></p>
<p><input placeholder="Ваше повідомлення" name="user" ></p>
  <p><button autofocus>Відправити форму</button></p><br>
   </form>
  <form >
  <p>Без використання атрибута 'autofocus'</p>
  <p><input placeholder="Ваше ім'я" name="user" form="data"></p>
<p><input placeholder="Прізвище" name="user"></p>
<p><input placeholder="Ваше повідомлення" name="user" ></p>
  <p><button>Відправити форму </button></p>
  </form>

HTML

<p class="note">Ця рамка має атрибут sandbox — автофокус у ній не спрацьовує.
    Натисніть Tab: рамку фокуса намалює браузер.</p>

<p class="bar">
    <button autofocus>перша з autofocus</button>
    <button autofocus>друга з autofocus — її браузер уже не чіпає</button>
    <button disabled autofocus>вимкнена з autofocus</button>
    <button>звичайна кнопка</button>
</p>

<p><label for="a">Поле без autofocus — клацніть у нього:</label></p>
<input id="a" placeholder="а тут видно, як виглядає фокус">

<p class="note">Сині рамки — це селектор [autofocus] у стилях: він бачить атрибут
    незалежно від того, спрацював фокус чи ні.</p>

CSS

.bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

button {
    padding: 8px 12px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    background: #fff;
}

button[autofocus] {
    border-color: #2f6fd0;
    background: #eef3fb;
}

button:disabled {
    color: #98a1ad;
    background: #f4f5f7;
}

input {
    min-width: 320px;
    padding: 8px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

:focus-visible {
    outline: 3px solid #d64545;
    outline-offset: 3px;
}

label {
    font-weight: 600;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}