~~~ KOCI.INUMO.RU ~~~
HTML5 - новое в формах. Урок 37. В стандарте HTML5 появились новые элементы и атрибуты для форм. Элемент <datalist></datalist> определяет список опций для выбора в инпуте (<input>). Элемент <output> выдает результат вычислений (работает как программка на JavaScript). Элемент <keygen> обеспечивает безопасный способ авторизации пользователей. Тег <keygen> создает поле в форме для генерации пары ключей (пользователь может выбрать степень шифрования: сильную (2048) или среднюю(1024)). Когда форма отправляется, создаются два ключа: один закрытый (частный, private) и один открытый (доступный, публичный, public). Новый тип у инпута "email", т.е. input type="email" позволяет проводить валидацию формата введенного пользователем адреса электронной почты. Новый тип у инпута "number", т.е. input type="number" позволяет вводить пользователю только числовые значения, причем эти значения можно ограничить диапозоном с помощью min="5" max="9". Скрытое текстовое поле hidden.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
37. HTML5 - новое в формах
В стандарте HTML5 появились новые элементы и атрибуты для форм. На данном уроке мы их изучим.
В HTML5 появились следующие новые элементы для форм:
Возможность довольно важная и интересная, поэтому ее стоит знать.
Используется примерно следующим образом:
<input type="hidden" name="input_hidden_type" value="Информацию, касаемую урока 37 передал Бонд. Джеймс Бонд.">
Данная конструкция создает неотображаемое (скрытое) поле. Такой объект нужен для того, чтобы передать служебную информацию, которую пользователю не нужно исправлять и вообще, знать о ней.
Итак, теперь мы с вами знаем о формах достаточно много, включая последние наиболее интересные новинки.
Посмотреть тестовый пример можно здесь:
article_037.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_037.zip ← скачайте пример, чтобы установить на свой сайт...
В HTML5 появились следующие новые элементы для форм:
- <datalist></datalist> - данный элемент определяет список опций для выбора в инпуте (<input>). Элемент <datalist> имеет фичу "автозаполнение" ("autocomplete" feature). Пользователи увидят список предопределенных опций, когда они начинают вводить данные. Для привязки инпута к списку следует использовать атрибут list (в инпуте), значение которого должно сопадать с id элемента <datalist>. В отличии от <select>, пользователь может ввести свое значение, которого не было в предопределенном списке.
- <output> - данный элемент выдает результат вычислений (работает как программка на JavaScript).
- <keygen> - данный элемент обеспечивает безопасный способ авторизации пользователей. Тег <keygen> создает поле в форме для генерации пары ключей (пользователь может выбрать степень шифрования: сильную (2048) или среднюю(1024)). Когда форма отправляется, создаются два ключа: один закрытый (частный, private) и один открытый (доступный, публичный, public). Закрытый ключ хранится локально, а открытый отправляется на сервер. Открытый ключ далее можно использовать для создания сертификата клиента. Данный сертификат, возможно, тут же будет предложен пользователю для загрузки и хранения в локальном хранилище ключей. В этом же хранилище находится закрытый ключ. Такая технология служит для авторизации пользователя в дальнейшем. В нашем примере ниже мы не будем создавать сертификат, а просто отобразим открытый ключ на экране.
- input type="email" - новый тип у инпута "email" позволяет проводить валидацию формата введенного пользователем адреса электронной почты. По непонятной для меня причине валидацию проходят такие адреса как: 11111@11111, впрочем, возможно, это просто недоработка, которая будет исправлена.
- input type="number" - новый тип у инпута "number" позволяет вводить пользователю только числовые значения, причем эти значения можно ограничить диапозоном с помощью min="5" max="9" (т.е. в поле можно будет ввести число от 5 до 9 включительно). Эта возможность очень перспективна и интересна, но сегодня тесты показали, что только Гугль Хром использует эту возможность корректно.
Возможность довольно важная и интересная, поэтому ее стоит знать.
Используется примерно следующим образом:
<input type="hidden" name="input_hidden_type" value="Информацию, касаемую урока 37 передал Бонд. Джеймс Бонд.">
Данная конструкция создает неотображаемое (скрытое) поле. Такой объект нужен для того, чтобы передать служебную информацию, которую пользователю не нужно исправлять и вообще, знать о ней.
Итак, теперь мы с вами знаем о формах достаточно много, включая последние наиболее интересные новинки.
Посмотреть тестовый пример можно здесь:
article_037.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_037.zip ← скачайте пример, чтобы установить на свой сайт...
*** Машина-Функционал для передвижения по страничкам курса HTML ***
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок_05 :: Урок_06 :: Урок_07 :: Урок_08 :: Урок_09 :: Урок_10 :: Урок_11 :: Урок_12 :: Урок_13 :: Урок_14 :: Урок_15 :: Урок_16 :: Урок_17 :: Урок_18 :: Урок_19 :: Урок_20 :: Урок_21 :: Урок_22 :: Урок_23 :: Урок_24 :: Урок_25 :: Урок_26 :: Урок_27 :: Урок_28 :: Урок_29 :: Урок_30 :: Урок_31 :: Урок_32 :: Лаба_2 :: Урок_33 :: Урок_34 :: Урок_35 :: Урок_36 :: Урок_37
Следующие странички, рекомендуемые для посещения и изучения:
Урок 38
Страничка сделана на основе контента курса HTML сайта kocby.ru