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

Давайте погрузимся!

Проверка формы

Наиболее часто используемые методы проверки формы используют JavaScript:

function validateForm() {
  const inputText = document.forms["form-name"]["input-name"].value;
  if (!inputText) {
    // handle input empty
  } else {
    // handle input filled
  }
}

Для большинства основных случаев, таких как приведенный выше пример, HTML поставляется с несколькими мощными средствами проверки. Приведенный выше код можно заменить всего одним параметром: required

<form>
  <input required="true" />
</form>

Некоторые из стандартных средств проверки, доступных для HTML:

Аудио

Аудио — один из важных аспектов современного UX. Любое приложение может работать без него, но добавьте пару звуков взаимодействия, и привлекательность вашего сайта мгновенно возрастет.

<audio id="click-audio">
  <source src="button-click.mp3" type="audio/mpeg">
</audio>

Затем вы можете воспроизвести аудио с помощью Javascript.

const audio = document.querySelector("#click-audio")
document.querySelectorAll("button")
  .forEach((button) => {
    button.onclick = () => audio.play()
  })

Идеальная картина

Art Direction – это отличный метод оптимизации, который экономит огромное количество трафика за счет загрузки изображений оптимального размера на основе некоторых медиа-запросов.

<picture>
    <source media="(max-width: 1200px)" srcSet="link-to-img">
    <source media="(max-width: 2560px)" srcSet="link-to-img@2x">
    <source media="(min-width: 2560px)" srcSet="link-to-imgl@3x">
    <img src="link-to-img@3x">
</picture>

Еще один инструмент, связанный с изображениями, — это map. Тег map используется для определения карты изображений на стороне клиента, что позволяет создавать потрясающие UX.

карта-изображение — это изображение с активными областями. Все, что вам нужно сделать, это указать X и координаты Y в элементах из <map>, и все готово!

Посмотрите этот Пример:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Предварительно отформатированный текст

Иногда вы сталкиваетесь с кейсом со странным форматированием, которое вам нужно сохранить, но HTML, кажется, перекрывает его?

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

<pre>
Lorem
  Ipsum   dolor sit             amet.
</pre>

Вход Pro

В HTML почти любой элемент можно сделать редактируемым с помощью contenteditable="true". Только используя несколько обработчиков событий JavaScript, вы сможете легко создать великолепный редактор форматированного текста!

<p contenteditable="true">This is an editable paragraph.</p>

Еще одним ценным навыком будет добавление предложений по вводу без использования каких-либо других библиотек или даже JavaScript!

<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>

Подведение итогов

В этой статье мы рассмотрели некоторые приемы, которые помогут вывести вашу HTML игру на новый уровень. С этими хитростями в рукаве вы тоже можете называть себя мастером HTML!

Удачной разработки!

Согласно исследованиям, записывая свои цели ручкой и бумагой, вы повышаете вероятность их достижения на 21%–39%. Ознакомьтесь с этими блокнотами и журналами, чтобы облегчить путь к достижению своей мечты: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

Нужен фрилансер по фронтенд-разработке с самым высоким рейтингом, чтобы избавиться от проблем с разработкой? Свяжитесь со мной на Upwork

Хотите увидеть, над чем я работаю? Загляните на мой Персональный сайт и GitHub

Хотите подключиться? Свяжитесь со мной в LinkedIn

Первоначально опубликовано на https://dev.to 5 декабря 2021 г.