Мощные атрибуты HTML, о которых вы, возможно, не знали
Есть много вещей, которые мы можем сделать, просто используя атрибуты HTML. В этой статье рассматриваются эти мощные атрибуты, которые сделают вашу жизнь проще и позволят вам максимально эффективно использовать HTML.
Готовы, поехали!
1-Download
Атрибут download указывает, что цель (файл, указанный в href будет загружен), когда пользователь нажимает на гиперссылку.
Пример:
<a href="/images/program.jpg" download>
2-ContentEditable
В HTML можно редактировать любой элемент. С помощью некоторых обработчиков событий JavaScript вы можете превратить свою веб-страницу в полноценный и быстрый редактор форматированного текста. Когда для HTML элемента установлен атрибут contenteditable со значением true, становится доступным метод document.execCommand(). Это позволяет запускать команды для управления содержимым редактируемой области.
Пример:
<div contenteditable="true">
This text can be edited by the user.
</div>
3-Multiple
Атрибут multiple является логическим атрибутом. Если он присутствует, он указывает, что пользователь может выбрать сразу несколько вариантов.
Пример:
<label for="tech">Choose a technology:</label>
<select name="tech" id="tech" multiple>
<option value="angular">Angular</option>
<option value="react">React</option>
<option value="vue">vue</option>
</select>
<!-- or -->
<input type="file" multiple>
4-Poster
Атрибут poster указывает изображение, пока видео загружается или пока пользователь нажимает кнопку воспроизведения. Если он не включен, вместо него будет использоваться первый кадр видео.
Пример:
<video poster="/gif/poster.gif">
<source src="trailer.mp4" type="video/mp4">
</video>
5-Hidden
Атрибут hidden является логическим атрибутом. Когда они присутствуют, браузеры не будут отображать элементы с указанным атрибутом hidden.
Пример:
<p hidden>You won't see me on the browser, only developers can!</p>
6-Accept
Атрибут accept определяет фильтр для каких типов файлов пользователь может выбрать из диалогового окна ввода файла. Атрибут accept может быть использован только с <input type="file">.
Пример:
<form action="/...">
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">
<input type="submit">
</form>
<!-- or -->
<input type="file" accept=".jpg, .png" >
