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

Примечание. Мы рассмотрим, как работают эти атрибуты, в нашей статье «Отправка формы данных» позже.
А пока добавьте указанный выше

элемент в свой HTML .

Элементы , и _</span></h3> <br />Наша контактная форма несложная: часть ввода данных содержит три текстовых поля, каждое из которых имеет соответствующий <u><label></u>: <br /><ul> <li/> <br />Поле ввода имени представляет собой однострочное текстовое поле . <br /><li/> <br />Поле ввода для электронной почты представляет собой ввод типа электронной почты : <a href="/prodoljenie.html">однострочное текстовое поле</a>, которое принимает только адреса электронной почты. <br /><li/> <br />Поле ввода для сообщения представляет собой <u><textarea></u>; многострочное текстовое поле. <br /></ul> <br />С точки зрения HTML-кода, для реализации этих виджетов формы нам нужно что-то вроде следующего: <br /><form action="/my-handling-form-page" method="post"> <br /><ul> <br /><li> <br /><label for="name">Name:</label> <br /><input type="text" id="name" name="user_name" /> <br /></li> <br /><li> <br /><label for="mail">Email:</label> <br /><input type="email" id="mail" name="user_email" /> <br /></li> <br /><li> <br /><label for="msg">Message:</label> <br /><textarea id="msg" name="user_message">



Скопировать в буфер обмена
Обновите код формы, чтобы он выглядел так, как показано выше.
Элементы

нужны для того, чтобы удобно структурировать наш код и упростить стилизацию (см. далее в статье). Для удобства использования и доступности мы включаем явную метку для каждого элемента управления формы. Обратите внимание на использование атрибута for для всех элементов, который принимает в качестве значения элемент id управления формы, с которым он связан — именно так вы связываете элемент управления формы с его меткой.
В этом есть большое преимущество — он связывает метку с элементом управления формы, позволяя пользователям мыши, трекпада и сенсорного устройства щелкнуть метку, чтобы активировать соответствующий элемент управления, а также предоставляет доступное имя для чтения с экрана. своим пользователям. Дополнительные сведения о метках форм см. в разделе Как структурировать веб-форму .
В элементе самым важным атрибутом является typeатрибут. Этот атрибут чрезвычайно важен, потому что он определяет способ отображения и поведения элемента. Вы найдете больше об этом в статье Основные собственные элементы управления формы позже.

• 
  В нашем простом примере мы используем текст значения для первого ввода — значение по умолчанию для этого атрибута. Он представляет собой базовое однострочное текстовое поле, которое принимает любой тип ввода текста.
  
• 
  Для второго входа мы используем значение email , которое определяет однострочное текстовое поле, которое принимает только правильно сформированный адрес электронной почты. Это превращает обычное текстовое поле в своего рода «интеллектуальное» поле, которое будет выполнять некоторые проверки достоверности данных, введенных пользователем. Это также приводит к тому, что более подходящая раскладка клавиатуры для ввода адресов электронной почты (например, с символом @ по умолчанию) появляется на устройствах с динамической клавиатурой, таких как смартфоны. Вы узнаете больше о проверке формы в статье о проверке формы на стороне клиента позже.
  

И последнее , но не менее важное: обратите внимание на синтаксис vs. Это одна из странностей HTML. Тег является пустым элементом , что означает, что ему не нужен закрывающий тег. </u> не является пустым элементом, то есть он должен быть закрыт соответствующим закрывающим тегом. Это влияет на специфическую особенность форм: то, как вы определяете значение по умолчанию. Чтобы определить значение элемента по умолчанию, <u><input></u> вы должны использовать <u>value</u> атрибут следующим образом: <br /><input type="text" value="by default this element is filled with this text" /> <br />Скопировать в буфер обмена <br />С другой стороны, если вы хотите определить значение по умолчанию для a <u><textarea></u>, вы помещаете его между открывающим и закрывающим тегами элемента <u><textarea></u>, например: <br /><textarea> <br />by default this element is filled with this text <br />
Скопировать в буфер обмена

Элемент _

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

Send your message

Скопировать в буфер обмена
Элемент также принимает type атрибут — он принимает одно из трех значений: submit, reset, или button.

• 
  Щелчок по submit кнопке (значение по умолчанию) отправляет данные формы на веб-страницу, определенную атрибутом action элемента .
  
• 
  Щелчок по reset кнопке немедленно сбрасывает все виджеты формы к их значениям по умолчанию. С точки зрения UX это считается плохой практикой, поэтому вам следует избегать использования кнопок такого типа, если у вас действительно нет веских причин для их включения.
  
• 
  Щелчок по кнопке ничего не button делает ! Это звучит глупо, но это удивительно полезно для создания пользовательских кнопок — вы можете определить их функциональность с помощью JavaScript.