7 полезных HTML-атрибутов, о которых вы, возможно, не знаете

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



Некоторые атрибуты общеизвестны, а вот о некоторых кое-кто, возможно, и не знает. Сегодня мы поговорим о таких вот малоизвестных HTML-атрибутах.

1. Accept

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

Например, можно сделать так, чтобы поле позволяло бы выбирать только файлы с расширениями .jpg и .png:

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

Поэкспериментировать с атрибутом accept можно в этом CodePen-проекте. Этот же проект демонстрирует применение атрибута, который описан в следующем разделе.

2. Multiple

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

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

Вот пример:

<input type="file" multiple />

3. Contenteditable

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

<div>
      <h1> Employees: </h1>
      <ul contenteditable="true">
        <li> 1. John </li>
        <li> 2. Mehdi </li>
        <li> 3. James </li>
      </ul>
  </div>

Вот соответствующий интерактивный пример на CodePen.

4. Download

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

Вот пример:

<div>
 <a href="index.html" download="fileName">Download this</a>
</div>

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

Вот пример.

5. Translate

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

Этот атрибут применим, например, в элементах, используемых для вывода названий компаний, которые, при переводе остального содержимого страницы, переводить не нужно. Он может принимать значения yes (переводить) и no (не переводить)

Вот как им пользоваться:

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

6. Poster

Атрибут poster применим к элементам

Изображение picture.jpeg будет выводиться до тех пор, пока не будет нажата кнопка запуска воспроизведения видео.

7. Pattern

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

Вот как атрибуты pattern и title используются при описании поля, предназначенного для ввода трёхбуквенного кода страны:

<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>

Пример использования атрибута pattern можно найти здесь.

Итоги

Как видите, HTML-атрибуты могут принести веб-разработчику много пользы. Они позволяют оснащать обычные HTML-элементы дополнительными возможностями. Поэтому советую вам как следует освоить HTML-атрибуты, не ограничиваясь теми, о которыми мы тут говорили.

Бывало ли так, что вы узнавали о некоем HTML-атрибуте только после того, как другими способами реализовывали предоставляемые им возможности?