Атрибут formtarget тега <button> — вікно для відповіді

HTML

<p class="head">Форма має target="zvit" — це імʼя рамки для відповіді</p>

<form action="/kalkulator" method="get" target="zvit">
    <p class="ryadok">
        <label>Кількість <input type="number" name="n" value="12"></label>
    </p>
    <p class="knopky">
        <button type="submit">Порахувати</button>
        <button type="submit" formtarget="_blank">Порахувати</button>
        <button type="submit" formtarget="">Порахувати</button>
        <button type="button" formtarget="_blank">Просто кнопка</button>
        <button type="reset" formtarget="_blank">Скинути</button>
    </p>
    <p class="ryadok">
        <input type="submit" formtarget="dovidka" value="Пояснення">
        <span class="pidpys">→ dovidka (від кнопки): на input type="submit" атрибут
            працює так само, просто підпис до нього стилями не домалюєш</span>
    </p>
</form>

<p class="head">Та сама форма, але зовсім без target</p>

<form action="/kalkulator" method="get" class="bez-target">
    <p class="knopky">
        <button type="submit">Порахувати</button>
        <button type="submit" formtarget="_self">Порахувати тут</button>
    </p>
</form>

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

CSS

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

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

.ryadok,
.knopky {
    margin: 0 0 8px;
}

.knopky {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

button,
input[type="submit"] {
    padding: 5px 9px;
    border: 2px solid #2f6fd0;
    border-radius: 4px;
    background: #eef3fb;
    font: inherit;
    cursor: pointer;
}

/* маршрут дописано з розмітки: спершу загальні випадки, потім винятки */
form[target] button:not([formtarget])::after,
form[target] input[type="submit"]:not([formtarget])::after {
    content: " → у рамку «zvit» (від форми)";
    color: #5a6472;
    font-size: .85em;
}

.bez-target button:not([formtarget])::after {
    content: " → куди скаже <base> документа, а якщо його немає — сюди ж";
    color: #5a6472;
    font-size: .85em;
}

button[formtarget]:not([formtarget=""]):not([type="button"]):not([type="reset"])::after {
    content: " → " attr(formtarget) " (від кнопки)";
    color: #1b4f9c;
    font-size: .85em;
}

button[formtarget=""]::after {
    content: " → поточне вікно (порожній formtarget)";
    color: #1b4f9c;
    font-size: .85em;
}

button[type="button"],
button[type="reset"] {
    border-color: #e0a800;
    background: #fff6d8;
}

button[type="button"][formtarget]::after,
button[type="reset"][formtarget]::after {
    content: " → нікуди: форму не надсилає";
    color: #8a6100;
    font-size: .85em;
}

.pidpys {
    color: #1b4f9c;
    font-size: .85em;
}

.note {
    max-width: 620px;
    margin-top: 14px;
    color: #5a6472;
    font-size: .9em;
}

HTML

<p>Приклад форми з використанням атрибуту 'formtarget'</p>
<hr>
<form>
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  
  <label>Email:</label><br>
  <input type="email" name="email"><br>

  <label>Ваше повідомлення:</label><br>
  <textarea name="messenger"></textarea>
  <br>
  <button formtarget="_blank">Увійти</button>
</form>

CSS

form{
  float:left;
  padding-right:10px;
}