Шаблоны разметки, output и datalist

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику Тестировщику

Семантические теги HTML - смысл разметки для браузера

Часть HTML-элементов решает повторное использование разметки и связь полей формы без лишнего JavaScript. Три из них часто упускают на фоне <input> и <select>:

• <template> — черновик DOM, который не показывается, пока скрипт не склонирует;
• <output> — вывод результата, привязанный к полям формы;
• <datalist> — подсказки при вводе без жёсткого списка значений.

Связь: основные теги, виджеты на JavaScript, валидация форм.

---

<template> — невидимый чертёж

Содержимое <template> не рендерится и не выполняется (скрипты внутри не запускаются), пока вы не возьмёте клон.

<template id="card-template">
  <article class="card">
    <h3></h3>
    <p class="card__text"></p>
    <button type="button">Подробнее</button>
  </article>
</template>

<ul id="list"></ul>

const tpl = document.getElementById('card-template');
const list = document.getElementById('list');

function addCard(title, text) {
  const node = tpl.content.cloneNode(true);
  node.querySelector('h3').textContent = title;
  node.querySelector('.card__text').textContent = text;
  list.append(node);
}

Особенности

• template.content — DocumentFragment; один клон — одна вставка, шаблон остаётся нетронутым.
• Стили страницы применяются к клону после вставки в документ.
• Удобно для списков, строк таблицы, модальных «каркасов» — альтернатива строкам HTML в JS.

<template> и Web Components

Для переиспользуемых теневых компонентов тот же приём лежит в основе attachShadow; на учебном уровне достаточно cloneNode без полного Custom Elements.

---

<output> — результат вычисления формы

Элемент показывает результат, часто зависящий от других полей. Атрибут for — список id полей через пробел.

<form oninput="result.value = Number(a.value) + Number(b.value)">
  <label>
    A
    <input type="number" id="a" name="a" value="0">
  </label>
  <label>
    B
    <input type="number" id="b" name="b" value="0">
  </label>
  <output name="result" for="a b">0</output>
</form>

Событие oninput на <form> срабатывает при изменении любого поля внутри — простой калькулятор без отдельных слушателей на каждый input.

Скриптом:

const a = document.getElementById('a');
const b = document.getElementById('b');
const result = document.querySelector('output[name="result"]');

function recalc() {
  result.value = Number(a.value) + Number(b.value);
}

a.addEventListener('input', recalc);
b.addEventListener('input', recalc);

<output> семантически помечен как результат операции — скринридеры воспринимают его иначе, чем произвольный <span>.

---

<datalist> — подсказки без <select>

Пользователь вводит текст свободно, браузер предлагает варианты из списка.

<label for="city">Город</label>
<input id="city" name="city" list="cities" autocomplete="off">
<datalist id="cities">
  <option value="Москва"></option>
  <option value="Санкт-Петербург"></option>
  <option value="Казань"></option>
</datalist>

Связь: атрибут list у input указывает на id datalist.

	<select>	<input list="…"> + datalist
Только из списка	да (без multiple и кастома)	нет, можно свой текст
Внешний вид	системный выпадающий список	поле ввода + подсказки
Отправка формы	value выбранного option	введённая строка

Для строгого набора значений — select или валидация pattern / JS (валидация форм).

---

Сравнение с дублированием в JS

Подход	Плюс	Минус
<template>	разметка в HTML, доступна верстальщику	нужен скрипт для клона
Строка HTML в JS	всё в одном файле	экранирование, XSS-риск при данных пользователя
innerHTML из API	гибко	то же, плюс пересоздание узлов

Данные пользователя в шаблон вставляйте через textContent, не через innerHTML, если нет санитизации.

---

Краткий итог

<template> хранит образец UI для клонирования. <output> связывает отображаемый результат с полями формы. <datalist> даёт автодополнение без жёсткого выбора. Вместе они уменьшают «разметку в строках» и улучшают семантику форм.

---