Разное

Элементы html5: Semantic elements in HTML5. Description and use

30.03.2023

HTML5 | Элементы форм

Последнее обновление: 08.04.2016

Формы состоят из определенного количества элементов ввода. Все элементы ввода помещаются между тегами <form> и </form>

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

  • text: обычное текстовое поле

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

  • radio: радиокнопка или переключатель. Из группы радиокнопок можно выбрать только одну

  • checkbox: элемент флажок, который может находиться в отмеченном или неотмеченном состоянии

  • hidden: скрытое поле

  • submit: кнопка отправки формы

  • color: поле для ввода цвета

  • date: поле для ввода даты

  • datetime: поле для ввода даты и времени с учетом часового пояса

  • datetime-local: поле для ввода даты и времени без учета часового пояса

  • email: поле для ввода адреса электронной почты

  • month: поле для ввода года и месяца

  • number: поле для ввода чисел

  • range: ползунок для выбора числа из некоторого диапазона

  • tel: поле для ввода телефона

  • time: поле для ввода времени

  • week: поле для ввода года и недели

  • url: поле для ввода адреса url

  • file: поле для выбора отправляемого файла

  • image: создает кнопку в виде картинки

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

  • button: создает кнопку

  • select: выпадающий список

  • label: создает метку, которая отображается рядом с полем ввода

  • textarea: многострочное текстовое поле

Атрибуты name и value

У всех элементов ввода можно установить атрибуты name и value. Эти атрибуты имеют важное значение. По атрибуту name мы можем идентифицировать поле ввода, а атрибут value

позволяет установить значение поля ввода. Например:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Формы в HTML5</title>
	</head>
	<body>
		<form method="get" action="index.html">
			<input type="text" name="login" value="Tom"/>
			<input type="password" name="password"/>
			<input type="submit" value="Войти" />
		</form>
	</body>
</html>

Здесь текстовое поле имеет значение «Tom» (как указано в атрибуте value), поэтому при загрузке веб-страницы в этом поле мы увидим данный текст.

Поскольку методом отправки данных формы является метод «get», то данные будут отправляться через строку запроса. Так как нам в данном случае не важно, как данные будут приниматься, не важен сервер, который получает данные, поэтому в качестве адреса я установил ту же самую страницу — то есть файл index. html. И при отправке мы сможем увидеть введенные данные в строке запроса:

В строке запроса нас интересует следующий кусочек:

login=Tom&password=qwerty

При отправке формы браузер соединяет все данные в набор пар «ключ-значение». В нашем случае две таких пары:

login=Tom и password=qwerty. Ключом в этих парах выступает название поля ввода, которое определяется атрибутом name, а значением — собственно то значение, которое введено в поле ввода (или значение атрибута value).

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

НазадСодержаниеВперед

HTML5 | Семейства элементов

165

Веб-программирование — HTML5 — Семейства элементов

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

В последующих разделах мы вкратце рассмотрим эти аспекты.

Добавленные элементы в HTML5

Новые элементы, с кратким описанием перечислены в таблице:

Новые элементы HTML5
Категория Элементы
Семантические элементы для работы со структурой страниц <article>, <aside>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <nav>, <section>, <details>, <summary>
Семантические элементы для работы с текстом <mark>, <time>, <wbr> (поддерживался и ранее, но теперь официально является частью языка)
Элементы для работы с веб-формами и интерактивности <input> (старый элемент, но со многими новыми подтипами), <datalist>, <keygen>, <meter>, <progress>, <command>, <menu>, <output>
Элементы для поддержки аудио, видео и подключаемых модулей <audio>, <video>, <source>, <embed> (поддерживался и ранее, но теперь официально является частью языка)
Поддержка холста <canvas>
Поддержка иных языков <bdo>, <rp>, <rt>, <ruby>

Удаленные элементы из HTML5

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

Самыми заметными шагами при удалении были те, что поддерживают продолжаемую в HTML5 философию (впервые введенную в XHTML): элементам оформления не место в языке. К таким элементам относятся элементы, используемые для форматирования веб-страниц, и даже самый «зеленый» веб-разработчик знает, что это работа для таблиц стилей. Удалены, среди прочих, были элементы оформления, которые не использовались профессиональными веб-разработчиками годами, такие как <big>, <center>, <font>, <tt> и <strike>. Атрибуты оформления HTML постигла та же судьба, поэтому нет надобности рассматривать их здесь.

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

Но, что довольно интересно, элемент <iframe>, который позволяет вставлять одну страницу в другую, проскользнул в новый стандарт. Это ему удалось по той причине, что он используется в веб-страницах для выполнения ряда интеграционных задач, таких как вставка в страницы окон YouTube, рекламных блоков и поисковых полей Google.

Еще несколько элементов были удалены из-за того, что они просто предоставляли уже существующие возможности другим способом и были источником частых ошибок. Например, функцию элемента <acronym> лучше предоставляет элемент <abbr>, а элементу <applet> предпочтителен элемент <object>. Но подавляющее большинство элементов HTML было сохранено в HTML5.

Для любителей цифр, семейство HTML5 состоит немногим из более 100 элементов. Из них почти 30 новых и около 10 существенно измененных. Просмотреть список элементов (и узнать, какие из них новые или измененные) можно на веб-сайте w3.org/TR/html-markup/.

Адаптированные элементы HTML5

У HTML5 есть еще один интересный трюк — некоторые старые методы применяются с новой целью. Возьмем, например, элемент <small>, предназначенный для уменьшения размера шрифта в блоке текста. Будучи не самым оптимальным способом решения этой задачи, для которой лучше подходят таблицы стилей, этот элемент впал в немилость веб-разработчиков. Но в отличие от выброшенного элемента <big>, элемент <small> остался в HTML5, однако функция его несколько иная.

Теперь элемент <small> используется для обозначения так называемого «мелкого текста» — информации, которую не горят желанием предоставить, но которую нужно разместить согласно каким-либо требованиям. Например, предупреждение об отказе от ответственности, помещенное в самом низу сайта, наподобие следующего:

<small>Файлы для обмена предоставлены пользователями сайта.  Администрация не несёт ответственности за их содержание. 
 На сервере хранятся только торрент-файлы. Это значит, что мы не храним никаких нелегальных материалов, 
 а так же материалов охраняемых авторским правом.</small>

Как и ранее, текст внутри элемента <small> отображается мелким шрифтом, если только эти настройки не отменены посредством таблицы стилей.

Другим элементом, чей эффект остался прежним, но концептуальное значение было модифицировано, является элемент <hr>, который рисует разделяющую линию между блоками текста. В HTML5 элемент <hr> рисует ту же самую линию, но теперь она представляет тематическое прерывание, например переход к другому вопросу. Таким образом, результат форматирования остался прежним, но имеет новое логическое значение.

Подобным образом зачеркивание шрифта элементом <s> теперь несет концептуальную нагрузку — зачеркнутый этим элементом текст считается больше неверными или утратившим значимость, вследствие чего он и был «вычеркнут» из документа.

Смещение значения действия этих двух последних элементов более утонченное, чем элемента <small>, т.к. в данных изменениях перенимается способ использования этих элементов в традиционном HTML.

Подкорректированные элементы

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

<address>
      <a href="mailto:[email protected]">Administrator</a>
</address>

Также несколько изменилось назначение элемента <cite>. Его можно продолжать использовать для указания названия какой-либо интеллектуальной работы, например рассказа, статьи, телевизионной программы и т. п., но элемент <cite> больше неприемлемо использовать, чтобы помечать имена людей.

Более серьезной корректировке подвергся элемент <a>, используемый для создания ссылок. В более ранних версиях HTML элементу <a> разрешалось содержать текст или изображение со ссылкой. А в HTML5 он может содержать все и вся, что означает, что теперь ссылки можно делать из целых абзацев текста, вместе со списками, изображениями и т.п. Текст со ссылкой подчеркивается, а шрифт окрашивается в синий цвет, как и границы изображения. Веб-браузеры поддерживали эти свойства годами, но только в HTML5 они приобрели официальный статус стандарта, что, впрочем, не делает их более или особенно полезными.

Некоторые корректировки еще не работают ни в одном браузере. Например, элемент <ol> (упорядоченный список) теперь имеет атрибут reversed (реверс), который позволяет вести счет в обратном направлении (или к единице, или к любому другому значению, указанному в атрибуте start). Но эта возможность еще не распознается ни одним браузером.

Стандартизированные элементы

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

Более экзотичным является элемент <wbr>, который указывает необязательный разрыв слова, т.е. место, в котором браузер может сделать перенос текста на новую строку, если слово не помещается в контейнер:

<p>Название нашей компании 
 ВордСистемБиоФитнес<wbr>СтронгХелсДабл<wbr>ИнтертейментВорлВайд<wbr>сВитаминомС</p>

Элемент <wbr> полезен, когда нужно вставить длинные названия (которые иногда встречаются) в ограниченное пространство, например в ячейку таблицы или текстовое поле. Но даже если браузер поддерживает элемент <wbr>, он разорвет слово только в том случае, если оно не помещается в доступное пространство. Таким образом, слово в предыдущем примере браузер может отобразить одним из следующих образов:

Элемент <wbr> является естественным дополнением к стандартному элементу <nobr>, который используется для предотвращения разрыва слова, когда для него имеется достаточно места. Но вплоть до HTML5 он не поддерживался никаким стандартом и распознавался только некоторыми браузерами.

: Элемент Generic Section — HTML: Язык гипертекстовой разметки

HTML-элемент

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

Этот элемент включает только глобальные атрибуты.

Как упоминалось выше,

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *