Explaining the “details” and “summary” elements

Элемент (текстовая область)

Для создания больших текстовых полей применяется элемент <textarea>, который в отличие от других элементов формы не является пустым, а следовательно, для него должны быть указаны открывающий и закрывающий теги. Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами. Размеры поля устанавливаются с помощью атрибутов cols и rows.cols — число столбцов видимого текста:

rows — число строк видимого текста:

При этом, если пользователю потребуется ввести в текстовую область больше строк текста, чем указано с помощью атрибута rows, в текстовой области появится вертикальная прокрутка.
При разработке форм для новых проектов используйте правила CSS для установки ширины и высоты текстовой области <textarea>. Однако при просмотре исходного кода сайтов вы еще часто можете встретить атрибуты cols и rows.
При необходимости можно запретить пользователю изменять текст в текстовом поле, например, если поле используется для представления какого-нибудь договора. Такой запрет вводится с помощью атрибута readonly.
В следующем примере представлен вариант создания больших текстовых полей. Первое поле предназначено только для чтения, а во второе поле можно ввести текст:

Пример: Текстовая область (textarea)

Результат
HTML-код
Попробуй сам »

Ознакомтесь с соглашеием:Условия нашего соглашения…
Ваше мнение о этом соглашении:Введите свой комментарий…

Вложенность в БЭМ нейминге

Блоки. Блоки могут быть вложены друг в друга.

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

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

Важно помнить, все элементы внутри блока принадлежат непосредственном этому блоку. Даже если они вложены друг в друга

Не бывает элементов от элементов! Элементы бывают только от блока.

Неправильно:

<div class="card">
  ...
  <div class="card__details">
    <div class="card__details__price">12000 РУБ</div>
    <a class="card__details__reade-more" href="#">Подробнее</a>
  </div>
</div>

Правильно:

<div class="card">
  ...
  <div class="card__details">
    <div class="card__price">12000 РУБ</div>
    <a class="card__reade-more" href="#">Подробнее</a>
  </div>
</div>

Несмотря на то что и вложены в , они все равно являются элементами от блока .

Устаревший и Нежелательный

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

Спецификация HTML 4.01 определяет нежелательные элементы (deprecated), как то, что Вы не должны использовать, но что до сих пор поддерживается браузерами. В свою очередь, устаревшие элементы — это то, что занесено в список только в исторических целях и не поддерживается браузерами.

Спецификация HTML5 даёт новое определение. Термин нежелательный (deprecated) уже не используется, а у терминаустаревший (obsolete) новый смысл. В частности, термин, устаревший, можно применить к элементам или атрибутам, в следствии использования которых возникают предупреждения. Хотя данные элементы не рекомендуемы, вполне возможно, что браузеры будут их поддерживать в течение длительного времени, в соответствии с . Примерами устаревших особенностей являются атрибут элемента и атрибут элемента .

Ещё один пример разницы этих терминов в HTML 4.01 и HTML5: элемент является нежелательным в HTML 4.01, и устарел в HTML5.

Учитывая это, давайте обсудим основную пятёрку устаревших элементов.

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

может использоваться в любом месте в пределах тега . Вот простой пример его использования:

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

Единственное отличие заключается в том, как браузеры отображают этот элемент. Поддерживающие его браузеры, такие как Google Chrome , Safari и последняя версия Opera выводят его с небольшим треугольником сбоку:

Открытое состояние

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

Элемент

применяется вместе с тегом ; два элемента предназначены для совместного использования, но является необязательным.

Так что же происходит, когда вы используете его?

В приведенном выше примере надпись « Подробнее » будет заменена на « Hello World »:

Вложенные элементы

Как уже упоминалось выше, может содержать другие вложенные элементы , например:

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

Назначение стилей для с помощью CSS

Стили для элементов и могут задаваться так же, как и для любых других блочных элементов; выберите их с помощью селектора элемента, класса или идентификатором и создайте блок свойств, чтобы задать стиль для этих элементов:

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

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

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

Стили маркера

А можно ли задать стили для стандартного маркера в виде маленького треугольника? Webkit использует для этой цели псевдо-элемент ::-webkit-details-marker . Благодаря этому мы можем задать для треугольника стили по умолчанию, такие как цвет, цвет фона, а также размер:

К сожалению, заменить треугольник непосредственно через ::-webkit-details-marker невозможно. Единственное работающее решение — это изменить его с помощью ::before или ::after :

Поддержка браузерами

Поддержка браузерами этих двух элементов значительно улучшилась в последние два года. В 2011 и 2012 годах единственным браузером, который мог отображать и , был Google Chrome . Safari и Opera только недавно начали поддерживать эти элементы.

Так как поддержка в Firefox и Internet Explorer до сих пор оставляет желать лучшего, появилось несколько вариантов универсализации, которые имитируют нужный функционал, например, jQuery Details . Хотя это решение и опирается на JQuery , но размер его файла намного меньше, чем аналог библиотеки JQuery UI .

После его реализации, стили треугольника задаются обычным способом:

Заключение

Новый элемент становится все более важен. Когда-нибудь разработка сайтов или веб-приложений с помощью простых виджетов будет меньше зависеть от библиотек JavaScript .

Данная публикация представляет собой перевод статьи « Explaining the “Details” and “Summary” Elements » , подготовленной дружной командой проекта Интернет-технологии.ру

Пользовательские элементы (Custom Elements)

Пользовательские элементы — флагман технологии веб-компонентов. Название говорящее — они позволяют разработчикам создать свои собственные HTML-элементы. Синтаксис версии v0 был громоздким, но сейчас пользовательские элементы в основном опираются на классы ES6. Если вы с ними знакомы, то знаете, как описать новый класс на базе существующего (наследование):

А что, если мы сделаем так?

До недавнего времени это считалось ошибкой. Браузеры запрещали наследовать как встроенный класс , так и любой из его потомков. Custom Elements снимают данное ограничение.

Браузер знает, что тегу соответствует класс , но как он поймет, какой тег сопоставлен пользовательскому элементу? В дополнение к возможности наследования встроенных классов для установки такого соответствия доступно Registry пользовательских элементов:

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

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

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

вызывается при добавлении элемента в документ (в общем случае несколько раз, так как элемент может быть перемещён или удалён и заново добавлен);
— в противоположность ;
срабатывает при модификации атрибутов из специального списка.

Немного более выразительный пример:

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

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

Также необходимо указать в Registry, что мы расширяем существующий тег:

Так как мы расширяем существующий тег, то используем его имя вместо пользовательского. Далее устанавливаем специальный атрибут is, чтобы браузер знал, какой вид кнопки требуется:

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

С этого момента уже можно применять традиционные техники веб-виджетов. Можно установить ряд обработчиков событий, стилизовать элемент и даже повторять его внутреннюю структуру через . Люди могут комбинировать ваш пользовательский элемент с их собственным кодом: через HTML-шаблонизацию, работу с DOM и даже в новомодных фреймворках, некоторые из которых поддерживают пользовательские теги в своих реализациях виртуального DOM. Пользовательские элементы используют стандартные интерфейсы, поэтому они позволяют реализовать действительно переносимые виджеты.

Новые возможности:

Наследование встроенного класса и его подклассов.
Registry пользовательских элементов и для работы с ним.
Специальные методы жизненного цикла для реагирования на создание элемента, вставку в DOM, изменений атрибутов и так далее.

HTML5 — новый подход к разметке: мультимедиа внутри

В отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.

Однако действующий стандарт не предусматривал описания мультимедийного контента средствами самого языка: для этого использовалась функция вставки некоего объекта («object»), возможность воспроизведения которого зависела от того, установлены ли в браузере клиента совместимые с таким контентом дополнительные плагины третьих разработчиков.

Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это — «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.

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

В стандарте HTML5, представляющем собой сочетание собственно HTML, а также CSS и JavaScript, изначально реализуется принципиально иной подход, в котором медиаконтент представляет собой неотъемлемую часть кода страницы. HTML5 обеспечивает единый стандартный способ описания (синтаксис) встраиваемого в страницы аудиовизуального контента.

Для интеграции аудио или видео в HTML5 достаточно использовать простой набор тэгов, описывающих, какой тип контента вы намерены поместить («video» или «audio»), и обычные ссылки на соответствующие медиафайлы.

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

Новый взгляд на элемент

Первый элемент не так нов, как остальные, поскольку потребность в нём возникла раньше идеи веб-компонентов. Иногда нужно просто где-нибудь хранить готовый HTML: может, это некоторая разметка, которую вы повторяете в нескольких местах, или же пока не законченный UI. Элемент содержит HTML-код, парсинг которого происходит без вставок в текущий документ.

Но куда вставляется разобранный HTML, если не в документ? Он добавляется в — легковесную обёртку для хранения фрагмента HTML-документа, которая «растворяется» при вставке в DOM. Эти обёртки полезны для хранения набора элементов, требуемых позже, и выступают в роли контейнера, которым не нужно управлять вручную.

Теперь у нас есть DOM в неком «исчезающем» контейнере, а как им пользоваться?

Оказывается, можно просто вставить фрагмент в текущий документ:

Этот код работает прекрасно за тем исключением, что вы только что удалили контейнер. Если вы запустите код ещё раз, то получите ошибку, так как исчез. Вместо этого сделайте копию фрагмента перед вставкой:

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

Он особенно полезен для задания внутренней структуры компонента, и потому входит в «клуб» веб-компонентов

Тег подходит в любой ситуации, когда требуется повторять некоторую HTML-структуру. Он особенно полезен для задания внутренней структуры компонента, и потому входит в «клуб» веб-компонентов.

7. Когда вы должны их использовать

Когда следует использовать радиокнопки или флажки? Это целиком зависит от того, какой вопрос вы задаете. Если вы хотите, чтобы пользователи выбрали несколько вариантов ответа, используйте флажки. Если хотите, чтобы пользователи выбрали только один вариант, используйте радиокнопки (или другой тип селектора).

Когда использовать радиокнопки

У меня есть четыре правила, когда использовать радиокнопки. Вот они:

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

Сравнение раскрывающегося списка и радиокнопок

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

Вы хотите принудить выбрать один вариант ответа

Когда вы выбираете элемент в списке радиокнопок, вы не можете отменить его выбор. Вы можете выбрать что-то еще и изменить выбор, но вы не можете отменить ответ на вопрос, если уже выбрали его.

Если у вопроса есть только два варианта: да / нет

Если ваш вопрос «Хотите получать уведомления?», «Воспроизвести фоновую музыку?» и т. д., то лучше используйте переключатель. Они занимают гораздо меньше места, являются более понятными, и поскольку это относительно новый тип селектора, они модные.

Сравнение радиокнопок и переключателя

Дополнение к статье после ее публикации:

5. Если хотите, чтобы пользователи нажимали «Сохранить» для применения выбранного варианта

Если вы находитесь на странице настроек или в месте, где вы хотите, чтобы пользователь мог экспериментировать с параметрами, прежде чем он нажмет большую зеленую кнопку «Сохранить»– лучше использовать радиокнопки (или флажки). Однако, если вы хотите, чтобы ваши настройки были применены немедленно (включение / выключение Wi-Fi), лучше используйте переключатель.

Этот вариант предложил _, спасибо ему:)
_6. Если метки варианта ответа короткие, рассмотрите возможность использования переключателя с множественным выбором

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

Пример переключателя с множественным выбором

Этот вариант предложил , спасибо ему.

Когда использовать флажки

У меня есть два правила, когда использовать флажки, и вот они:

Если вы хотите, чтобы пользователь мог выбрать несколько вариантов или вообще не выбирать

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

Один элемент

Тест: почему пункт «Я прочитал условия» всегда в виде флажка, а не радиокнопки? Ведь имеет смысл использовать радиокнопку, так как это лучший тип селектора для вопросов «да / нет»?

Ответ: потому что вы можете отменить его выбор. В отличие от радиокнопок только с одним элементом, где вы не можете отменить его. Если вы нажмете на него, он будет выбран НАВСЕГДА.

Поля вывода

Ранее мы обсуждали поля ввода, но HTML5 также предоставляет поля для вывода информации

output — результат вычисления пользовательских действий
progress — полоса прогресса (атрибуты value и max задают состояние)
meter — шкала, которая может менять свой цвет между зеленым, желтым и красным в зависимости от установленных значений атрибутов value, min, max, low, high и optimum

Разделение и подпись полей

Согласно спецификации, каждый элемент формы считается параграфом, и отделяется от остальных частей элементом <p>

Итересно. Я в целях разделения использую div, хотя сомневаюсь, что это имеет большое значение. Тег p короче, разве что вам нужно будет применять дополнительный стиль, чтобы убрать поля.

Что более важно — метки нужно использовать, либо окружая элемент формы, либо размещая их рядом, и связывая их атрибутом for с соответствующими полями, например:

<p>
  <p>
  <label for="firstname">Имя</label>
  <input type="text" id="firstname" name="firstname" placeholder="first name" required maxlength="20" />
</p>

<p>
  <label for="lastname">Фамилия</label>
  <input type="text" id="lastname" name="lastname" placeholder="last name" required maxlength="20" />
</p>

<p>
  <label for="email">Email адрес</label>
  <input type="email" id="email" name="email" placeholder="your@email.address" required maxlength="50" />
</p>

<p>
  <label>
    <input type="checkbox" name="newsletter" />
    Подпишитесь на рассылку
  </label>
</p>

Элементы управления не стандартизированы

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

Поддержка браузерами

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

Всегда используйте правильный тип!

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

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

Стандартное поле date всегда возвращает дату в формате YYYY-MM-DD, независимо от того, какой формат даты используется в вашем регионе.
IE и Firefox откатятся до стандартного поля text, а вашим пользователям нужно вводить даты в английском формате MM-DD-YYYY, или в европейском DD-MM-YYYY
JavaScript плагин, как в jQuery UI позволяет определять собственный формат — да хоть YYYY-MM-DD — но вы не можете гарантировать, что JavaScript будет включен на машине пользователя.

Простым решением будет отказ от использования HTML5 поля date, вернутья к полю text, и реализовать свой элемент управления датами. Не делайте этого. Вы никогда не создадите нормальный элемент для выбора даты, который работает на всех устройствах, на всех разрешениях экрана, поддерживает клавиатуру, мышь и сенсорный ввод, и продолжает работать при отключенном JavaScript. К тому же, в мобильных браузерах есть свои инструменты обработки элементов управления с заточкой под сенсорное управление.

За типами полей ввода HTML5 будущее. Используйте их, и, если необходимо, пользуйтесь JavaScript заменой в ситуациях, требующих хорошей кроссбраузерности. Но помните о том, что требуется…

Валидация на серверной стороне

Валидация на стороне браузера не гарантируется. Даже если вы заставили всех перейти на последнюю версию Chrome, то и тогда вы не сможете избежать:

багов браузера или ошибок в JavaScript, пропускающих неверные данные
пользователей, изменяющих DOM или скрипты с помощью инструментов браузера
отправка данных с систем, которые вы не контролируете
перехват данных на пути от браузера к серверу (обычно по HTTP)

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

И, наконец, помните, что даты могут быть получены в различных форматах, будь то YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY и прочие. Проверяйте наличие цифр в первых четырех символах, или используйте встроенные средства разбора и проверки используемого языка/фреймворка в случае необходимости.

В этой статье я рассказал о многих аспектах разметки HTML5 форм. В следующей статье мы рассмотрим CSS-свойства, относящиеся к формам.