Редкие атрибуты HTML

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

Атрибут autofocus

К атрибуту autofocus (автофокус), вы можете добавить к нему элементы <input>, <textarea> или <button> в коде HTML.

Атрибут автофокус, будет делать свою работу независимо от того, какое вы ему дадите значение. Boolean, если вы не знаете, относится к концепции, что что-то включено, либо выключено, true или false, там или не там — одно и то же понятие, как двоичный код. Смотрите использование

<input type="text" autofocus /> <!-- Работает с input любого типа -->
<textarea autofocus>Поле для текста</textarea>
<button autofocus>Нажмите здесь!</button>

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

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

Так как атрибут автофокус экономит время для пользователей, также этот атрибут экономит время и для Вас, как код. Без него, вы должны были бы написать две строки JavaScript для достижения того же эффекта.

Атрибут autofocus поддерживается Internet Explorer 10, Google Chrome, Mozilla Firefox и Safari, но опера или старые версии IE не понимают autofocus.

к меню ↑

Атрибут placeholder

Атрибут placeholder (заполненная строка) тоже работает с элементами <input> и <textarea>. Как и значение атрибута, атрибут placeholder отображает текст по умолчанию в поле, но в отличие от значения атрибута, текст автоматически исчезает, как только вы начинаете печатать, но текст не будет отображаться в строке поля, если вы не ввели его. Смотрите использование:

<input type="text" placeholder="Email Address" />
<textarea placeholder="Message"></textarea>

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

Атрибут placeholder поддерживается Opera, Google Chrome, Mozilla Firefox и Safari, но не любой текущей версии Internet Explorer.

Изменить шрифт, цвет и т.д. для подсказывающего текста placeholder, применяется Псевдокласс :placeholder.

к меню ↑

Атрибут spellcheck

Атрибут spellcheck (проверка орфографии) используется, чтобы включить или отключить проверку орфографии браузером. Он принимает значение либо true (чтобы включить проверку правописания) или false (чтобы отключить проверку правописания). Смотрите использование:

<input type="text" spellcheck="false" /> <!-- Запрещает проверку правописания -->
<textarea spellcheck="true"></textarea> <!-- Разрешает проверку правописания -->

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

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

Атрибут spellcheck поддерживается Opera, Google Chrome и Safari, но не в Mozilla Firefox или Internet Explorer.


к меню ↑

Атрибут Maxlength

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

<input type="text" maxlength="8" /> <!-- Работает с input любого типа -->
<textarea maxlength="20"></textarea>

В примере, ограничения для ввода не больше 8-ми символов. Необходимость установить лимит применяется на многих веб-сайтах, например для имени пользователя или длину сообщения или сообщение электронной почты, атрибут maxlength делает именно это.

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

практика показала, проверка на стороне клиента: чтобы обойти безопасности проверку на стороне сервера нужно дополнительное время, необходимое для создания и внедрения

Атрибут maxlength поддерживается всеми пятью основными браузерами. Ура!

к меню ↑

Атрибут reversed

Когда мы используем <ol> что бы пронумеровать список, начиная с 1. Но знаете ли вы, что можно пронумеровать список в обратным порядке с атрибутом reversed?

Атрибут reversed логический, а это означает, что он будет делать свою работу независимо от того, какое значение вы даете ему. Смотрите использование:

<ol reversed="">
    <li>Номер 3</li>
    <li>Номер 2</li>
    <li>Номер 1</li>
</ol>

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

Единственный минус в том, что атрибут reversed, в настоящее время поддерживается только в Google Chrome и Mozilla Firefox.

  1. Количество элементов списка является стартовым числом,
  2. и тогда отсчет …
  3. … 1.
к меню ↑

Атрибут start

Атрибут start (начало) также используется для элемента <ol>, и определяет стартовый номер, кроме номера 1. Смотрите применение:

<ol start="7">
    <li>Номер 6</li>
    <li>Номер 7</li>
    <li>Номер 8</li>
</ol>

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

Атрибут start поддерживается всеми пятью основными браузерами. Ура!

  1. Продолжение списка 1
  2. Продолжение списка 2
  3. Продолжение списка 3
  4. Продолжение списка 4
  5. Продолжение списка 5

Вы даже можете использовать атрибут start вместе с атрибутом reversed! Следующий список начинается с номера 2, а затем подсчитывает в обратном порядке …

  1. Номер 2
  2. Номер 1
  3. Номер 0
  4. Номер -1
  5. Номер -2
к меню ↑

Атрибут Contenteditable

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

Чтобы доказать, что атрибут contenteditable действительно изменил содержимое HTML элемента, найдите элемент в вашем браузера с помощью Инструментов разработчика, и вы увидите, что на самом деле HTML изменился.

Атрибут Contenteditable является глобальным атрибутом, то есть он будет работать на любом элементе HTML. Он может быть использован, для включения или отключения редактирования контента. Он принимает значение либо true (с возможностью редактирования) или false (чтобы отключить редактирования).

<p contenteditable="true"></p> <!-- редактирование контента включено -->
<p contenteditable="false"></p> <!-- редактирование контента отключена -->

В то время как атрибут contenteditable на самом деле не ярлык к чему то, но вы должны согласиться — это стильно.

Атрибут Contenteditable поддерживается всеми пятью основными браузерами. Ура!

Изменить этот текст