Атрибуты так же важны, как теги в HTML

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

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

1. Принять

Как вы знаете, HTML позволяет нам создавать входные данные, куда вы можете загружать свои файлы. Кроме того, HTML-атрибут accept используется при загрузке, чтобы указать типы файлов или единственный формат, который пользователь может загрузить на сервер.

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

Упомянутый выше элемент ввода будет принимать файлы только с расширениями jpg и png.

2. Несколько

Когда установлен логический атрибут множественный , это указывает на то, что элемент управления формы принимает одно или несколько значений. Действительно для типов email и file input, а также <select>, способ, которым пользователь выбирает несколько значений, определяется элементом управления формы.

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

Если для типа ввода электронной почты установлено значение «Несколько», пользователь может ввести ноль (если это также не требуется), один или несколько адресов электронной почты, разделенных запятыми.

<input type="email" multiple name="emails" id="emails">

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

Если для типа ввода файла задано значение несколько, пользователь может выбрать один или несколько файлов. Пользователь может выбрать несколько файлов из средства выбора файлов любым способом, разрешенным его платформой (например, удерживая нажатой клавишу Shift или Control, а затем щелкая мышью).

<input type="file" multiple name="uploads" id="uploads">

Когда атрибут опущен, пользователь может выбрать только один файл на <input>.

Атрибут multiple элемента <select> представляет элемент управления для выбора нуля или более параметров из списка параметров. В противном случае элемент <select> является элементом управления, позволяющим выбрать один <option> из списка вариантов. Большинство браузеров будут отображать окно с прокруткой вместо выпадающего списка с одной строкой, если указано несколько.

3. Скачать

Когда пользователь щелкает гиперссылку, HTML-атрибут download используется для загрузки элемента. Он используется только в том случае, если установлен атрибут href . Значением атрибута будет имя загружаемого файла. Если значение отсутствует, используется исходное имя файла. Он появляется в элементах <a> и <area>.

<a href="img.png" download="img.png">Download Now</a>

Нажав на ссылку Загрузить сейчас, сгенерированную вышеуказанным элементом HTML, пользователь сможет загрузить файл img.png.

4. Перевести

Атрибут translate — это перечисляемый атрибут, который указывает, должны ли переводимые значения атрибута элемента и дочерние узлы Text быть переведены при локализации страницы.

Это может быть любое из следующих значений:

  • Элемент должен быть переведен при локализации страницы, если строка пустая или yes.
  • no, указывающее, что элемент не следует переводить.

Хотя не все браузеры распознают этот атрибут, он учитывается системами автоматического перевода, такими как Google Translate, а также может учитываться инструментами человеческого перевода. В результате крайне важно, чтобы веб-авторы использовали этот атрибут для определения контента, который не следует переводить.

<p translate="no">Medium</p>

5. Плакат

HTML-атрибут poster используется для отображения изображения во время загрузки видео или когда пользователь нажимает кнопку воспроизведения. Если это изображение не указано, то в качестве постера будет использоваться первый кадр видео. Это как миниатюра YouTube.

Этот атрибут используется с элементом <video>.

<video poster="thumbnail.jpg" controls>
    <source src="file.mp4" type="file/mp4">
</video>

Это для этой статьи. Надеюсь, вы сегодня узнали что-то новое. Чтобы прочитать больше подобных статей, следите за обновлениями!

Спасибо за прочтение!

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.