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

Payment information

Card type:


Visa
Mastercard
American Express




Card number:
*





Expiration date:
*

type="text"
id="expiration"
required="true"
placeholder="MM/YY"
pattern="^(0[1-9]|1[0-2])\/([0-9]{2})$" />

Скопировать в буфер обмена
Последний раздел, который мы добавим, намного проще и содержит только type submit для отправки данных формы. Добавьте это в конец формы:

Validate the payment

Скопировать в буфер обмена
Наконец, завершите форму, добавив внешний

закрывающий тег:

Скопировать в буфер обмена
Вы можете увидеть готовую форму в действии ниже (также найдите ее на GitHub — см. наш исходный код payment-form.html и работает в режиме реального времени ):

Основные собственные элементы управления формой

• 
  Предыдущий
  
• 
  Обзор: формы
  
• 
  Следующий
  

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

,

,

, </u>, <u><label></u>, <u><button></u>и <u><input></u>. В этой статье рассматриваются: <br /><ul> <li/> <br />Общие типы ввода : кнопка , флажок , файл , скрытый , <a href="/kak-vstavite-izobrajenie-v-photoshop.html">изображение </a>, пароль , радио , сброс , отправка и текст . <br /><li/> <br />Некоторые атрибуты, общие для всех элементов управления формы. <br /></ul> <br /><b>Примечание.</b> В следующих двух статьях мы рассмотрим дополнительные, более мощные элементы управления формой. Если вам нужен <a href="/spravochnik-po-swift-karmannij-spravochnik-po-swift.html">более продвинутый справочник</a>, обратитесь к нашему справочнику по элементам форм HTML и, в частности, к <a href="/raschetnaya-chaste-rabochee-zadanie.html">нашему подробному справочнику </a><u><input></u>по типам . <br /></input></input>