Атрибут form тега <button> — прив'язка кнопки до форми

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

HTML

<form id="lyst" class="demo">
    <p class="title">Форма #lyst</p>
    <label for="mail">Пошта</label>
    <input id="mail" name="mail" placeholder="поле всередині форми">
</form>

<form id="komentar" class="demo">
    <p class="title">Форма #komentar</p>
    <label for="txt">Коментар</label>
    <input id="txt" name="txt" placeholder="поле всередині форми">
</form>

<p class="bar">
    <button form="lyst" name="dia" value="send">кнопка поза формами</button>
    <button form="lyst komentar">два ідентифікатори</button>
    <button form="nemaye">неіснуючий id</button>
    <button>без form і поза формою</button>
</p>

<p><label for="pidpys">А це поле стоїть поза формами, але належить #komentar:</label></p>
<input id="pidpys" form="komentar" name="pidpys" placeholder="надішлеться разом із коментарем">

CSS

.demo {
    max-width: 520px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.title {
    margin: 0 0 8px;
    font-weight: 600;
}

label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

input {
    min-width: 300px;
    padding: 6px 8px;
    font: 15px/1.4 ui-monospace, monospace;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

input[form] {
    border-color: #2f6fd0;
    background: #eef3fb;
}

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

button {
    padding: 8px 12px;
    font: inherit;
    border: 2px solid #3a9a4f;
    border-radius: 4px;
    background: #f3fbf4;
}

button::after {
    color: #1e5a2c;
    font-family: ui-monospace, monospace;
    font-size: .85em;
    content: " → форма #" attr(form);
}

button:not([form]),
button[form="lyst komentar"],
button[form="nemaye"] {
    border-color: #d64545;
    background: #fff4f4;
}

button:not([form])::after {
    color: #c0392b;
    content: " → кнопка нічия: ні form, ні форми навколо";
}

button[form="lyst komentar"]::after {
    color: #c0392b;
    content: " → нічия: ідентифікатор мусить бути один";
}

button[form="nemaye"]::after {
    color: #c0392b;
    content: " → нічия: такої форми в документі немає";
}