Атрибут target тега <form> — де показати відповідь

Атрибут target визначає де відобразити відповідь, отриману після відправки форми.

Після того, як обробник форми отримує дані, він повертає результат у вигляді HTML-документа. Ви можете визначити вікно, в яке буде завантажено повернуту веб-сторінку. Для цього використовується атрибут target, в якості його значення вказується ім'я вікна(сторінки) або фрейму.

правити

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

правити

Порада

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

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

Нотатка

Якщо target не встановлено, то значення за замовчуванням буде _self.

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

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

Синтаксис

<form target="_blank|_self|_parent|_top|framename">


...


</form>

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

_blank

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

автор: с3с

правити

_self

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

автор: с3с

правити

_parent

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

автор: с3с

правити

_top

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

автор: с3с

правити

framename

Іʼмя фрейма в який завантажити результат.

автор: с3с

правити

Переглядачі

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

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

Переглядач
	1	1	3	15	12	≤11

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

Переглядач
	4.4	18	4	2

Приклади

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

<p>Приклад форми для входу з використанням атрибуту 'target'</p>
<hr>
<form target="_blank">
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  
  <label>Email:</label><br>
  <input type="email" name=""><br>
  
  <label>Ваш сайт:</label><br>
  <input type="url"><br>
  
  <label>Ваше повідомлення:</label><br>
  <textarea></textarea>
  <br>
  
  <input type="submit" value="Увійти" >
</form>

<div class="case">
    <p class="lbl">Правильно: у рамки є name</p>
    <iframe name="out" title="ціль форми"
        srcdoc="<p style='font:14px system-ui;color:#3a9a4f;margin:6px'>сюди прийде відповідь обробника</p>"></iframe>
    <form action="/poshuk" target="out">
        <input name="q" value="запит" size="12">
        <button type="submit">Надіслати в рамку</button>
        <button type="submit" formtarget="_blank">…а цю — у нову вкладку</button>
    </form>
</div>

<div class="case">
    <p class="lbl">Типова помилка: у рамки лише id</p>
    <iframe id="out" title="не ціль"
        srcdoc="<p style='font:14px system-ui;color:#c0392b;margin:6px'>сюди не прийде нічого</p>"></iframe>
    <form action="/poshuk" target="out">
        <input name="q" value="запит" size="12">
        <button type="submit">Відкриється в НОВОМУ вікні</button>
    </form>
</div>

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

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

iframe {
    display: block;
    width: 100%;
    height: 54px;
    border: 2px solid #b9c6d8;
    background: #fff;
}

form {
    margin-top: 10px;
}

input,
button {
    font: inherit;
    padding: 4px 8px;
}

.case:has(iframe[name])::after {
    content: "ім'я знайдено — відповідь піде в цю рамку";
    display: block;
    margin-top: 8px;
    color: #3a9a4f;
    font-weight: 600;
}

.case:not(:has(iframe[name]))::after {
    content: "імені немає — переглядач відкриє нове вікно з іменем out";
    display: block;
    margin-top: 8px;
    color: #d64545;
    font-weight: 600;
}

.case:has(button[formtarget]) form::after {
    content: "у другої кнопки свій formtarget — він переважить target форми";
    display: block;
    margin-top: 6px;
    color: #1b4f9c;
    font-size: .9em;
}