HTML — это удивительно. Вот три распространенных компонента пользовательского интерфейса, для которых на самом деле не нужен JavaScript.

Отличная парадигма в программировании — «не изобретайте колесо». Реализация этого чувства часто выражается в использовании библиотек. Не поймите меня неправильно, библиотеки — это здорово и могут быть бесценными, но вот в чем дело: они не всегда нужны.

JavaScript — это круто и все такое, но я все еще нахожусь в раздумьях. HTML на самом деле довольно удивителен и может быть подходящим инструментом для работы без необходимости застревать в аду зависимостей.

Вместо того чтобы использовать раздутую библиотеку, почему бы не попробовать свои силы в том, что может предложить ванильный HTML? Вот три лучших компонента для дизайна пользовательского интерфейса, которые я обычно вижу реализованными с помощью JavaScript, но которые на самом деле работают со старым добрым ванильным HTML и могут быть использованы для создания интерактивных элементов HTML без какого-либо JavaScript.

Выпадающие элементы

Элемент <select> обычно используется в формах, но, проявив немного воображения, вы можете использовать его для множества других вещей. Как насчет выбора языка, переключателя страниц или меню версий для страниц документации?

<select>
    <option value="en">English</option>
    <option value="sv">Swedish</option>
    <option value="es">Spanish</option>
    <option value="fr">French</option>
    <option value="de">German</option>
</select> 
Вход в полноэкранный режим Выход из полноэкранного режима

Вводы с возможностью поиска

Как видите, элементы select отлично подходят, когда нужно ограничить выбор заранее определенным списком, но могут стать довольно подавляющими, если у вас большой список вариантов.

Вы можете использовать элемент <datalist> для создания набора значений, которые браузер может использовать для автозаполнения.

<input type="text" list="common-search-values" placeholder="Search...">
<datalist id="common-search-values">
    <option>George Orwell</option>
    <option>Daniel Handler</option>
    <option>Neil Gaiman</option>
    <option>Ernest Hemingway</option>
    <option>Virginia Woolf</option>
</datalist>
Вход в полноэкранный режим Выход из полноэкранного режима

Ванильный HTML-выборщик даты

Этот вариант — мой любимый. Я потратил слишком много времени, пробуя JavaScript-средства выбора времени, прежде чем понял, что в HTML уже есть такое средство. Все, что вам нужно, это следующий фрагмент:

<input type="datetime-local">
Войти в полноэкранный режим Выйти из полноэкранного режима

Подробнее

Вы можете попробовать все примеры, показанные здесь, на CodePen, https://codepen.io/stresseddev/pen/zYRGgrN.

А вот некоторые ссылки на ресурсы MDN.

  • Выпадающие элементы
  • Поиск с автозаполнением
  • Выбор даты

Какие ваши любимые элементы HTML? Когда имеет смысл использовать JavaScript, а когда лучше придерживаться HTML? Дайте мне знать в комментариях!

Оцените статью
Procodings.ru
Добавить комментарий