Атрибут list в HTML


Содержание

HTML Attributes

Атрибуты предоставляют дополнительную информацию о HTML-элементах.

Атрибуты HTML

  • Все элементы HTML могут иметь атрибуты
  • Атрибуты предоставляют Дополнительные сведения об элементе
  • Атрибуты всегда указываются в начальном теге
  • Атрибуты обычно поставляются в парах «имя/значение», например: name=»value»

Атрибут href

Пример

Вы узнаете больше о ссылках и тег далее в этом учебнике.

Атрибут src

HTML-образы определяются тегом .

Имя файла источника изображения указывается в атрибуте src :

Example

Атрибуты ширины и высоты

Изображения в HTML имеют набор атрибутов size, который определяет ширину и высоту изображения:

Пример

Размер изображения указан в пикселях: w , означает 500 пикселей в ширину.

Вы узнаете больше об изображениях в наших HTML-изображениях Глава.

The alt Attribute

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

Значение атрибута может быть прочитано программами чтения с экрана. Таким образом, кто-то «прослушивание» на веб-странице, например, слепой человек, может «слышать» элемент.

Пример

Атрибут alt также полезен, если изображение не существует:

Пример

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

Атрибут style

Атрибут style используется для указания стиля элемента, например цвета, шрифта, размера и т. д.

Пример

I am a paragraph

Вы узнаете больше о стилизации позже в этом учебнике, и в нашем Учебник по CSS.

Атрибут lang

Язык документа может быть объявлен в теге .

Язык объявляется с атрибутом lang .

Объявление языка важно для приложений специальных возможностей (программы чтения с экрана) и поисковых систем:

Атрибуты и свойства

Когда браузер загружает страницу, он «читает» (также говорят: «парсит») HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.

Например, для такого тега у DOM-объекта будет такое свойство body. .

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

DOM-свойства

Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.

DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.

Например, создадим новое свойство для document.body :

Мы можем добавить и метод:

Также можно изменять встроенные прототипы, такие как Element.prototype и добавлять новые методы ко всем элементам:

Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:

  • Им можно присвоить любое значение.
  • Они регистрозависимы (нужно писать elem.nodeType , не elem.NoDeTyPe ).

HTML-атрибуты

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

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.

Пожалуйста, учтите, что стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут «type» является стандартным для элемента (HTMLInputElement), но не является стандартным для (HTMLBodyElement). Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

Мы можем увидеть это на примере ниже:

Таким образом, для нестандартных атрибутов не будет соответствующих DOM-свойств. Есть ли способ получить такие атрибуты?

Конечно. Все атрибуты доступны с помощью следующих методов:

  • elem.hasAttribute(name) – проверяет наличие атрибута.
  • elem.getAttribute(name) – получает значение атрибута.
  • elem.setAttribute(name, value) – устанавливает значение атрибута.
  • elem.removeAttribute(name) – удаляет атрибут.

Этим методы работают именно с тем, что написано в HTML.

Кроме этого, получить все атрибуты элемента можно с помощью свойства elem.attributes : коллекция объектов, которая принадлежит ко встроенному классу Attr со свойствами name и value .

Вот демонстрация чтения нестандартного свойства:

У HTML-атрибутов есть следующие особенности:

  • Их имена регистронезависимы ( id то же самое, что и ID ).
  • Их значения всегда являются строками.

Расширенная демонстрация работы с атрибутами:

Пожалуйста, обратите внимание:

  1. getAttribute(‘About’) – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
  2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение «123» .
  3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML .
  4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value .

Синхронизация между атрибутами и свойствами

Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

В примере ниже id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:

Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную:

  • Изменение атрибута value обновило свойство.
  • Но изменение свойства не повлияло на атрибут.

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

DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип:

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом:

Хотя большинство свойств, всё же, строки.

При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash .

Если же нужно значение href или любого другого атрибута в точности, как оно записано в HTML, можно воспользоваться getAttribute .

Нестандартные атрибуты, dataset

При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Во-первых, давайте посмотрим, полезны они или нет? Для чего они нужны?

Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.


Также они могут быть использованы, чтобы стилизовать элементы.

Например, здесь для состояния заказа используется атрибут order-state :

Почему атрибут может быть предпочтительнее таких классов, как .order-state-new , .order-state-pending , order-state-canceled ?

Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто:

Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.

Чтобы избежать конфликтов, существуют атрибуты вида data-*.

Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset .

Например, если у elem есть атрибут «data-about» , то обратиться к нему можно как elem.dataset.about .

Атрибуты, состоящие из нескольких слов, к примеру data-order-state , становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState .

Вот переписанный пример «состояния заказа»:

Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.

Итого

  • Атрибуты – это то, что написано в HTML.
  • Свойства – это то, что находится в DOM-объектах.
Свойства Атрибуты
Тип Любое значение, стандартные свойства имеют типы, описанные в спецификации Строка
Имя Имя регистрозависимо Имя регистронезависимо

Методы для работы с атрибутами:

  • elem.hasAttribute(name) – проверить на наличие.
  • elem.getAttribute(name) – получить значение.
  • elem.setAttribute(name, value) – установить значение.
  • elem.removeAttribute(name) – удалить атрибут.
  • elem.attributes – это коллекция всех атрибутов.

В большинстве ситуаций предпочтительнее использовать DOM-свойства. Нужно использовать атрибуты только тогда, когда DOM-свойства не подходят, когда нужны именно атрибуты, например:

  • Нужен нестандартный атрибут. Но если он начинается с data- , тогда нужно использовать dataset .
  • Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.

Задачи

Получите атрибут

Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

Using HTML Attributes: List of the Most Common Attributes Explained

TL;DR – HTML attributes are additional values used to customize HTML elements.

Contents

What is an Attribute in HTML

In HTML, attributes can be applied to basically any element. They modify the default behavior of the element or specify certain characteristics (e.g., dimensions):

HTML attributes come in four basic types:

How to Write HTML Attributes

HTML attributes are always included in the opening tag. The syntax is rather simple:

As you can see, attributes are specified in name-value pairs:

  • name defines the name for the HTML attribute
  • value specifies the value you wish to set for it

HTML attributes are case-insensitive. However, World Wide Web Consortium recommends to write them in lowercase for a neater look.

Note: don’t forget to encase the value in quotes.

Работа с input: подборка полезных решений на HTML и CSS

В рамках работы над полями ввода (input) существуют не всегда очевидные и, как правило, редко используемые CSS-приёмы и HTML-атрибуты, позволяющие без использования JavaScript преобразовать внешний вид элементов формы и позаботиться об их юзабилити. Вниманию читателя представляется небольшая подборка таких «фишек» — как уже давно применяемых, так и относительно новых, ещё не поддерживаемых всеми браузерами.

Не смотря на кажущуюся тривиальность, описываемые ниже решения далеко не всегда применяются в процессе создания различных форм ввода на сайте. Список включает в себя наиболее необычный по мнению автора CSS-код, решающий разрозненные задачи — от изменения цвета каретки до затенения символов в поле.

Стиль выделения ошибок

Стандартное уведомление об ошибках в словах, введенных в поле ввода, представляет собой волнистое подчеркивание. CSS4 позволит установить иной способ выделения орфографических и грамматических ошибок — посредством новых псевдоэлементов — ::spelling-error и ::grammar-error . На текущий момент изменить оформление ошибок невозможно, так как эти псевдоэлементы не поддерживаются браузерами, однако их появление — лишь вопрос времени.

Указанные селекторы будут ограничены следующим набор свойств: color , background-color , cursor , caret-color , outline , text-decoration , text-shadow и text-emphasis .

Стиль выделения текста

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

Для ::selection есть пара нюансов, относящихся не только к input :

  • Браузеры на движке Webkit добавляют прозрачность к цвету, указанному в свойствах color и background-color, в результате чего фактический цвет выделения не соответствует заданному в CSS, поэтому их значение следует преобразовывать в формат rgba() с альфа-каналом 0.996 (255/256). При этом манипуляции со свойством opacity не приносят никакого эффекта;
  • Firefox не применяет стиль для картинок, поэтому они всегда выделяются стандартной синей заливкой.

С учетом особенностей Webkit цвета при выделении рекомендуется задавать следующим образом:

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

Добавление эллипсиса

Когда ширина текстового содержимого обычного input type=»text» больше его фактической ширины, текст по умолчанию обрезается по правому краю и появляется возможность горизонтальной прокрутки. Чтобы сделать обрезку текста визуально привлекательнее через многоточие (эллипсис), следует применить text-overflow :

Удаление лишних элементов внутри полей в IE

Начиная с версии 10 в Internet Explorer такие типы полей как text или password по умолчанию содержат внутри себя дополнительные элементы, вставляемые браузером для улучшения юзабилити, — иконку очистки поля (крестик) и отображения пароля (глаз). Они легко удаляются благодаря соответствующим псевдоэлементам:

Удаление желтого фона при автозаполнении полей

В Webkit после автозаполнения (как правило, форм с логином и паролем) поля приобретают желтый фон и черный цвет текста, которые добавляются непосредственно стилями браузера:

Переопределить данные правила невозможно, поэтому в качестве решения по удалению фона и указанию другого цвета текста предлагается сочетание свойств box-shadow и -webkit-text-fill-color :

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

Удаление стрелки в поле с datalist

При использовании атрибута list (подробнее рассмотрен ниже) в браузерах Webkit к input добавляется иконка в виде стрелки, указывающая на возможность выбора значений из выпадающего списка. За отображение иконки отвечает специальный псевдоэлемент, который может быть скрыт:

Увеличение затенённых символов пароля

Как известно, вводимые в input type=»password» данные затеняются другими символами (как правило, маской служит астериск или черный круг). В Webkit размер этих символов значительно меньше, чем в остальных браузерах. Для их увеличения рекомендуется использовать для поля с паролем шрифт более жирного начертания. Из безопасных шрифтов на эту роль хорошо подходит Verdana, а так как изменения необходимы только для Webkit, селектор можно обернуть в специфический @media :

Затенение символов в поле ввода

Если для поля, отличного от типа password, требуется создать маску, т. е. затенить вводимые символы, стоит прибегнуть к свойству text-security . Оно принимает значения circle , disc , none или square , но, к сожалению, на сегодняшний день доступно только для Webkit с соответствующим префиксом:

Подобное затенение может понадобиться, например, для ввода номера телефона, пин-кода и прочих важных данных, которые пользователь предпочел бы скрыть от посторонних глаз.

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

Полезные HTML-атрибуты

Среди множества атрибутов input следует подробнее остановиться на autofocus , inputmode , autocapitalize и list , основной целью которых служит улучшение юзабилити форм. Они не так популярны среди прочих, а их функции в отдельных случаях заменяются JS-кодом.

Стоит так же отметить, что несмотря на все атрибуты и способы стилизации, возможности стандартного текстового поля сильно ограничены. Если требуется создать многофункциональную область ввода аналогичную тем, что используются в месседжерах и социальных сетях, например, input со вставкой emoji, следует прибегнуть к помощи HTML5-атрибута contenteditable.

Автофокус на элементе формы

Атрибут autofocus позволяет заранее сфокусироваться на элементе формы, что в определенных ситуациях является прекрасной альтернативой методу HTMLElement.focus() в JS:

Предопределение формата вводимых в поле данных

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

«Некоторые устройства, в частности с виртуальными клавиатурами, могут предоставлять пользователю несколько методов ввода. Например, при вводе номера кредитной карты пользователь захочет видеть только клавиши для цифр 0−9, тогда как при вводе имени предпочтительнее работать с полем, которое автоматически начинает каждое слово с заглавной буквы». Спецификация HTML

Для этих целей существует атрибут inputmode , сигнализирующий браузеру о том, клавиатуру какого именно формата использовать при вводе данных. Несмотря на большую полезность, из всех браузеров его полноценно поддерживает (включая элементы с contenteditable ) только Google Chrome самых свежих версий, а Opera и Firefox — через флаги.

Атрибут inputmode применяется на input с типами text , password , email или url и согласно спецификации содержит следующие возможные значения:

  • none — запрет на отображение клавиатуры;
  • text — текст, соответствующий языку пользователя;
  • tel — телефонный формат, содержащий цифры 0−9, знак решётки и астериска, — аналог input type=»tel» ;
  • url — формат URL, где присутствуют слеш, точка и элементы автозаполнения вроде «www.» или «.com», — аналог input type=»url» ;
  • email — формат для электронной почты с наличием символа «собака» и точки — аналог input type=»email» ;
  • numeric — только цифровая клавиатура — аналог input type=»number» ;
  • decimal — цифровая клавиатура, адаптированная для ввода дробных значений с точкой или запятой;
  • search — клавиатура, оптимизированная для поиска и, как правило, содержащая соответствующую иконку ввода.

Кроме вышеперечисленных значений браузеры так же принимают:

  • verbatim — дословный ввод букв и цифр, при котором, как правило, не применяется автокоррекция введённых данных, что полезно для имён пользователей или паролей;
  • latin — латинский алфавит, как правило, с предикативным вводом, служащий для взаимодействия между пользователем и компьютером (например, поиск данных);
  • latin-name — latin, но для ввода имён;
  • latin-prose — latin, предназначенный для взаимодействия пользователя с другими пользователями и поэтому содержащий более широкий набор возможностей ввода (например, встроенные смайлы);
  • full-width-latin — latin-prose с добавлением дополнительных пользовательских языков;
  • kana и katakana — служат для ввода текста на японском языке;


Для большей «пуленепробиваемости» атрибут inputmode рекомендуется применять вместе с соответствующим type , который должен отражать семантически верный тип данных, и, если необходимо, pattern , являющийся дополнительной подсказкой браузеру о том, какие данные следует считать верными:

Перевод вводимых данных в верхний регистр букв

Атрибут autocapitalize позволяет выполнять для виртуальной клавиатуры автоматический перевод данных поля в верхний регистр. Он применяется для textarea , а также для полей с типами text или search и может иметь следующие значения:

  • off или none — перевод в верхний регистр не осуществляется (по умолчанию);
  • characters — для символов (артикулы, различные коды);
  • words — для слов (имена, адреса, названия организаций);
  • sentences — для предложений (полезно для textarea , где контент должен представляться как абзац текста);

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

Стоит отметить, что как и inputmode , этот атрибут не будет оказывать на данные никакого эффекта в desktop-версиях. Информации о поддержке мобильными браузерами autocapitalize крайне мало, однако по публикациям на официальных сайтах следует, что атрибут работает как минимум в Safari и Google Chrome.

Добавление готовых вариантов для ввода

Юзабилити полей можно улучшить, если предложить пользователю выбрать заданное значение из списка готовых через атрибут list и дополняющий его элемент datalist . Отличие от традиционного select заключается в том, что поле доступно для редактирования и ввода любых значений, а предлагаемые варианты — элементы option — показываются либо по желанию пользователя, либо во время ввода при условии частичного совпадения по первым (и далее) символам. Это отличное решение в тех случаях, когда вводимые данные можно предугадать засчёт ограниченного количества вариантов.

Для добавления в поле доступных опций в его атрибуте codelist указывается идентификатор списка, которым, в свою очередь, должен обладать datalist :

Атрибут list в HTML

Learn HTML Code, Tags & CSS

Sharing is caring!

Code Example

Using the list attribute

The list attribute identifies a separate element (by id ), which provides a set of pre-defined “auto-complete” options.

list vs. vs. autocomplete

It can be easy to mix up these different styles of user input, as they each do something similar. However, nce you understand the differences, it will be easy to select the appropriate one for any situation. The element provides several which the user must select between. The user may not enter anything that is not provided for in the list of options. The difference here between using a element and an element with a is that with a , the user is free to reject any of the options in the list and enter a free string. The options in the list are simply suggestions. The autocomplete attribute allows the browser to provide autocomplete suggestions based on the user’s inputs to other forms on other websites — for example, the user’s own name, email address, or contact information. In contrast to that, the lets the website itself suggest options. This can be useful for things like tags and search terms. In both cases ( autocomplete or ), the user is free to reject the suggestions and enter whatever they like into the input field.

Buggy implementation

The list and input combination are powerful UX tools for form usability. Unfortunately, the implementation in various browsers is a bit buggy. As of this writing:

  • Support in both Internet Explorer and Edge is “extremely buggy”.
  • Chrome and Opera both display unscrollable suggestion lists, which makes very long lists unusable.
  • Firefox mostly works, but does not support use of on non-text inputs.
  • Support in both the desktop and iOS versions of Safari is simply non-existent.

Support for list and is well implemented in both the native Android browser and the Chrome browser app for Android.

Alternative Implementations via JavaScript

If you really need autocomplete suggestions, you probably should not rely on a pure HTML5 solution at this point. Thankfully, the same effect can be created in JavaScript.

  • If you are using jQuery (you probably are), you can try jQuery Autocomplete.
  • If you need a particularly lightweight solution, try Awesomeplete (only 2kb!).
  • If you need a really robust and flexible solution with a lot of options to control, try Twitter’s Typeahead.
  • For HTML5 mobile apps (built in something like PhoneGap), you may want a fully integrated forms solution. In that case, you should look at jQuery UI, which includes an autocomplete feature.

HTML — Lists

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain −

− An unordered list. This will list items using plain bullets.

− An ordered list. This will use different schemes of numbers to list your items.

− A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML tag. Each item in the list is marked with a bullet.

Example

This will produce the following result −

The type Attribute

You can use type attribute for

    tag to specify the type of bullet you like. By default, it is a disc. Following are the possible options −

Example

Following is an example where we used

This will produce the following result −

Example

Following is an example where we used

This will produce the following result −

Example

Following is an example where we used

This will produce the following result −

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with
.

Example

This will produce the following result −

The type Attribute

You can use type attribute for

    tag to specify the type of numbering you like. By default, it is a number. Following are the possible options −

Example

Following is an example where we used

This will produce the following result −

Example

Following is an example where we used

This will produce the following result −

Example

Following is an example where we used

This will produce the following result −

Example

Following is an example where we used

This will produce the following result −

Example

Following is an example where we used

This will produce the following result −

The start Attribute

You can use start attribute for

    tag to specify the starting point of numbering you need. Following are the possible options −

Example

Following is an example where we used

This will produce the following result −

HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

  • − Defines the start of the list
  • − A term
  • − Term definition
  • − Defines the end of the list

Введение в формы HTML5 и новые атрибуты

Дата публикации: 2013-03-28

От автора: несомненно, вы каждый день взаимодействуете в Сети по меньшей мере с одной формой. Занимаетесь ли вы поиском контента, или входите в свой аккаунт на странице Facebook’а – в вебе применение онлайн-форм является одной из самых обычных задач. Для дизайнеров и разработчиков создание форм отличается некоторым однообразием, особенно написание для них скриптов валидации данных. HTML5 представляет множество новых атрибутов, типов input и прочих элементов инструментария разметки.

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


Станет видно, что новые свойства значительно облегчат нам жизнь при произведении впечатления на пользователей. Что тут самое привлекательное? Применять их можно уже сейчас. Мы начнем с очень краткой истории форм HTML5.

Эта статья – отрывок из Главы 6 книги Начинаем изучать HTML5 и CSS3: Эволюция Сети (Beginning HTML5 and CSS3: The Web Evolved) Кристофера Мерфи, Оли Стадхольма, Ричарда Кларка и Дивья Маньяна (Christopher Murphy, Oli Studholme, Richard Clark и Divya Manian), опубликованной издательством Apress.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

История форм HTML5

Раздел форм в HTML5 изначально был спецификацией под названием Web Forms 2.0, где добавлялись новые типы инструментов управления формами. Начатая в Opera и редактировавшаяся тогдашним сотрудником Opera Айэном Хиксоном (Ian Hickson), она была утверждена W3C в начале 2005г. Работа изначально проводилась W3C. Затем ее объединили со спецификацией Web Applications 1.0 с целью создания основы спецификации HTML5 отколовшейся рабочей группы Web Hypertext Application Technology Working Group (WHATWG).

Применение принципов дизайна HTML5

Одна из лучших характеристик форм HTML5 – то, что сразу же можно применять почти все новые типы ввода данных и атрибуты. Им не требуются никаких дополнительных фишек, хаков и прочих заплаток. Не то, чтобы они все уже «поддерживались», но в современных браузерах, которые по-настоящему их поддерживают, они способны проделывать классные вещи – и красиво деградировать в тех браузерах, которые их не понимают. Все это – благодаря дизайнерским принципам HTML5. В данном случае мы особо ссылаемся на принцип красивой деградации. В целом, непростительно не начать сразу применять эти функции. Фактически это будет значить, что вы находитесь впереди планеты всей.

Атрибуты форм HTML5

В этой статье мы рассмотрим 14 следующих новых атрибутов.

placeholder

Первым идет атрибут placeholder, который позволяет нам установить текст-заполнитель, что до последнего времени делалось в HTML4 с помощью атрибута value. Его можно применять только для коротких описаний. Для более длинных применяйте атрибут title. Различие с HTML4 состоит в том, что текст показывается, только когда поле пустое и не в фокусе. Как только поле попадает в фокус (например, при щелчке мышью или указании на поле), и вы начинаете печатать, текст просто исчезает. Очень похоже на поле поиска в Safari.

Давайте разберемся, как выполнять атрибут placeholder.

Вот так! Я слышу, как вы думаете: «Что такого в нем примечательного? Я всю жизнь делал это в JavaScript’е». Да, верно. Однако с HTML5 он становится частью браузера, означая, что требуется писать меньше скрипта для достижения более доступного кроссбраузерного решения (даже при отключенном JavaScript’е). На рисунке показана работа атрибута текста-заполнителя в Chrome’е.

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

Примечание: Для назначения стилей тексту-заполнителю не существует официального псевдокласса, но и Mozilla (создатели Firefox), и WebKit предлагают для свойств стилей вендорные префиксы (-mozplaceholder и –webkit-input-placeholder). Можно с уверенностью предполагать, что псевдокласс станет стандартом стилей текста-заполнителя. Подробности можно узнать из тематической дискуссии по этому вопросу в списке рассылки WHATWG.

autofocus

Автофокус делает в точности то, что означает. Добавлении его к input автоматически фокусирует поле при отображении страницы. Как и в случае с placeholder’ом, в прошлом для autofocus’а мы применяли JavaScript.

Однако у традиционных методов JavaScript’а имеются серьезные проблемы юзабилити. Например, если пользователь начинает заполнять форму до полной загрузки скрипта, он будет (неприятно) возвращен после загрузки к первому полю формы. Атрибут autofocus в HTML5 обходит эту проблему, фокусируясь по мере загрузки документа, при этом не нужно ждать загрузки JavaScript’а. Однако мы рекомендуем применять его для предотвращения проблем с юзабилити только для тех страниц, чья единственная цель – форма (типа Google’а).

Это – булев атрибут (за исключением случаев, когда вы пишете XHTML5; смотрите примечание) и выполняется как здесь:

5. HTML — Атрибуты

Вы уже знакомы с несколькими html-тегами и их использованием, например теги заголовков

, или тег абзаца

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

Атрибут — используется для определения характеристик html-элемента и помещается внутри открытого тега элемента. Все атрибуты состоят из двух частей — это имя и значение:

    Имя — это свойство, которое Вы хотите установить. Например, элемент абзаца

, в примере ниже, содержит атрибут align, который Вы можете использовать для указания выравнивания абзаца на странице.

  • Значение — это значение, которое Вы хотите установить для свойства. Значение атрибута всегда помещается в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right.
  • Имена и значения атрибутов в HTML не зависят от регистра. Однако консорциум World Wide Web (W3C) рекомендует в своей рекомендации HTML 4 использовать атрибуты и значения атрибутов в нижнем регистре.

    Пример

    Получим следующий результат:

    Содержание

    Основные атрибуты HTML

    Существует четыре основных атрибута в HTML, которые могут использоваться для большинства html-элементов (хотя и не для всех):

    Атрибут id

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

    • Если элемент содержит атрибут id как уникальный идентификатор, то можно идентифицировать только этот элемент и его содержимое.
    • Если на веб-странице (или в таблице стилей) есть два элемента с одним и тем же именем, Вы можете использовать атрибут id для различения элементов, имеющих одно и то же имя.

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

    Атрибут title

    Атрибут title — дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.

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

    Пример

    Получим следующий результат:

    Теперь попробуйте навести курсор на «Пример заголовка», и Вы увидите, что title, который Вы использовали в вашем коде, выйдет как подсказка курсора.

    Атрибут class

    Атрибут class — используется для связывания элемента со списком стилей и задает класс элементу. Вы узнаете больше об использовании атрибута class, когда изучите CSS (каскадные таблицы стилей). Так что пока можете это пропустить.

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

    Атрибут style

    Атрибут style — позволяет указывать правила каскадной таблицы стилей (CSS) внутри элемента.

    Получим следующий результат:

    На данный момент мы не изучаем CSS, так что давайте продолжим, не беспокоясь о CSS. Здесь Вам нужно понять, какие существуют html-атрибуты, и как их можно использовать при форматировании содержимого.

    Атрибуты интернационализации

    Существует три атрибута интернационализации в HTML, которые доступны для большинства (хотя и не для всех) элементов XHTML.

    Атрибут dir

    Атрибут dir — позволяет указать браузеру направление потока текста. Атрибут dir может принимать одно из двух значений, которые Вы можете видеть в следующей таблице:

    Type Function Supported by
    Required Required for an element to work as intended One or multiple specific elements
    Optional Changes the element’s default functionality One or multiple specific elements
    Global Changes the element’s default functionality All elements
    Event Specifies conditions for a script to run All elements
    Значение Описание
    ltr Слева направо (значение по умолчанию).
    rtl Справа налево (для языков, таких как иврит или арабский, которые читаются справа налево).

    Пример

    Получим следующий результат:

    Когда атрибут dir используется в теге , он определяет, как текст будет представлен во всем документе. При использовании в другом теге он управляет направлением текста только для содержимого этого тега.

    Атрибут lang

    Атрибут lang — позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых xhtml-документах.

    Значения атрибута lang — это стандартные двухсимвольные языковые коды ISO-639. Проверьте коды ISO-639 для языка HTML, перейдите по ссылке для получения полного списка кодов языков.

    Пример

    Атрибут xml:lang

    Атрибут xml:lang — это XHTML замена для атрибута lang. Значение атрибута xml:lang должно быть ISO-639 кодом страны, которые указаны выше.

    Общие атрибуты

    Ниже представлена таблица некоторых других атрибутов, которые можно легко использовать со многими html-тегами.

    Атрибут Опция Функция
    align right, left, center Горизонтальное выравнивание тегов.
    valign top, middle, bottom Вертикально выравнивает тегов внутри html-элемента.
    bgcolor числовые, шестнадцатеричные, RGB значения Помещает фоновый цвет за элемент.
    background URL Помещает фоновое изображение за элемент.
    id определяется пользователем Именование элемента для использования с каскадными таблицами стилей.
    class определяется пользователем Классифицирует элемент для использования с каскадными таблицами стилей.
    width числовое или процентное значение Задает ширину таблиц, изображений или ячеек таблицы.
    height числовое или процентное значение Задает высоту таблиц, изображений или ячеек таблицы.
    title определяется пользователем «Всплывающий» заголовок элементов.

    Мы ещё увидим соответствующие примеры атрибутов при изучении других html-тегов (полный список html-тегов и связанных атрибутов).

    Атрибут list в HTML

    Мало кто любит терминологию и формальности, но, к счастью, в мире HTML все довольно просто.

    1. Страница состоит из элементов.
    2. Элемент — это набор из тегов и содержания.
    3. Теги чаще всего идут парами: открывающий ( ) и закрывающий ( ). Между ними находится то, что попадает под действие этого элемента.
    4. Открывающий тег может содержать дополнительную информацию — атрибуты и значения атрибутов. Атрибуты позволяют «настроить» тег.

    В примере из предыдущего урока есть элемент a (anchor — якорь), состоящий из открывающего и закрывающего тегов .

    Это ссылка, и у неё есть атрибут href со значением https://ru.hexlet.io . Между открывающим и закрывающим тегами находится содержание — слово «Хекслет». Именно оно становится ссылкой.

    А ниже есть картинка. Это пример одиночного тега, элемента, в котором не нужен закрывающий тег. Их еще называют self-closing element — «само-закрывающиеся элементы».

    Как видите, мы указали атрибут src (от английского «source» — источник) со значением https://i.imgur.com/789p0uP.png . Это адрес файла изображения.

    А некоторые элементы состоят из нескольких вложенных элементов. Например, списки:

    Это — пронумерованный список (ordered list), поэтому тег называется

      . А каждая строчка списка — это элемент списка (list item) —
      .

    На странице это будет выглядеть примерно так:

    1. Код. Тайный язык информатики (Чарльз Петцольд)
    2. Не заставляйте меня думать (Steve Krug)
    3. Дизайн привычных вещей (Donald Norman)

    А непронумерованный список (unordered list) создается с помощью

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

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

    HTML Codes .ws

    The above example demonstrates usage of the element with the list attribute.

    The list attribute is used to identify an element that lists predefined options suggested to the user. It can be used to provide an «autosuggestion» feature. When the user starts typing a list will drop down with suggestions based on their initial input. As they continue typing, this could narrow down the list of options displayed, depending on the subsequent characters the user types. At any time, the user can select one of the suggested options.

    When using the list attribute, its value must be the ID of a element in the same document. This element provides a list of options for the autosuggestion (using an element for each option).

    Илон Маск рекомендует:  Что такое код pspell_config_runtogether
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL