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

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

1. Атрибут autofocus

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

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

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

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

2. Атрибут placeholder

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

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

Демо

3. Атрибут spellcheck

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

Демо

4. Атрибут Maxlength

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

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

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

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

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

Демо

5. Атрибут reversed

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

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

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

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

Демо

1. Количество элементов списка является стартовым числом,
2. и тогда отсчет &%238230;
3. &%238230; 1.

6. Атрибут start

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

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

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

Демо

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

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

7. Атрибут Contenteditable

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

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

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

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

Демо

Вы можете редактировать этот текст!

В заключение

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

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