Веб-формы — Работа с пользовательскими данными

Payment form

Required fields are followed by

*.
Скопировать в буфер обмена
Далее мы добавим в форму более крупный раздел кода под нашей предыдущей записью. Здесь вы увидите, что мы заключаем поля контактной информации в отдельный

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

элемент списка ( ). У нас также есть два стандартных text и связанные с ними элементы, каждый из которых содержится внутри
, и ввод пароля для ввода пароля. Добавьте этот код в форму:

Contact information

Title

• 
  
  
  King
  
  


• 
  
  
  Queen
  
  


• 
  
  
  Joker
  
  

Name:
*





Email:
*





Password:
*

Скопировать в буфер обмена
Второй

нашей формой является платежная информация. У нас есть три отдельных элемента управления вместе с их метками, каждый из которых содержится внутри файла
. Во-первых, это раскрывающееся меню ( ) для выбора типа кредитной карты. Второй элемент типа tel, для ввода номера кредитной карты; хотя мы могли бы использовать этот numberтип, нам не нужен пользовательский интерфейс счетчика чисел. Последний элемент типа text, для ввода срока действия карты; это включает в себя атрибут -заполнитель, указывающий правильный формат, и шаблон , который проверяет, что введенная дата имеет правильный формат. Эти новые типы ввода повторно представлены в Типы ввода HTML5. Введите следующее под предыдущим разделом: