Атрибут formnovalidate тега <button> — без перевірки форми

HTML

<form action="#" class="anketa">
  <p class="head">Форма з обовʼязковим полем</p>

  <label class="pole">
    <span class="nazva">Пошта (required, type="email")</span>
    <input type="email" name="mail" required value="не-пошта">
    <span class="znak">так виглядає поле, яке переглядач вважає неправильним</span>
  </label>

  <label class="pole">
    <span class="nazva">Назва теми (required)</span>
    <input type="text" name="tema" required placeholder="поки порожньо">
  </label>

  <p class="knopky">
    <button type="submit">Надіслати</button>
    <span class="opys good">звичайна кнопка: переглядач не пустить, доки поля неправильні</span>
  </p>

  <p class="knopky">
    <button type="submit" formnovalidate>Зберегти чернетку</button>
    <span class="opys warn">formnovalidate: надішле як є — з порожньою темою й хибною поштою</span>
  </p>

  <p class="knopky">
    <button type="button" formnovalidate>Просто кнопка</button>
    <span class="opys bad">type="button": formnovalidate тут ні до чого, ця кнопка нічого не надсилає</span>
  </p>

  <p class="knopky">
    <button type="reset">Скинути</button>
    <span class="opys bad">type="reset": те саме, атрибут не діє</span>
  </p>
</form>

<p class="note">Поля лишаються червоними в обох випадках: formnovalidate не робить
   значення правильними — він лише каже переглядачеві не перевіряти їх при
   надсиланні. Правило, яке їх фарбує, — input:invalid.</p>

<p class="note warn">У рамці прикладу форми не надсилаються, тому клац по кнопках
   переходу не покаже. На живій сторінці перша кнопка показала б підказку
   «Введіть адресу електронної пошти», а друга мовчки надіслала б форму.</p>

CSS

.head {
    margin: 0 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.anketa {
    max-width: 560px;
    padding: 10px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.pole {
    display: block;
    margin-bottom: 12px;
}

.nazva {
    display: block;
    margin-bottom: 3px;
    font-size: .9em;
}

input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #b9c6d8;
    border-radius: 4px;
    font: inherit;
}

input:invalid {
    border: 2px solid #d64545;
    background: #fff4f4;
}

input:valid {
    border: 2px solid #3a9a4f;
    background: #f3fbf4;
}

.znak {
    display: block;
    margin-top: 2px;
    color: #c0392b;
    font-size: .85em;
}

.knopky {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

button {
    flex: none;
    padding: 5px 12px;
    font: inherit;
}

.opys {
    font-size: .85em;
}

.good {
    color: #1b5e20;
}

.warn {
    color: #8a6100;
}

.bad {
    color: #c0392b;
}

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

.note.warn {
    padding: 6px 10px;
    border-radius: 4px;
    background: #fff6d8;
    color: #8a6100;
}

HTML

<p>Приклад використанням атрибуту 'formnovalidate'</p>
<hr>
 <form >
   <p>З використанням атрибута <code>formnovalidate</code> </p>
  <p><input required placeholder="Ім'я"></p>
  <p><input type="email" required placeholder="Ваш email"></p>
  <p><input type="url" required placeholder="Сайт"></p>
   <p><button formnovalidate>Надіслати</button></p>
 </form>

 <form>
   <p>Без використання атрибута <code>formnovalidate</code</p>
  <p><input required placeholder="Ім'я"></p>
  <p><input type="email" required placeholder="Ваш email"></p>
  <p><input type="url" required placeholder="Сайт"></p>
    <p><button>Надіслати</button></p>
 </form>

CSS

form {
  width:400px;
  float:left;
}