Атрибут formtarget тега <input> — де відкрити відповідь

Атрибут formtarget (HTML тега <input>) вказує браузеру, де відобразити відповідь, отриману після відправлення форми (вкладка, вікно, чи фрейм). За замовчувнням встановлено значення _self .

Атрибут formtarget перевизначає атрибут target елемента <form>.

правити

Загальний опис

правити

Нотатка

frame і framesets не підтримуються в HTML5. Значення _parent, _top і framename тепер в основному використовується з iframes.

автор: с3с правити

Нотатка

Атрибут formtarget може використовуватися тільки з type="submit" та type="image".

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<input formtarget="_blank|_self|_parent|_top|framename">

Атрибут formtarget може отримувати 5 значень:

_blank

Завантажує сторінку в новому вікні браузера.

автор: с3с

правити

_self

Завантажує сторінку в поточному вікні браузера.

автор: с3с

правити

_parent

Завантажує сторінку у батьківський фрейм, якщо фреймів немає, то це значення працює як _self.

автор: с3с

правити

_top

Скасовує всі фрейми і завантажує сторінку в повному вікні браузера, якщо фреймів немає, то це значення працює як _self.

автор: с3с

правити

framename

Завантажує сторінку в іменований фрейм.

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	9	4	5	≤12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	3	18	4	4.2

Приклади

+ запропонувати свій приклад у пісочниці

<p>Приклад форми з використанням атрибуту 'formtarget'</p>
<hr>
<form name ="myform" >
  <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>
  <input type="submit" value="Увійти"  formtarget="_blank
">
</form>

<p id="text">
  
</p>

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

<form method="post" action="#" target="ramka">
    <p class="title">Форма надсилає у фрейм із назвою ramka</p>

    <p class="row"><input type="submit" formtarget="_blank" value="submit із formtarget=_blank"></p>
    <p class="row"><input type="submit" value="звичайний submit, без formtarget"></p>
    <p class="row"><input type="submit" formtarget=" _blank " value="formtarget=&quot; _blank &quot; — з пробілами"></p>
    <p class="row"><input type="submit" formtarget="ramka2" value="formtarget=ramka2 — такого вікна немає"></p>
    <p class="row"><input type="text" formtarget="_blank" placeholder="текстове поле з formtarget"></p>
    <p class="row"><button type="submit" formtarget="_blank">кнопка button із formtarget=_blank</button></p>
</form>

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

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

.row {
    margin: 10px 0;
}

input,
button {
    padding: 6px 10px;
    font: 14px/1.3 system-ui, sans-serif;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    background: #fff;
}

input[type="text"] {
    min-width: 260px;
}

[formtarget] {
    border-color: #2f6fd0;
}

.row::after {
    display: block;
    margin-top: 3px;
    font-family: ui-monospace, monospace;
    font-size: .85em;
    color: #5a6472;
    content: "відповідь піде в ціль форми — фрейм ramka";
}

.row:has([formtarget="_blank"])::after {
    color: #1b4f9c;
    content: "formtarget перекрив форму: відповідь піде в нове вікно";
}

.row:has([formtarget=" _blank "])::after {
    color: #c0392b;
    content: "імені з пробілами по краях немає ні в кого — браузер відкриє ще одне вікно";
}

.row:has([formtarget="ramka2"])::after {
    color: #c0392b;
    content: "такої цілі немає — замість фрейму буде нове вікно";
}

.row:has(input[type="text"][formtarget])::after {
    color: #c0392b;
    content: "не кнопка — атрибут мертвий: Enter надішле форму в ціль форми";
}