HTML5 формы новые элементы

Формы HTML5: разметка

Это первая из трех статей о веб-формах HTML5. Перед тем, как перейти к стилизации и JavaScript-валидации на стороне клиента, мы рассмотрим основную разметку. Я рекомендую вам прочесть эту статью, даже если вы уже знакомы с формами — здесь описано множество новых атрибутов и плюшек!

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

• input type=»text»
• input type=»checkbox»
• input type=»radio»
• input type=»password»
• input type=»h

• возможности стилизации с помощью CSS ограничены
• расширенные элементы, вроде элементов для выбора даты и цвета нужно реализовывать самостоятельно, с помощью кода
• валидация на стороне клиента требует JavaScript

Дополнительные типы полей

В HTML5 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода

Атрибуты полей ввода

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

конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например

Заметьте, что поля date должны использовать формат YYYY-MM-DD для атрибутов value, min и max.

Следующий пример показывает поле, требующее обязательного ввода email, заканчивающегося на @mysite.com, на которое смещается фокус при загрузке страницы.

Списки данных

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

но стоить помнить, что реализация отличается в различных браузерах. Например, Firefox производит автодополнение по тексту (Internet Explorer), тогда как Chrome — по значениям (IE), а текст указывает уменьшенным серым шрифтом:

Списки данных можно заполнять с помощью JavaScript, если вы хотите получать их по AJAX.

Отключение валидации

Отключит валидацию всей формы можно выставив атрибут novalidate элементу form. В дополнение, можно выставить атрибут formnovalidate кнопке/изображению отправки формы.

Запомните, что выставление полю атрибута disabled отключит валидацию этого поля.

Поля вывода

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

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

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

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

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

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

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

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

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

Не все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink.

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

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

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

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

1. Стандартное поле date всегда возвращает дату в формате YYYY-MM-DD, независимо от того, какой формат даты используется в вашем регионе.
2. IE и Firefox откатятся до стандартного поля text, а вашим пользователям нужно вводить даты в английском формате MM-DD-YYYY, или в европейском DD-MM-YYYY
3. 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-свойства, относящиеся к формам.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/html5-forms-markup/
Перевел: Станислав Протасевич
Урок создан: 31 Мая 2014
Просмотров: 38061
Правила перепечатки

5 последних уроков рубрики «HTML5»

Расширяем возможности HTML за счёт создания собственных тегов

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

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

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

Создание форм с помощью Webix Framework — 4 практических примера

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

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

HTML5 формы: новые элементы

Новые элементы HTML5

Новые элементы HTML5

Начиная с 1999 года, HTML 4,01 изменилось многое. Сегодня некоторые из HTML 4.01 устарели, и эти элементы были удалены или переопределены в HTML5.

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

Новые элементы в HTML5

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

Новые Семантические / Структурные элементы

HTML5 предлагает новые элементы для улучшения структуры документа:

Новая форма элементов

Прочитайте все о старых и новых форм элементов в HTML — формы элементов .

Типы ввода новых

Узнайте все о старых и новых типов ввода в ввода типов HTML .

Узнайте все о входных атрибутов в Атрибуты HTML ввода .

HTML5 — Новый Атрибут Синтаксис

HTML5 позволяет четыре различных синтаксиса для атрибутов.

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

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

Новые элементы в HTML 5

Структура и семантика

Работа над HTML фактически остановилась в 1999 г. после выхода HTML 4, после чего W3C сосредоточилась на изменении синтаксиса с SGML (Standard Generalized Markup Language) на XML, а также на разработке новых языков разметки, таких как SVG (Scalable Vector Graphics), XForms и MathML. Производители браузеров были поглощены работой над новыми возможностями своих продуктов, например, закладками или чтением новостных лент RSS, а Web-дизайнеры изучали CSS и JavaScript™, позволяющие использовать существующие решения на основе Ajax (Asynchronous JavaScript + XML) для разработки Web-приложений. Сам же язык HTML практически не развивался все эти восемь лет.

И вот недавно этот зверь проснулся. Три крупнейших производителя браузеров — Apple, Opera и Mozilla Foundation — создали рабочую группу под названием WhatWG (Web Hypertext Application Technology Working Group), целью которой стала разработка новой, улучшенной версии HTML. W3C обратил на это внимание чуть позднее и в итоге также включился в работу над HTML следующего поколения, причем силами многих участников WhatWG. В конце концов, эти две группы, скорее всего, объединятся. Несмотря на то, что споры над множеством деталей по-прежнему ведутся, общая картина следующей версии HTML постепенно проясняется.

Если представить себе Web-дизайнера, который проспал все восемь лет, начиная с 1999 г., то он по-прежнему сможет легко работать с HTML 5 (альтернативное название— Web Applications 1.0). Как и ранее, нет никаких пространств имен или схем, элементы закрывать необязательно, а браузеры прощают синтаксические ошибки. Другими словами, p и table – это все те же p и table .

Но в тоже время наш очнувшийся от спячки дизайнер наверняка обнаружит новые, непонятные элементы. К такому старому доброму приятелю, как div , добавились section , header , footer и nav , а к em , code и strong — meter , time и m . Также вдобавок к img и embed появились video и audio . Но если присмотреться, то можно заметить, что эти элементы не сильно отличаются от сушествующих. Многие из них требовались еще в 1999 г., просто тогда их еще не было. К тому же в них легко разобраться по аналогии с уже использующимися элементами, что делает HTML 5 более простым для изучения, чем, например, Ajax или CSS.

Если же вместе с дизайнером все восемь лет спал и его старый ноутбук с процессором 300MГц и Windows 98, то на нем по-прежнему можно будет запустить новые страницы, и, как ни странно, они будут замечательно отображаться браузерами Netscape 4 или Windows® Internet Explorer® 5. Разумеется, браузер не распознает новые элементы и все что с ними связано, но отобразить содержимое страницы он вполне сможет.

Это вовсе не какая-то счастливая случайность – одной из задач HTML 5 было то, что браузеры, не поддерживающие новый стандарт, должны отображать страницы с минимальными потерями. Причина этого проста: мы все в той или иной степени очнулись от спячки. Несмотря на такие возможности браузеров, как закладки, поддержка CSS или XmlHttpRequest, рендеринг HTML по-прежнему тот же, что был восемь лет назад. Web не может двигаться вперед без учета существующего положения дел, и разработчики HTML 5 это прекрасно понимали. Новый стандарт предоставляет новые возможности авторам страниц уже сейчас, обещая, что все они станут доступными для пользователей по мере выпуска новых версий браузеров. В свете этого давайте посмотрим, что же появилось нового в HTML 5.

Структура

Недостаток строгой структурированности документов создает трудности при обработке даже корректно сформированных документов. В частности, для определения границ секций приходится анализировать уровни заголовков. К тому же на единственный тег div возложены функции по описанию огромного множества конструкций, таких как боковые панели (sidebar), верхние и нижние разделы страниц, меню, области для контента и т.д. В HTML 5 эти функции распределены между следующими новыми элементами:

• section : служит для определения частей и секций, например для разбивки книжных глав на разделы. Этот элемент может использоватья для любого описания любого блока текста, для которого требуется собственный заголовок.
• header : определяет верхнюю секцию на странице. Учтите, что это не то же самое, что head .
• footer : определяет нижнюю секцию на странице. Например, место для подписи в сообщениях email.
• nav : содержит набор ссылок на другие страницы.
• article : может описывать отдельные записи в блогах, статьи в журналах или руководствах и т.д.

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

Листинг 1. Типичная запись в блоге

Даже несмотря на отступы, такая масса вложенных элементов div выглядит запутанно. Используя новые элементы HTML 5, страницу можно переписать, как показано в листинге 2.

Листинг 2. Та же запись, переписанная на HTML 5

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

Элементы уровня блока

Вдобавок к структурным элементам, HTML 5 предлагает набор семантических элементов уровня блока:

Я постоянно использую первые два в своих статьях и книгах. Несмотря на то, что я не очень часто использую dialog, он достаточно популярен у других авторов.

aside

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

Листинг 3. Боковая панель в статьях developerWorks на HTML 4

However, Firefox doesn’t yet support this syntax.

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

Листинг 4. Та же панель, но на HTML 5

However, Firefox doesn’t yet support this syntax.

Используя CSS, браузер самостоятельно расположит панель в нужном месте документа.

figure

Элемент figure описывает изображение вместе с подписью. Например, в статьях developerWorks можно найти фрагменты, схожие с листингом 5. Результат показан на рисунке 1.

Листинг 5. Рисунок в статье developerWorks на HTML 4

Рисунок 1. Диалог установки Mozilla XForms

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

Листинг 6. Тот же рисунок, но описанный на HTML 5

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

Кроме картинок figure может использоваться для добавления подписей к таким элементам, как audio , video , iframe , object и embed .

dialog

Элемент dialog служит для оформления диалога между несколькими собеседниками. В HTML 5 элемент dt по умолчанию используется для отображения имени говорящего, а элемент dd служит для форматирования речи. В итоге диалог отображается достаточно неплохо даже в старых браузерах. В листинге 7 показан фрагмент знаменитого диалога из работы Галилео Галилея “Диалог о двух главнейших системах мира”.

Листинг 7. Диалог Галилео на HTML 5

Точный синтакс этого элемента пока еще не утвержден, потому как некоторые разработчики хотели бы добавить возможности для представления стороннего текста внутри диалога (например, сценических указаний), в то время как другие считают, что достаточно перегружать элементы dt и dd . Но, несмотря на эти разногласия, большинство согласно, что подобное семантическое представление диалога – это шаг вперед.

Семантические элементы уровня текста

В HTML 4 существуют несколько элементов уровня текста для представления разного рода фрагментов кода, такие как var , code , kbd , tt и samp . При этом не существует никаких специальных конструкций для выделения таких базовых понятий, как время, числа, саркастические оттенки и т.д. В целях выровнять этот перекос в сторону технических текстов, HTML 5 предлагает несколько новых встроенных элементов.

Элемент m указывает, что фрагмент текста отмечен каким-либо образом (необязательно подчеркнут), скажем, для выделения важных эпизодов в книге. Классическим примером использования могут служить закешированные страницы Google, на которых отмечены ключевые слова, использованные для поиска. Если поиск был выполнен по некоторому слову, например, “Egret”, то закешированная страница может быть размечена следующим образом:

Название этого элемента до сих пор остается предметом обсуждения. Оно может быть измененено на mark вместо m в окончательной версии спецификации.

Элемент time служит для представления определенных моментов времени, таких как 23 апреля, 5:35 P.M., EST, 2007. Например:

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

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

meter

Элемент meter служит для представления числового значения в определенном интервале. Он может использоваться для таких вещей, как зарплаты, процент французов, проголосовавших за Ле Пена, результаты тестирования и т.д. В данной статьей meter используется для разметки данных полученных от одного программиста Google на конференции Software Development 2007.

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

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

Это означает, что студент получил 88.7 баллов из 100 возможных. При этом нижний минимум оценки – 0, самая низкая из полученных оценок – 65, а самая высокая – 96 из ста. Разумеется, различные программы-агенты могут по-разному представлять эту информацию, используя различные интерфейсные элементы или же просто выдавая подсказку, расшифровывающую значение оценки, но большинство, скорее всего, будет использовать стандартное оформление для элементов уровня текста.

progress

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

Атрибут value служит для представления текущего, а атрибут max – для конечного состояния процесса. Например, в данном случае элемент показывает, что скачалось 1,534,602 байт из 4,603,807.

Если опустить атрибут max , то можно использовать этот элемент для отображения процессов с неопределенным текущим состоянием.

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

Элементы мультимедиа

Использование видеофайлов на Web-страницах растет быстрыми темпами, но только за счет проприетарных технологий, таких как Flash на YouTube, Microsoft Windows Media® или QuickTime в случае Apple. Таким образом, способы разметки подобного контента зависят от конкретного браузера. WhatWG предложила новый элемент video , позволяющий размещать видеоролики произвольных форматов. Например, можно добавить фильм “Sora in Prospect Park” в формате QuickTime следующим образом:

В то же время продолжаются споры о том, надо ли отдавать предпочтение какому либо одному кодеку или видеоформату. В частности, очень вероятно, что поддержка Ogg Theora будет, как минимум, рекомендована, а может и вовсе стать обязательной, в отличие от проприетарных форматов, таких как QuickTime, а также форматов, защищенных патентами, например, MPEG 4. Скорее всего, набор поддерживаемых форматов определится в результате естественной конкуренции, аналогично тому, как изображения в форматах GIF, JPEG и PNG стали в итоге использоваться гораздо чаще в элементах img , чем BMP, X-Bitmap или же JPEG 2000.

Кроме video также предложен новый элемент audio . Например, он может использоваться для добавления музыкального фона к Web-странице:

Атрибут autoplay служит для указания браузеру, что проигрывание должно начаться сразу после загрузки страницы, без всякого действия со стороны пользователя. Оно должно повториться 20,000 раз или же пока пользователь не покинет страницу. Разумеется, браузеры могут и должны предоставлять возможность выключить звук или же остановить проигрывание, вне зависимости от того, предусмотрел автор такую возможность или нет.

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

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

Листинг 8. Выступление Джона Ф. Кеннеди на инаугурации. HTML 5

Интерактивные элементы

HTML 5 также известен как Web Applications 1.0. В частности, поэтому он предоставляет несколько элементов для улучшения интерактивной составляющей Web-страниц:

С помощью этих элементов пользователь потенциально может изменить содержимое страницы без ее перезагрузки на сервере:

details

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

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

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

datagrid

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

Изначально данные в datagrid берутся из одного или нескольких дочерних элементов, таких как table , select и т.д. Например, в листинге 9 приведен пример datagrid для показа ведомости с оценками. В этом примере, данные берутся из элемента table . В более простом случае, они могут находиться в одноразмерном элементе select . Если используются несколько дочерних элементов, то каждый из них превращается в отдельную строчку в таблице.

Листинг 9. Ведомость с оценками в datagr >

Главным отличием данного элемента от обычных HTML-таблиц является то, что пользователь может выбирать, сворачивать, удалять строки, столбцы и ячейки, сортировать таблицу, т.е. работать с данными непосредственно в браузере на клиентской стороне. Для отслеживания изменений в данных служит HTMLDataGridElement — специальный JavaScript-интерфейс, добавленный в модель DOM (Document Object Model).

Листинг 10. HTMLDataGr >

DOM также может быть использован для автоматической загрузки данных в таблицу. Таким образом, datagrid не обязан содержать дочерние элементы для хранения изначальных данных. Вместо этого они могут устанавливаться с помощью объекта типа DataGridDataProvider , как показано в листинге 11. Подобным образом можно получать информацию из баз данных, через XmlHttpRequest и вообще из любых источников, доступных через JavaScript.

Листинг 11. DataGr >

Элементы menu и command

Элемент menu существовал в HTML как минимум со второй версии, затем был объявлен устаревшим в HTML 4, однако триумфально вернулся в HTML 5. В новом стандарте он содержит дочерние элементы command , каждый из которых моментально запускает определенное действие. В листинге 12 приведен пример использования menu для показа сообщений alert.

Листинг 12. Меню на HTML 5

C помощью атрибута checked=»checked» элементы command можно превратить в группу флажков (check boxes), которые в свою очередь легко преобразуются в группу радиокнопок путем использования атрибута radiogroup (он должен содержать название группы неповторяющихся названий кнопок).

Кроме простого списка команд, элемент menu можно использовать для создания панелей инструментов или контекстных меню, используя значения toolbar и popup атрибута type . Например, в листинге 13 показана панель инструментов, типичная для редакторов блогов, таких как WordPress. В ней используется атрибут icon для ссылок на иконки для кнопок.

Листинг 13. Панель инструментов на HTML 5

Для задания заголовка меню используется атрибут label . Пример использования в меню «Правка» показан в листинге 14.

Листинг 14. Меню «Правка» на HTML 5

Также можно создавать иерархические меню путем вложения одних элементов в другие.

Заключение

HTML 5 – это часть будущего Web. Новые элементы упрощают разметку страниц, делая их более понятными для пользователя. И хотя старые теги div и span по-прежнему могут использоваться, область их применения значительно сужается, а многим страницам они становятся и вовсе не нужны.

Конечно, не все браузеры сразу станут поддерживать новые элементы, но ведь та же ситуация наблюдалась и в случае многих конструкций, добавленных после выхода первого стандарта HTML, например, тегов img , table , object и т.д. Поддержка новых элементов будет постепенно реализовываться, а пока же они будут игнорироваться старыми браузерами в соответствии с соглашением “необходимо пропускать” (must-ignore). Это означает, что браузеры по-прежнему смогут отображать страницы HTML 5, что и происходит в настоящее время. Пользователи современных браузеров, конечно, получат определенное преимущество, но возможность просматривать новые страницы будет у всех.

Восемь лет ожидания новых возможностей – это очень долго, особенно в стремительно развивающемся мире Web. HTML 5 частично возрождает радостное возбуждение ранних дней развития HTML, когда Netscape, Microsoft и другие компании еженедельно предлагали новые элементы. Но в данном случае используется гораздо более осторожный и обдуманный подход к определению элементов, направленный на то, чтобы сделать их доступными для всех. В общем, будущее выглядит очень привлекательным.

Ресурсы для скачивания

Похожие темы

• Оригинал статьи: New elements in HTML 5: Structure and semantics. (EN)
• Ознакомьтесь с различными предложениями по развитию HTML, сделанными разработчиками, дизайнерами, авторами, производителями ПО и т.д., приведенными в статье Будущее HTML, часть 1: WHATWG (Эд Дамбилл (Edd Dumbill), developerWorks, декабрь 2005 г.).
• Прочитайте о следующей версии языка XHTML (Extensible Hypertext Markup Language) и об ответе W3C на необходимость разработки многофункциональных клиентов на Ajax в статье Будущее HTML, часть 2: XHTML 2.0 (Эд Дамбилл (Edd Dumbill), developerWorks, январь 2006 г.).
• Обратитесь к статье XHTML 1.0: Marking up a new dawn (Молли Хольцшлаг (Molly Holzschlag), developerWorks, январь 2006 г.) за сведениями о создании правильно сформированных и валидных документов XHTML 1.0. (EN)
• Ознакомьтесь со списком часто задаваемых вопросов о деятельности рабочей группы WhatWG на странице Часто задаваемые вопросы о WhatWG и HTML 5. (EN)
• Ознакомьтесь с текущим вариантом спецификации HTML 5 на странице Web Applications 1.0. (EN)
• Прочитайте работу Галилео Диалог о двух главнейших системах мира, переведенную на английский Стиллманом Дрейком (Stillman Drake) с сокращениями и комментариями С. И. Скортино (S. E. Sciortino). (EN)
• Опробуйте открытый видеоформат нового поколения Ogg Theora. (EN)
• Сертификация по XML корпорации IBM: узнайте, как стать сертифицированным разработчиком IBM в области XML и связанных с ним технологий. (EN)
• XML: данный раздел сайта developerWorks содержит множество статей, советов, руководств, стандартов и IBM Redbooks.
• Скачайте программное обеспечение IBM (время работы без регистрации ограничено): начните ваш следующий проект, используя программное обеспечение, которое можно скачать прямо с сайта IBM developerWorks. (EN)

Комментарии

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

HTML5 формы: новые элементы

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

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

Как предполагают имена, эта пара атрибутов позволяет задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое поле формы, например, типы элементов ввода number, range, time или date (можно даже использовать их для задания верхней и нижней границы дат – например, в форме бронирования путешествия можно ограничить элемент выбора даты, позволяя выбирать только будущие даты). Для элементов ввода range, min и max необходимо, на самом деле, определять, какие значения возвращаются при отправке формы.

Код вполне простой и не требует пояснений:

Атрибут step можно использовать с числовым значением ввода, чтобы определить точность возможных вводимых значений. Например, может потребоваться, чтобы пользователи вводили определенное время, но только с шагом 30 минут. В этом случае можно использовать атрибут step, помня о том, что для элементов ввода time значение атрибута задается в секундах:

Элемент служит средством вывода «результата вычислений», или в более общем смысле для предоставления явно определенного вывода сценария (вместо простого выталкивания некоторого текста в случайный span или div с помощью innerHTML, например). Чтобы еще более явно указать, каким конкретно элементам управления формы соответствует output, можно – аналогично тому как для label – передать список ID в дополнительном атрибуте for элемента.

и

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

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

• :required и :optional позволяют явно оформить элементы управления на основе того, имеют они или нет требуемый атрибут
• :valid и :invalid будут применять стили к элементам управления формы в зависимости от клиентской проверки
• :in-range и :out-of-range работает специально с элементами управления, которые имеют атрибут min и/или max.

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

input[type=text]:focus:valid,
input[type=e-mail]:focus:valid,
input[type=number]:focus:in-range < outline: 2px #0f0 solid; >

input[type=text]:focus:invalid,
input[type=e-mail]:focus:invalid,
input[type=number]:focus:out-of-range

Совместимы ли коды на языке HTML4.01 с web-приложениями на HTML5:
(Отметьте один правильный вариант ответа.)
Вариант 1 совсем не совместимы
Вариант 2 частично совместимы
Вариант 3 полностью совместимы

К преимуществам языка HTML5 по сравнению с предыдущими спецификациями можно отнести:
(Ответ считается верным, если отмечены все правильные варианты ответов.)
Вариант 1 четко определенный алгоритм синтаксического анализа DOM
Вариант 2 обратная совместимость с существующими web-приложениями
Вариант 3 технология прямого доступа к серверным базам данных
Вариант 4 новые мощные средства языка разметки позволяют добавлять на web страницу элементы, которые ранее были доступны только с помощью технологии плагинов или сложного кода JavaScript

Создание новых типов элементов формы HTML 5, в формах Drupal 7

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

Как вы возможно уже заметили, Form API Drupal не позволяет из «коробки» создавать элементы формы присущие HTML 5. В данном уроке, я хочу вам показать, как можно добавить новый тип элемента формы , такие как:

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

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

Способ 1 — простой

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

Например, для создания своего числового поля достаточно будет лишь изменить тип элемента формы:

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

Список доступных нам типов элементов:

• numberfield – числовое поле
• emailfield – поле с типом email
• searchfield – поле с типом search
• telfield – поле с типом tel
• urlfield – поле с типом url
• rangefield – поле с типом range

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

Способ 2 – сложный, но более гибкий

Помимо всех имеющихся типов полей формы, которые предоставляет нам Form API, мы может создать и собственные типы полей. Рассмотрим это дело на примере, а в качестве эксперимента – создадим элемент с типом date, который присуще так же HTML5.

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

Что бы создать новый тип элемента формы, необходимо:

1. Описать новый тип элемента формы
2. Описать функцию темизации

Новый тип мы создали, теперь можем его использовать в своей форме:

После чего увидим следующую картину:

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

Новые свойства форм в HTML5

Патрик Х. Лауке, Крис Миллз · 16 декабря 2010 г.

Введение

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

Плохая форма?

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

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

Чтобы удовлетворить потребность в более развитых элементах управления, которые нужны для таких приложений, разработчики использовали библиотеки JavaScript и рабочие среды (такие как jQueryUI или YUI). Эти решения, конечно, существенно развились за прошедшие годы, добавляя богатую функциональность на страницы Web , начиная включать даже поддержку считывателей экрана с помощью таких технологий как WAI -ARIA. Но, по сути, они являются обходными путями, чтобы компенсировать ограниченные возможности элементов управления форм, которые имеются в HTML . Они «имитируют» более сложные виджеты (такие как выбор даты и ползунки), создавая дополнительный слой разметки (не всегда семантической), и дополнительный код JavaScript поверх страниц.

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

Знакомство с примером

Чтобы проиллюстрировать некоторые новые свойства, статья содержит элементарный пример формы HTML5 (http://dev.opera.com/articles/view/new-form-features-in-html5/html5-forms-example.html). Он не предназначен для представления «реальной» формы (так как трудно было бы, пожалуй, найти ситуацию, где могут потребоваться все новые свойства в одной форме), но она должна показать, как выглядят и ведут себя различные новые возможности.

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

Новые элементы управления форм

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

Первый новый тип элемента ввода, который мы рассмотрим, будет тип ввода number (числа):

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

Создание элемента управления ползунка, позволяющего выбирать в диапазоне значений, было обычно сложным, семантически неясным предложением, но в HTML5 все стало легко – вы используете просто тип ввода range (диапазон):

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

и другие элементы управления датой/временем

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

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

Но на этом все не кончается – доступен ряд других связанных типов элементов ввода:

datetime : объединяет функции обоих рассмотренных выше элементов, позволяя выбрать дату и время.

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

week : позволяет выбрать неделю, сохраняемую внутренне в формате 2010-W37 (37 неделя 2010 года), и выбирать с помощью элемента выбора даты, аналогичного тому, что мы уже видели.

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

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

Новые типы input в HTML5 формах

Обратите внимание: на данный момент (Ноябрь 2011) новые типы input поддерживаются полностью только в браузерах Opera 11+ и Chrome 12+.

• input type=email определяет поле, которые должно содержать email адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
• input type=url определяет поле, которое должно содержать url адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
• input type=tel определяет поле для ввода телефонного номера. С помощью атрибута pattern Вы может установить формат принимаемого телефонного номера. Формат задается с помощью регулярных выражений.
• input type=number определяет поле, которое должно содержать числа. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
• input type=range определяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать мышкой. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
• input type=search определяет поле поиска (может использоваться например для создания поиска по сайту).

Новые элементы в HTML5 формах

Обратите внимание: на данный момент (Ноябрь 2011) новые элементы форм поддерживаются полностью только в браузерах Firefox 4+ и Opera 10.50+.

• datalist позволяет привязать список к полям формы. Значения списка будут выводится как поисковые подсказки во время ввода информации в поле связанное с ним.
• keygen позволяет генерировать открытые и закрытые ключи, которые используются для безопасной связи с сервером.
• output может использоваться для вывода различной информации. С помощью атрибута for можно указать связанные поля.

Новые атрибуты в HTML5 формах

Обратите внимание: на данный момент (Ноябрь 2011) новые атрибуты элементов формы поддерживаются только в браузерах Firefox 4+, Opera 11+ и Chrome 10+.

• autofocus делает поле активным после загрузки страницы (может использоваться со всеми типами input).
• form указывает форму, которой принадлежит данное поле (может использоваться со всеми типами input).
• multiple указывает, что данное поле может принимать несколько значений одновременно (может использоваться с input типов email и file).
• noval >

Выбор даты

В HTML5 были добавлены новые элементы ввода позволяющие удобно выбирать дату и время.

Обратите внимание: на данный момент (Ноябрь 2011) поля для выбора даты поддерживаются только в браузерах Opera 9+, Chrome 10+ и Safari 5.1+.

• date позволяет выбрать дату в формате год-месяц-день_месяца.
• time позволяет выбрать время.
• datetime позволяет выбрать дату в формате год-месяц-день_месяцаTвремяZ (отчет ведется по глобальному времени).
• datetime-local позволяет выбрать дату в формате год-месяц-день_месяцаTвремя (отчет ведется по местному времени).
• month позволяет выбрать дату в формате год-месяц.
• week позволяет выбрать дату в формате год-Wнеделя.

Шпаргалка по HTML5 Формам

Дата изменения: 18.05.2015

Создание HTML формы. Тег Form

Тег form — контейнер, в котором могут содержаться элементы web форм, такие как input, checkbox, radio button и т.д.

Задание пути отправления данных (данные отправляются в указанный обработчик (метод отвечающий за обработку данных не сервере) указанным методом GET или POST

Поле для ввода числа

INPUT type=»number»

Поле для ввода даты

INPUT type=»date»

Поле для установки цвета

INPUT type=»color»

Поле для ввода числа слайдером

INPUT type=»range»

Поле для ввода времени

INPUT type=»time»

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

Поле для ввода Email

INPUT type=»email»

Поле для поиска

INPUT type=»search»

Поле для ввода номера телефона

INPUT type=»tel»

Поле для ввода url адреса

Текстовое поле TEXTAREA

Радио кнопка (переключатели) Radio-Button

Флажки Check-Box

Выбор Select

Кнопка Submit

Кнопка Button

Кнопка для выбора файла для загрузки File

Атрибуты элементов формы

accept— Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

autocomplete — Включает или отключает автозаполнение.

autofocus — Устанавливает фокус в поле формы.

checked — Предварительно активированный переключатель или флажок.

disabled — Блокирует доступ и изменение элемента.

action — Определяет адрес обработчика формы.

enctype — Устанавливает способ кодирования данных формы при их отправке на сервер.

method — cообщает браузеру каким методом следует передавать данные формы на сервер.

novalidate— Отменяет встроенную проверку данных на корректность.

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

list — Указывает на список вариантов, которые можно выбирать при вводе текста.

max — верхнее значение для ввода числа или даты.

maxlength — Максимальное количество символов разрешенных в тексте.

min — Нижнее значение для ввода числа или даты.

multiple — Позволяет загрузить несколько файлов одновременно.

name — Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

pattern — Устанавливает шаблон ввода.

placeholder — Выводит подсказывающий текст.

readonly — Устанавливает, что поле не может изменяться пользователем.

required— Обязательное для заполнения поле. requeied

size — Ширина текстового поля.

step — Шаг приращения для числовых полей.

tab-index — Определяет порядок перехода между элементами с помощью клавиши Tab.

type — Сообщает браузеру, к какому типу относится элемент формы.

value — Значение элемента.

40 важных вопросов и ответов по HTML5

Введение

Я, разработчик ASP.NET MVC , недавно искал работу, и на собеседовании много вопросов из тех, что мне задавали, касались HTML5 и его особенностей.

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

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

Какая связь между SGML, HTML, XML и XHTML?

SGML ( Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

HTML – это язык разметки, который описывается с помощью SGML.

Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию « DOCTYPE » в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.

Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “” ).

XHML был создан из XML и использовался в HTML 4.0 . Поэтому, например, в HTML, основанном на SGML, тег
недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:

Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.

Что такое HTML 5?

HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.

HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В HTML 5 нам не нужно DTD. Почему?

HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.

Если я не вставлю в документ , будет ли работать HTML 5?
Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.

Какие браузеры поддерживают HTML 5?

Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.

Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?

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

Ниже приведено описание этих элементов HTML 5 из разметки на рисунке:

• : Представляет блок заголовка страницы;
• : Подвал страницы;

Формы в HTML5

Формы в HTML5 — это элементы управления, которые используются для сбора информации от посетителей сайта.

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

Но для того чтобы была возможность обрабатывать данные форм, необходимо использовать один из языков серверного программирования (например PHP, Perl).

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

Формы в HTML5 решили большое количество проблем, которые возникали в старых версиях. Это обусловлено появлением новых атрибутов, и предоставив более простую стилизацию с использованием CSS3.

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

Атрибуты тега ;

autocomplete — отвечает за запоминание данных, введенных а текстовые поля формы и автоподстановку их при следующем заполнении; может принимать значения: on — поле не защищено и его можно запоминать и сохранять; off — отключает автозаполнение;

enctype — Используется для указания MIME-типа данных, отправляемых вместе с формой, например, enctype=»multipart/form-data» . Указывается только в случае method=»post» .
application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как ! будет закодирован шестнадцатиричной форме как %21 .
multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.
text/plain — указывает на то, что передается обычный (не html) текст;

method — Задает способ передачи данных формы.
Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака ? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.
Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.

name — задает имя формы. Данное имя будет использоваться для доступа к элементам формы через сценарии;

novalidate — отключает проверку в кнопке отправки формы. Он используется без значений;

target — Указывает окно, в которое будет направлена информация: _blank — новое окно; _self — тот же фрейм; _parent — родительский фрейм (если он существует, если нет — то в текущий); _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.

Группировка элементов формы

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

Топ-пост этого месяца:  AnyComment — современный плагин комментариев для WordPress