Не слишком известные HTML-атрибуты, о которых стоит знать

0
640
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×

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

1. Accept

Указывает, файлы какого типа разрешены в качестве входящих данных.

<input type="file" accept=".jpg, .png">

Используется только с типом file тега <input>. Допустимые значения указываются списком, через запятую. Чтобы разрешить все файлы определенного типа медиа, например, любые изображения, используйте accept="image/*".

2. Autofocus

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

<input type="text" autofocus>

Атрибут autofocus может быть лишь у одного элемента в документе или диалоге. Если добавить его для нескольких элементов, в итоге в фокусе будет первый из них.

3. Inputmode

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

<input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" />

Это позволяет браузеру отображать подходящую виртуальную клавиатуру.

4. Pattern

Задает регулярное выражение, с шаблоном которого сравнивается значение <input> при отправке формы.

<input name="username" id="username" pattern="[A-Za-z0-9]+">

5. Required

Делает поле формы обязательным для заполнения.

<form action="/send_form.js">  
Username: <input type="text" name="username" required>  
<input type="submit">  
</form>

6. Autocomplete

Указывает, можно ли браузеру помогать пользователю в заполнении поля формы (например, email-адрес, номер телефона, страну и т. п.).

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

Полный список доступных значений для autocomplete можно посмотреть в MDN-документации.

7. Multiple

Этот атрибут позволяет пользователю выбирать несколько значений.

<input type="file" multiple>

Его можно использовать с типами file и email тегов <input> и <select>.

8. Download

Указывает, что при клике по ссылке начнется загрузка целевого ресурса.

<a href="document.pdf" download>Download PDF</a>

9. Contenteditable

Этот атрибут дает возможность пользователю редактировать содержимое элемента.

<div contenteditable="true">
  This text can be edited by the user.
</div>

10. Readonly

Указывает, что поле ввода доступно только для чтения.

<input type="text" id="sports" name="sports" value="golf" readonly>

Пользователь может заходить в это поле и копировать текст из него. Чтобы запретить и эти действия, следует воспользоваться атрибутом disabled.

11. Hidden

Указывает, является элемент видимым или скрытым.

<p hidden>This text is hidden</p>

12. Spellcheck

Определяет, будет ли проверяться орфография в данном элементе.

<p contenteditable="true" spellcheck="true">Myy spellinng is checkd</p>

Обычно нередактируемые элементы не проверяются, даже если добавлен атрибут spellcheck со значением true и браузер поддерживает проверку правописания.

13. Translate

Определяет, должен ли элемент переводиться при локализации страницы.

<footer><p translate="no">Printing Works, Inc</p></footer>

Например, вы можете указать, что название компании, заголовки книг, географические названия переводить не надо.

14. Loading

Указывает, должен браузер сразу начинать загрузку изображений или отложить ее. Загрузка может начаться, например, когда пользователь прокрутит страницу до этих изображений.

<img src="https://cdn.mysite.com/media/image.jpg" loading="lazy">

Поведение по умолчанию — eager, а для отложенной загрузки используется значение lazy («ленивая загрузка).

15. Onerror

Дает возможность добавить запасное изображение (fallback) на случай, если основное не загрузится.

<img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/>

this.onerror=null нужен, чтобы предотвратить зацикливание при недоступности самого запасного изображения.

16. Poster

С помощью этого атрибута можно добавить изображение, которое будет показываться, пока загружается видео.

<video 
src="https://cdn.mysite.com/media/video.mp4"
poster="image.png">
</video>

Если не добавлять постер, на странице ничего не отображается до того момента, пока не станет доступным первый кадр видео. После этого в качестве постера отображается первый кадр.

17. Controls

Указывает, должны ли отображаться элементы управления видео и аудио в плеере.

<audio controls
<source src="track11.mp3"  type="audio/mpeg">
</audio>

18. Autoplay

Обеспечивает автоматическое начало проигрывания видео или аудио сразу после загрузки.

<video autoplay
src="https://cdn.mysite.com/media/myvideo.mp4"
poster="image.png">
</video>

19. Loop

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

<audio loop
<source src="track323.mp3"  type="audio/mpeg">
</audio>

20. Cite

С помощью этого атрибута можно указать ссылку на цитируемый материал.

<blockquote cite="https://mysite.com/original-source-url">
  <p>Some awesome quote</p>
</blockquote>

От редакции Techrocks. Подробнее о цитировании можно почитать в статье «Цитирование в HTML: выбираем теги правильно».

21. Datetime

Указывает дату и время, когда текст был удален или вставлен.

<p>
  My plans for 2021 include visiting Thailand,
  <del datetime="2021-01-01T18:21">creating 6 courses,</del> 
  <ins datetime="2021-02-02T14:07">writing 12 articles.</ins>
</p>
<p>I will evaluate the completion on <time datetime="2021-12-31"></time>.</p>

При использовании элемента <time> атрибут представляет дату и/или время в машиночитаемом формате.

22. Async

Обеспечивает асинхронное выполнение скрипта относительно остальной части страницы.

<script src="script.js" async></script>

Атрибут async влияет только на внешние скрипты (должен быть атрибут src).

23. Defer

Обеспечивает выполнение скрипта только после окончания парсинга страницы.

<script src="script.js" defer></script>

Атрибут defer тоже влияет только на внешние скрипты (должен быть атрибут src).

24. Draggable

Указывает, можно ли перетаскивать элемент.

<script>
const allowDrop = (e) => e.preventDefault();
const drag = (e) => e.dataTransfer.setData("text", e.target.id);
const drop = (e) => {
  var data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
}
</script>
<div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black"></div>
<p id="drag" draggable="true" ondragstart="drag(event)">Drag me into box</p>

Перевод статьи «24 Lesser-Known HTML Attributes You May Want to Use».