HTML — это навык, которым должен обладать каждый веб-разработчик. Вы не можете называть себя веб-разработчиком, не зная этого языка разметки. Каждый веб-сайт, который вы видите в Интернете, был построен с использованием HTML, потому что он имеет множество полезных и мощных функций, которыми вы, как разработчик, можете воспользоваться для создания веб-страниц. HTML также имеет атрибуты, которые вы можете прикреплять к элементам или тегам, чтобы добавить определенные интерактивные функции к HTML-элементам.
В этой статье мы предоставим список некоторых полезных атрибутов HTML, о которых вы, вероятно, еще не слышали. Итак, приступим.
1. Accept
Как вы знаете, HTML позволяет создавать поля ввода, в которые вы можете загружать свои файлы. В дополнение к этому атрибут HTML accept используется во входных данных для загрузки, чтобы указать типы файлов или единственный формат, который пользователь может загрузить на сервер.
Например, мы можем принять загрузку на наш сервер только jpg и png. Вот пример:
<input type="file" accept=".jpg, .png" >2. Multiple
Атрибут multiple в HTML можно прикрепить к тегам input и select. Это в основном позволяет пользователю вводить несколько значений.
Например, мы также можем использовать атрибут multiple во входных данных для загрузки HTML, чтобы пользователь мог загружать несколько файлов. Вот пример кода:
<input type="file" multiple />
3. Contenteditable
Атрибут contenteditable используется, чтобы сделать HTML-контент доступным для редактирования на веб-странице. Это в основном позволяет пользователю редактировать элементы страницы, которые имеют атрибут contenteditable. Вот пример:
<div>
<h1> Employees: </h1>
<ul contenteditable="true">
<li> 1. John </li>
<li> 2. Mehdi </li>
<li> 3. James </li>
</ul>
</div>
4. Download
Атрибут download в HTML указывает, что ссылки будут загружаться, когда пользователь нажимает на них. Этот атрибут позволяет пользователям скачивать файлы с вашего сайта. Вот пример:
<div>
<a href="index.html" download="fileName">Download this</a>
</div>
5. Translate
Атрибут translate используется, чтобы указать, нужно ли переводить контент. Его можно прикрепить ко всем тегам HTML, потому что это глобальный атрибут.
Этот атрибут можно использовать, например, в текстовых логотипах, чтобы сохранить одно и то же название бренда при переводе страницы на другой язык.
<p translate="no">Mehdi</p>
6. Poster
Атрибут poster используется для отображения изображения во время загрузки HTML-видео или до тех пор, пока пользователь не нажмет кнопку воспроизведения.
<video poster="picture.jpeg" controls>
<source src="file.mp4" type="file/mp4">
<source src="file.ogg" type="file/ogg">
</video>
7. Pattern
Атрибут pattern позволяет легко добавлять регулярное выражение к элементу ввода внутри формы. Мы также можем использовать другой атрибут title с атрибутом pattern чтобы помочь пользователю написать правильную форму текста на входе.
<form >
<label for="input">Country Code:</label>
<input type="text" id="input" pattern="[A-Za-z]{3}" title="Three letters country code.">
<input type="submit">
</form>
Заключение
Как видите, атрибуты HTML очень полезны и их важно знать. Они позволяют добавлять дополнительные полезные функции к вашим HTML-элементам. Вот почему я бы посоветовал вам узнать больше об атрибутах из других ресурсов. Спасибо, что прочитали эту статью. Я надеюсь, что вы сочли ее полезной.