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

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

Оглавление:
  1. Атрибут placeholder
  2. Атрибут spellcheck
  3. Атрибут Maxlength
  4. Атрибут reversed
  5. Атрибут start
  6. Атрибут Contenteditable

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

Атрибут 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 поддерживается всеми пятью основными браузерами. Ура!

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