Новинки HTML5: новые элементы формы — <datalist>, <output>, <keygen>, <command>

Элемент <datalist>: Умный помощник для ввода данных 🎯

Допустим, вы создаёте форму поиска на сайте. Как сделать подсказки для пользователей? Раньше требовался JavaScript, но теперь в HTML5 есть <datalist> — встроенный инструмент автодополнения!

<label for="framework">Выберите фреймворк:</label>
<input list="frameworks" id="framework" name="framework">
<datalist id="frameworks">
  <option value="React">
  <option value="Vue">
  <option value="Angular">
  <option value="Svelte">
</datalist>

Как это работает:
- <input> связывается с <datalist> через атрибут list.
- При вводе текста появляются подсказки из <option>.
- Совместим с большинством браузеров, включая мобильные.

<output>: Динамический вывод результата 📊

Нужно показать результат вычислений прямо в форме? <output> — это элемент, который отображает данные «на лету», например, сумму двух чисел:

<form oninput="result.value = Number(num1.value) + Number(num2.value)">
  <input type="number" id="num1" name="num1" value="0">
  <input type="number" id="num2" name="num2" value="0">
  = <output name="result" for="num1 num2">0</output>
</form>

Особенности:
- Атрибут for указывает, какие элементы влияют на вывод.
- Работает без JavaScript (если логика простая).

<keygen>: Генератор ключей (устаревший, но интересный!) 🔑

⚠️ Внимание: <keygen> официально удалён из стандарта HTML5, но он — часть истории! Раньше он использовался для шифрования:

<form action="/auth" method="post">
  <keygen name="key" challenge="12345">
  <input type="submit">
</form>

Почему убрали:
- На смену пришли современные API, например, Web Cryptography API.
- Если встретите в старом коде — знайте, что это редкость!

<command>: Кнопки с действиями (только для IE) 🚫

Элемент <command> должен был создавать кликабельные команды в меню, но поддерживался только в Internet Explorer. Пример «как было»:

<menu type="toolbar">
  <command type="command" label="Сохранить" icon="save.png">
</menu>

Почему не прижился:
- Заменён на <button> и JavaScript.
- Современные браузеры игнорируют этот тег.

Практическое применение: Собираем всё вместе 🛠️

Создадим форму с <datalist> и <output> для заказа пиццы:

<form oninput="price.value = Number(size.value) * 10">
  <label for="pizza">Выберите пиццу:</label>
  <input list="pizzas" id="pizza" name="pizza">
  <datalist id="pizzas">
    <option value="Маргарита">
    <option value="Пепперони">
    <option value="Гавайская">
  </datalist>

  <label for="size">Количество:</label>
  <input type="range" id="size" name="size" min="1" max="5" value="1">
  Итоговая цена: <output name="price" for="size">10</output> $
</form>

Что получили:
- Подсказки при вводе названия пиццы.
- Динамический расчёт цены при изменении количества.

Итоги: Когда и что использовать ✅

Совет от Данилы Бежина: <datalist> и <output> — ваши лучшие друзья для форм. Остальные элементы изучайте как исторический экскурс.

Для углублённого понимания смотрите разбор форм на YouTube.