Отличная парадигма в программировании — «не изобретайте колесо». Реализация этого чувства часто выражается в использовании библиотек. Не поймите меня неправильно, библиотеки — это здорово и могут быть бесценными, но вот в чем дело: они не всегда нужны.
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? Дайте мне знать в комментариях!