Html5 формы примеры – 50 бесплатных HTML5 и CSS3 форм входа для вашего сайта / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

HTML5 | Формы

333 184

Веб-программирование --- HTML5 --- Формы

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

HTML-формы существовали с самых ранних времен языка HTML, и с тех пор они нисколько не изменились, несмотря на определенные серьезные усилия. Разработчики веб-стандартов несколько лет колдовали над стандартом XForms, который должен был заменить HTML-формы, но его постиг такой же провал, как и стандарт XHTML 2.

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

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

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

Что такое форма?

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

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

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

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

Модернизация традиционной HTML-формы

Лучший способ обучения работе с формами HTML5 — это взять типичную современную форму и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться. Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент <form>.

Элемент <form> удерживает вместе все элементы управления формы, которые также называются полями. Кроме этого, он также указывает браузеру, куда отправить данные после нажатия пользователем кнопки отправки, предос

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

placeholder

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

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

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

<input type="text" name="user-name" placeholder="at least 3 characters">

<input type="text" name="user-name" placeholder="at least 3 characters">

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

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

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

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

autofocus

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

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

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

<input type="text" name="first-name" autofocus>

<input type="text" name="first-name" autofocus>

Его поддерживают все современные браузеры и, как placeholder, не выполняющие autofocus браузеры просто игнорируют его.

Примечание: Некоторые новые атрибуты формы HTML5 –булевы. Это просто означает, что они устанавливаются, если имеются, и не устанавливаются, если отсутствуют. В HTML5 их можно записать несколькими различными способами.

autofocus autofocus="" autofocus="autofocus"

autofocus

autofocus=""

autofocus="autofocus"

Однако при написании XHTML5 вам следует применять стиль autofocus=»autofocus».

autocomplete

Атрибут autocomplete помогает пользователям заполнять формы на основе предыдущего введения данных. Атрибут употребляется со времен IE5.5, но окончательно был стандартизирован как часть HTML5. По умолчанию он активен. Это значит, что в основном нам не придется его применять. Однако, если хотите настоять на введении в поле формы каждый раз после ее заполнении (в противоположность автозаполнения поля браузером), то выполните его следующим образом:

<input type="text" name="tracking-code" autocomplete="off">

<input type="text" name="tracking-code" autocomplete="off">

Состояние автозаполнения поля отменяет любое состояние autocomplete, установленное на содержащем элементе формы.

required

Атрибут required не требует представления; как и autofocus, он делает именно то, что вы от него ожидаете. При добавлении его в поле формы браузер требует от пользователя ввести данные в это поле до отправки формы. Он заменяет базовую валидацию формы, в данное время выполняемую с помощью JavaScript’а, делая все более удобным и экономя нам еще немножко времени разработки. required – это булев атрибут, как autofocus. Давайте посмотрим его в действии.

<input type="text" name="given-name" required>

<input type="text" name="given-name" required>

В настоящее время required реализован только в Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+, так что до поры до времени вам придется продолжить писать скрипты проверки заполнения полей на клиентской стороне прочих браузеров (*кхе-кхе* IE!). Opera, Chrome и Firefox показывают пользователю при отправке формы сообщение об ошибке. В большинстве браузеров ошибки затем локализуются на основе задекларированного языка. Safari не показывает сообщение об ошибке при отправке, а вместо этого помещает это поле в фокус.

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

Отображение по умолчанию сообщения об ошибке «required» зависит от отдельного браузера; в настоящее время «пузырю» с сообщением об ошибке во всех браузерах нельзя назначать стили CSS. У Chrome’а, тем не менее, имеется собственное свойство, которое можно применять для назначения стилей сообщению об ошибке. Питер Гастон (Peter Gasston) написал статью о синтаксисе. Также можно назначить стили вводу данных с помощью псевдокласса :required. Альтернатива состоит в отмене формулировки и стилей в JavaScript’е с помощью метода setCustomValidity(). Также очень важно не забывать, что такая браузерная валидация не заменяет валидацию серверную.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

pattern

Атрибут pattern обычно сильно волнует многих разработчиков (ну, настолько волнует, как любой атрибут формы). Он определяет JavaScript регулярное выражение для поля, значение которого нужно проверить. Pattern облегчает нам применение отдельной проверки кодов, номеров счетов и так далее. Возможности pattern обширны, и вот всего лишь один простой пример с использованием номера продукта.

<label>Product Number: <input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/> </label>

<label>Product Number:

<input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/>

</label>

Этот шаблон предписывает, что номер продукта должен быть одной цифрой [0-9], за которой следуют три заглавные буквы [A-Z]{3}. Посмотреть еще шаблоны можно на вебсайте шаблонов HTML5, где имеется перечень обычных регулярных выражений шаблонов стиля для того, чтобы помочь вам начать с ними работать.

Как и в случае с required, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+ — единственные браузеры, поддерживающие в настоящее время шаблоны. Однако остальные скоро их нагонят по причине быстрого продвижения рынка браузеров.

Элементы list и datalist

Атрибут list дает пользователю возможность ассоциировать список опций с отдельным полем. Значение атрибута списка list должно быть таким же, как ID элемента datalist, находящегося в том же документе. Элемент datalist для HTML5 является новым и представляет предопределенный список опций элементов управления формы. Он работает аналогично внутрибраузерным полям поиска, автоматически дополняющим слова при введении текста.

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

Следующий пример показывает, как сочетаются list и datalist.

<label>Your favorite fruit: <datalist> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </datalist> If other, please specify: <input type="text" name="fruit" list="fruits"> </label>

<label>Your favorite fruit:

<datalist>

<option value="Blackberry">Blackberry</option>

<option value="Blackcurrant">Blackcurrant</option>

<option value="Blueberry">Blueberry</option>

<!-- … -->

</datalist>

If other, please specify:

<input type="text" name="fruit" list="fruits">

</label>

Добавив элемент select в datalist, можно обеспечить отличную деградацию, просто применив элемент option. Вот шаблон элегантной разметки, созданной Джереми Кейтом (Jeremy Keith), идеально подходящий принципам постепенной деградации HTML5.

<label>Your favorite fruit: <datalist> <select name="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </select> If other, please specify: </datalist> <input type="text" name="fruit" list="fruits"> </label>

<label>Your favorite fruit:

<datalist>

<select name="fruits">

<option value="Blackberry">Blackberry</option>

<option value="Blackcurrant">Blackcurrant</option>

<option value="Blueberry">Blueberry</option>

<!-- … -->

</select>

If other, please specify:

</datalist>

<input type="text" name="fruit" list="fruits">

</label>

Браузерная поддержка list и datalist в настоящее время ограничена Opera 9.5+, Chrome 20+, Internet Explorer 10 и Firefox 4+.

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

multiple

На шаг вперед можно продвинуть свои list и datalist, применив булев атрибут multiple, чтобы можно было ввести из перечня данных более одного значения. Вот пример.

<label>Your favorite fruit: <datalist> <select name="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </select> If other, please specify: </datalist> <input type="text" name="fruit" list="fruits" multiple> </label>

<label>Your favorite fruit:

<datalist>

<select name="fruits">

<option value="Blackberry">Blackberry</option>

<option value="Blackcurrant">Blackcurrant</option>

<option value="Blueberry">Blueberry</option>

<!-- … -->

</select>

If other, please specify:

</datalist>

<input type="text" name="fruit" list="fruits" multiple>

</label>

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

<label>Upload files: <input type="file" multiple name="upload"></label>

<label>Upload files:

<input type="file" multiple name="upload"></label>

multiple поддерживается в Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 и Chrome 4+.

novalidate и formnovalidate

Атрибуты novalidate и formnovalidate обозначают, что при отправке формы не нужно проводить проверку правильности данных. Они оба – булевы атрибуты. formnovalidate может быть применен к input-ам с типом submit или image. Атрибут novalidate можно установить только к элементу form.

Пример использования атрибута formnovalidate может быть приведен на кнопке «сохранить черновик», где у формы есть поля, нужные для отправки черновика, но не требующиеся для сохранения черновика. novalidate будет применяться в тех случаях, когда вам не нужно делать валидацию формы, но требуется добиться преимуществ более удобного пользовательского интерфейса, предлагаемых новыми типами ввода данных.

Применение formnovalidate видно на следующем примере:

<form action="process.php"> <label for="email">Email:</label> <input type="text" name="email" value="[email protected]"> <input type="submit" formnovalidate value="Submit"> </form>

<form action="process.php">

<label for="email">Email:</label>

<input type="text" name="email" value="[email protected]">

<input type="submit" formnovalidate value="Submit">

</form>

А этот пример показывает применение novalidate:

<form action="process.php" novalidate> <label for="email">Email:</label> <input type="text" name="email" value="[email protected]"> <input type="submit" value="Submit"> </form>

<form action="process.php" novalidate>

<label for="email">Email:</label>

<input type="text" name="email" value="[email protected]">

<input type="submit" value="Submit">

</form>

form

Атрибут form используется для соединения элементов input, select или textarea с формой (известных как владельцы формы). Применение form означает, что элементу не нужно быть дочерним по отношению к связанной форме и его можно оттуда убрать в исходниках. Основной случай его применения состоит в том, что кнопки, размещенные в таблицах, теперь можно привязать к форме.

<input type="button" name="sort-l-h" form="sort">

<input type="button" name="sort-l-h" form="sort">

formaction, formenctype, formmethod и formtarget

Каждый из атрибутов formaction, formenctype, formmethod и formtarget имеет соответствующий атрибут к элементу form, с чем вы познакомитесь в HTML4, так что давайте пройдемся по ним вкратце. Эти новые атрибуты были представлены главным образом потому, что вам могут потребоваться альтернативные действия для различных кнопок отправки, в противоположность нескольким формам в документе.

formaction

formaction определяет файл или приложение, которое будет отправлять форма. Он действует так же, как атрибут action на элемент form, и может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»). При отправке формы браузер сначала проверяет наличие атрибута formaction; если тот отсутствует, он продолжает искать в форме атрибут action.

<input type="submit" value="Submit" formaction="process.php">

<input type="submit" value="Submit" formaction="process.php">

formenctype

formenctype подробно описывает, как данные формы кодируются методом POST. Он действует так же, как атрибут enctype на элемент формы, и может применяться с кнопкой отправки или изображения (type=»submit»или type=»image»). Значение по умолчанию, если не включено – application/x-www-formurlencoded.

<input type="submit" value="Submit" formenctype="application/x-www-form-urlencoded">

<input type="submit" value="Submit" formenctype="application/x-www-form-urlencoded">

formmethod

formmethod определяет, который из методов HTTP (GET, POST, PUT, DELETE) будет применяться для отправки данных формы. Действует так же, как атрибут метода на элемент формы, и используется только с кнопкой отправки или изображения (type=»submit» или type=»image»).

<input type="submit" value="Submit" formmethod="POST">

<input type="submit" value="Submit" formmethod="POST">

formtarget

formtarget определяет target window для результатов формы. Действует так же, как атрибут target на элемент form, и может применяться только с кнопкой отправки или изображения (type=»submit» or type=»image»).

<input type="submit" value="Submit" formtarget="_self">

<input type="submit" value="Submit" formtarget="_self">

Резюме атрибутов формы

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

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

В статье мы дали понять, которые из браузеров имеют поддержку типов ввода данных и атрибутов форм HTML5. При условии постоянного выхода новых версий браузеров может быть сложно уследить за тем, что поддерживается, а что нет. Если хотите быть в курсе текущего прогресса, мы предлагаем посещать canius или FindMeByIP или изучение форм HTML5 с Wufoo.

Автор: Richard Clark

Источник: http://html5doctor.com/

Редакция: Команда webformyself.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Учебник HTML 5. Статья "Элементы формы, добавленные в HTML 5"

Данная статья посвящена новым элементам формы (HTML тег <form>), которые были добавлены в HTML 5, к сожалению, теги, которые мы рассмотрим в этой статье, практически не используются в проектах, по той причине, что они пока имеют ограниченную поддержку браузерами (не все современные браузеры поддерживают эти теги).


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


В HTML5 добавлены следующие элементы формы:

  • <datalist> (список предопределенных вариантов для ввода).
  • <keygen> (тег генерации ключей).
  • <output> (результат вычислений).

Список предопределенных вариантов

Элемент <datalist> определяет список предопределенных вариантов для ввода. Пользователи увидят раскрывающийся список предопределенных вариантов, как входных данных. Варианты списка можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и доступен при использовании с элементом <input>, при этом, атрибут list тега <input>, должен соответствовать идентификатору (глобальный атрибут id) элемента <datalist>.

Тег <option> применяется как вложенный элемент списка предопределенных вариантов для ввода и определяет пункты списка (параметры для выбора).

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Тег <datalist></title>
	</head>
	<body>
		<p>Список гостей:</p>
		<input list = "guestlist">
		<datalist id = "guestlist"> <!-- список предопределенных вариантов для ввода -->
			<option value = "Вася"> </option><!-- закрывающие элементы </option> в данном случае можно не использовать -->
			<option value = "Арик"> </option>
			<option value = "Армен"> </option>
		</datalist>
	</body>
</html>

В этом примере с использованием элемента <datalist> мы создали список предопределенных вариантов, элементы списка мы добавили элементом <option> (элементы списка вложены в тег <datalist>). Кроме того, чтобы наш список был виден (мог использоваться) мы создали элемент <input> с атрибутом list, значение которого соответствует значению глобального атрибута id (идентификатор элемента) нашего списка предопределенных вариантов.

Результат нашего примера:

Рис. 35 Список предопределенных вариантов в HTML 5 (тег <datalist>).
Обращаю ваше внимание на то, что браузер Safari не поддерживает тег <datalist>, а Internet Explorer имеет поддержку только с 10-ой версии.

Тег генерации ключей

Тег <keygen> используется для генерации пары ключей — закрытого и открытого. Сами ключи необходимы для шифрования и расшифровки данных. Цель тега <keygen> обеспечить безопасный способ проверки подлинности пользователей.

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

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <keygen> </title>
	</head>
	<body>
		<p>Сгенерировать пару ключей.</p>
		<form action = "example.php" method = "get"> <!-- указываем метод и URL адрес того места, куда отправляется форма -->
			Username: <input type = "text" name = "new_usr">
			Степень защиты: <keygen name = "generator">
			<input type = "submit">
		</form>
	</body>
</html>

Результат нашего примера:

Рис. 36 Тег генерации ключей в HTML 5.

Спецификация HTML5 не определяет, как частный, сгенерированный ключ будет использоваться. Браузеры Internet Explorer и Edge не поддерживает использование данного тега.

Результат вычислений (тег вывода)

Тег <output> определяет область, в которую выводится результат вычислений или действий пользователя (обычно рассчитывается с помощью скриптов). Он может принадлежать определенной форме (элемент <form>), располагаясь внутри нее в качестве дочернего элемента, или ссылаться на неё (атрибут form).

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <output></title>
	</head>
	<body>
		<p>Сложение:</p>
		<form oninput = "с.value = a.valueAsNumber + b.valueAsNumber">
			<input type = "number" id = "a"> +
			<input type = "number" id = "b"> =
			<mark> <output name = "с" for = "a b"> </output> </mark>
		</form>
		<p>Умножение:</p>
		<form oninput = "d.value = e.valueAsNumber * f.valueAsNumber">
			<input type = "number" id = "e"> *
			<input type = "number" id = "f"> =
			<mark> <output  name = "d" for = "e f"> </output> </mark>
		</form>
		<p>Деление:</p>
		<form oninput = "z.value = g.valueAsNumber / h.valueAsNumber">
			<input type = "number" id = "g" step = "10" > /
			<input type = "number" id = "h" step = "5" > =
			<mark> <output  name = "z" for = "g h"> </output> </mark>
		</form>
	</body>
</html>

В данном примере мы создали три формы, в которых прописали функции сложения номерных полей для первой, умножения для второй и деления для третьей (<form oninput = "Переменная3.value = Переменная1.valueAsNumber + | * | / Переменная2.valueAsNumber">). Атрибут событий oninput позволяет задать срабатывание скрипта, когда элемент получает ввод данных от пользователя. Атрибуты событий HTML необходимы для того, чтобы реагировать на какие-то действия пользователя, например, клике мышью или нажатии клавиши на клавиатуре, отправке формы, копировании текста и тому подобное. С полным перечнем возможных событий вы можете ознакомиться в разделе "Атрибуты событий".

Обратите внимание, что к тегу <input> применен атрибут type со значением number (элемент управления для ввода числа с плавающей точкой), благодаря которому мы можем щелчком мыши менять значение на 1 шаг в сторону увеличения или уменьшения. Для полей третьей формы мы указали атрибут step, которым мы можем регулировать этот шаг, например step = "5" будет увеличивать, или уменьшать значение на 5, step = "10" соответственно на 10.

Атрибут for внутри элементов <output> определяет отношения между результатом расчета и элементами, используемые при нём. Результат выполнения наших функций мы выводим внутри элемента <output>, которые для наглядности мы поместили внутрь тега подсветки <mark>.

Результат нашего примера:

Сложение :

Умножение:

Деление:


Рис. 37 Использование тега вывода в HTML 5.

Обращаю Ваше внимание на то, что браузеры Internet Explorer и Edge не поддерживает использование данного тега.


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. Что появилось нового

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

Нововведения

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

Новые поля ввода

Появилось очень много новых типов полей. Все они задаются с помощью элемента input с различным type. Некоторые из них:
Type = “email” – с виду это обычное текстовое поле, но на самом деле в него встроена автоматическая валидация. Если браузер не находит знак @, который является основным атрибутом любого email-адреса, то он просто не пропускает такую форму на отправку. Давайте проверим это в последней версии Chrome, где все это отлично поддерживается.

<form> <input type = "text" value = "Введите что-то"> <input type = "email" value = "Введите email"> <input type = "submit" value = "Готово"> </form>

<form>

<input type = "text" value = "Введите что-то">

<input type = "email" value = "Введите email">

<input type = "submit" value = "Готово">

</form>

Формы в html5. Что появилось нового

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Формы в html5. Что появилось нового

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

Type = “tel” – для ввода номера телефона. В общем-то, в нем нет такой валидации, но интересно, что если заполнять такую форму с мобильных устройств, то при нажатии на нее может изменится раскладка клавиатуры (будут показываться цифры). То же самое происходит и в случае с type = email.

Type = “color” – сюда ничего вводить не нужно. Интересует нас по той причине, что тут можно выбрать цвет, причем сделать это в интуитивно понятной палитре, такой, как в paint. Вот так это выглядит:

Формы в html5. Что появилось нового

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

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

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

Формы в html5. Что появилось нового

Собственно, есть такие же поля datetime и datetime-local. Они предназначены для того, чтобы определять в них время (и время с указанием явного часового пояса, соответственно).

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

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

В этом плане Google Chrome и Opera подают всем пример, потому что поддерживают абсолютно все новые значения. К сожалению, от них серьезно отстают Mozilla и IE. В Explorer только с десятой версии поддерживаются пару новых полей.

Формы в html5. Что появилось нового

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Выбор обязательных полей

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

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

<input type = "date" required>

<input type = "date" required>

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

Формы в html5. Что появилось нового

Подсказка

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

Если вместо value написать атрибут placeholder, то текст будет сам исчезать, когда пользователь начнет вводить свое значение. Это более удобно.

Список возможных значений

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

<input type = "text" placeholder = "Имя" list = "names"> <datalist id = "names"> <option value = "Вася"> <option value = "Миша"> <option value = "Петя"> <option value = "Коля"> </datalist>

<input type = "text" placeholder = "Имя" list = "names">

<datalist id = "names">

<option value = "Вася">

<option value = "Миша">

<option value = "Петя">

<option value = "Коля">

</datalist>

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

Проверяем все в работе. Теперь обладатели данных имен являются счастливчиками – им не придется вручную писать свое имя)))

Формы в html5. Что появилось нового

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

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

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

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

Итог

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

Формы в html5. Что появилось нового

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Формы в html5. Что появилось нового

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Формы в HTML5 | WebReference

Пока нам удалось создать несколько интересных версий сайта. Мы еще не охватили формы, в которых пользователи могут вводить данные. Формы широко используются по всему Интернету: поисковые системы вроде Google или Bing, поля статуса в Facebook, редактор писем в Gmail позволяют набирать или отправлять информацию.

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

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

Как видите, синий цвет указывает на имена или описание каждого поля. Зелёные элементы показывают места, где вы можете ввести однострочный текст. Оранжевая область позволяет вводить длинные куски текста, а фиолетовый цвет используется для кнопки отправки формы. Для каждой группы мы будем использовать один и тот же тег.

Для имен задействуем <label>. Для коротких полей — <input type="text">. Для больших текстов будем использовать <textarea>. Кнопки сделаны с помощью <input type="submit">. Они являются наиболее популярными элементами HTML, которые применяются для построения форм на сайтах. Как всегда, мы начинаем с чистого шаблона HTML, а затем добавляем больше элементов.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Форма</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
  </body>
</html>

Мы должны включить соответствующий тег, который говорит браузеру: «Эй, форма начинается здесь!». Это очень похоже на тег <article> для указания, откуда начинать статью. В HTML мы используем тег <form> в качестве элемента формы.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Форма</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <form>
    </form>
  </body>
</html>

Теперь мы хотим добавить первое описание: «Ваше имя». Начиная отсюда мы будем рассматривать фрагменты кода, которые содержатся в разделе <form>, потому что остальная часть HTML уже хорошо вам известна.

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
</form>

Здесь у нас есть элемент <label>, который описывает имя и элемент <input> для ввода текста. Тег <input> содержит три атрибута: type со значением text, name со значением nickname и id также со значением nickname. Значение атрибута type означает, что это короткое текстовое поле.

Ниже показано, как это поле выглядит для таких типов полей.

Вы будете использовать в коде <input type="text"> для указания, что пользователь может набирать текст в этом поле. Обратите внимание, что текстовые поля могут быть оформлены с помощью CSS. Мы можем изменить рамку, ширину или расстояние между текстом и границей текстового поля. Грубый пример показан ниже.

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

Отметим также взаимосвязь между значением id и значением атрибута for атрибута в <label>.

<label for="nickname">Ваше имя:</label>
<input type="text" name="nickname">

В атрибуте for вы должны использовать идентификатор поля, описание которого находится в <label>.

Давайте сделаем другую форму, теперь для поля email.

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
  <label for="user-email">Ваш e-mail:</label>
  <input type="email" name="user-email">
</form>

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

Следующим полем для добавления является место для комментария. Для длинных текстов мы используем тег <textarea>.

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
  <label for="user-email">Ваш e-mail:</label>
  <input type="email" name="user-email">
  <label for="content">Содержание:</label>
  <textarea rows="10" cols="50" name="content" ></textarea>
</form>

Обратите внимание, что мы использовали два новых атрибута: rows и cols. Атрибут rows применяется для установки количества строк текста, которые могут быть введены в поле, пока не появится полоса прокрутки. cols применяется для определения количества символов в каждой строке. Попробуйте самостоятельно изменить значения и посмотреть, как всё поле расширяется или сжимается соответственно.

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

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
  <label for="user-email">Ваш e-mail:</label>
  <input type="email" name="user-email">
  <label for="content">Содержание:</label>
  <textarea rows="10" cols="50"  name="content" ></textarea>
  <input type="submit" value="Добавить">
</form>

Элемент <input> содержит атрибут type равный submit. То что вы напишите в атрибуте value будет отображаться как текст на кнопке.

Наш код для формы теперь выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Форма</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <form>
      <label for="nickname">Ваше имя:</label>
      <input type="text" name="nickname">
      <label for="user-email">Ваш e-mail:</label>
      <input type="email" name="user-email">
      <label for="content">Содержание:</label>
      <textarea rows="10" cols="50" name="content"></textarea>
      <input type="submit" value="Добавить">
    </form>
  </body>
</html>

Наш браузер отображает это так.

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

Автор и редакторы

Автор: Дамиан Вельгошик

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Формы HTML5 » Энциклопедия HTML5

Новые формы в языке HTML5

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

Тег <form>

Новые атрибуты и их значения в теге form:

  • autocomplete="on/off" — включает/отключает автозаполнение у форм, если в браузере автозаполнение отключено, то атрибут не работает
  • novalidate="novalidate" — отключает встроенную проверку данных, введённых пользователем в поля <input type="email" /> и <input type="url" />

Тег <input />

Рассмотрим новые атрибуты HTML5 и их значения в теге input:

autocomplete="on/off" — включает/отключает автозаполнение у тега input, если в браузере автозаполнение отключено, то атрибут работать не будет.

autofocus="autofocus" — установка фокуса на элемент.

form="idNameForm" — связывает тег input, с формой по его атрибуту id, при условии что тег input, находится вне формы.

formaction="URL" — указывает на адрес программы, которая будет обрабатывать данные введённые в тег input, аналогичен атрибуту action=" " у тега form

formenctype=" " — указывает на способ кодировния данных при их отправки на сервер, аналогичен атрибуту enctype=" ", у тега form, имеет следующие значения:
application/x-www-form-urlencoded — не латинские символы кодируются их шестнадцатеричными кодами, пробелы заменяются знаком +, является значением по умолчанию,
multipart/form-data — данные не кодируются,
text/plain — данные не кодируются, но пробелы заменяются знаком +

formmethod="get/post" — указывает каким методом отправить данные, post или get

formnovalidate="formnovalidate" — отключает встроенную проверку данных, аналогичен атрибуту novalidate="novalidate" у тега form

formtarget="имя окна/_blank/_self/_parent/_top" — указывет на окно в которое будет загружаться, результат обработки данных, аналогичен атрибуту target=" " у тега form

list="idName" — указывает на значение идентификатора id тега datalist, в котором находится список вариантов появляющиеся при вводе текста в поле.

max="число" — указывает на максимальное число, которое можно ввести в поле.

min="число" — указывает на минимальное число, которое можно ввести в поле.

multiple="multiple" — позволяет указать несколько e-mail адресов, в поле через запятую, или загрузить несколько файлов.

pattern="шаблон" — позволяет создавать шаблоны, исходя из которых принимается решение о верности или не верности введённых данных, атрибут предназначен для создания полей ввода, для различных типов данных.

placeholder="текст" — указывает на строку, которая находтся в текстовом поле, она исчезает когда пользователь начинает вводить данные.

readonly="readonly" — указывает на текстовое поле, в которое пользователь не может ввести данные.

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

step=" " — указывает на шаг, при введении чисел.

Атрибут type=" "

У атрибута type=" " в языке HTML5, добавилось следующие значения:

type="color" — создаёт виджет выбора цвета.

type="date" — создаёт поле для ввода даты, при помощи виджета календаря (далее ВК).

type="datetime" — создаёт поле для ввода даты и времени, (ВК)

type="datetime-local" — создаёт поле для ввода даты и местного времени, (ВК)

type="email" — создаёт поле для ввода e-mail

type="month" — создаёт поле для ввода месяца, (ВК).

type="number" — создаёт поле для ввода числа.

type="range" — создаёт ползунок.

type="search" — создаёт поисковое поле.

type="tel" — создаёт поле для ввода телефонного номера.

type="time" — создаёт поле для ввода даты и времени, (ВК), без часового пояса.

type="url" — создаёт поле для ввода url.

type="week" — создаёт поле для ввода недели (ВК).

Тег <keygen>

Теги <keygen> </keygen> используются для шифровки и расшифровки данных.

Тег <output>

Теги <output> </output> создают область для вывода работы скрипта.

Читать далее: Новые технологии HTML5

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

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