6 отличных, экономящих время атрибутов HTML

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

Однако непонятные атрибуты не обязательно являются менее полезными. Многие менее известные атрибуты похожи на ярлыки — они могут сэкономить вам много времени и упростить вашу жизнь программиста.

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

1. Атрибут автофокуса

Атрибут autofocus — это атрибут, который вы можете присвоить элементу <input> , <textarea> или <button> в вашем HTML. Включение этого атрибута приведет к «автоматической фокусировке» элемента, то есть позволит начать мгновенный ввод текста (в случае текстового поля) или нажать клавишу «Ввод» (в случае кнопки).

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

использование

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

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

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

Помимо экономии времени для ваших пользователей, атрибут autofocus также экономит время для вас, как для кодера. Если бы его не было, вам нужно было бы написать одну или две строки JavaScript для достижения того же эффекта. Я не знаю о вас, но я нахожу атрибут намного проще и быстрее.

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

2. Атрибут заполнителя

Атрибут placeholder также работает с элементами <input> и <textarea> . Как и атрибут value атрибут placeholder отображает текст по умолчанию в поле, но в отличие от атрибута value , текст автоматически очищается, как только вы начинаете печатать, и текст не отправляется вместе с формой, если вы не вводите какой-либо свой текст.

использование

  <input type = "text" placeholder = "Адрес электронной почты" />
 <textarea placeholder = "Message"> </ textarea> 

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

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

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

Live Demo

  <input type = "text" spellcheck = "false" /> <! - Проверка орфографии отключена ->
 <textarea spellcheck = "true"> </ textarea> <! - Проверка орфографии включена -> 

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

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

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

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