Атрибуты из этого списка могут помочь вам в решении довольно распространенных задач и избавить от использования сложных внешних библиотек. В этой статье я дам краткое описание каждого атрибута и приложу сниппеты кода, чтобы вам было легче понять варианты использования и синтаксис.
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».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
