Html form contact form: How to create a simple HTML contact form

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

• Значение действия — это URL-адрес (определенный сервером), на который данные формы отправляются при отправке формы. Это около , где для отправки данных. Если не добавлять атрибут действия, данные отправляются на текущую страницу, на которой находится форма (на данный момент это нормально).
• Значение метода может быть либо GET , либо POST . GET используется, когда вы хотите получить данные с сервера, например. при отправке параметров поиска или значений фильтров в интернет-магазине. POST используется при отправке данных на сервер, которые обрабатываются и хранятся там, например. при отправке формы входа, формы регистрации пользователя или формы оформления заказа в интернет-магазине. Этот атрибут примерно , как отправлять данные.

Доступно множество различных типов полей ввода. Начнем с самого простого: 9.0003 поле ввода текста .

 <тип ввода = "текст" />
 

Примечание. Тег ввода является самозакрывающимся.

Чтобы сообщить пользователю, что вводить в поле ввода текста, мы добавим осмысленную метку и свяжем ее с полем ввода следующим образом:

 Имя
<тип ввода="текст" имя="имя" />
 

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

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

Как вы могли догадаться, доступно больше типов ввода, чем просто text . Для нашей контактной формы мы хотим, чтобы пользователь ввел свой адрес электронной почты и свой возраст. Для этого мы можем использовать 9Электронная почта 0003 и тип ввода номера соответственно.

 Адрес электронной почты

Возраст

 

Все три типа ввода — текст, электронная почта и номер — выглядят одинаково для пользователя, но доступные функции различаются.

Примечание. По умолчанию поля ввода не отображаются в центре экрана. Я немного схитрил и использовал CSS для скриншотов. 😉

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

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

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

Перейдите на свой веб-сайт, который мы вместе создали в последней учебной статье, и откройте страницу contact. html в текстовом редакторе, чтобы отредактировать код, и в браузере, чтобы посмотреть на результат.

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

 
<раздел>
   
Контактная форма
 
  
    <дел>
      Имя
      <тип ввода="текст" имя="имя" />