Используйте формы для получения данных от пользователей

Изучите основы использования форм в Интернете с помощью этого введения в элемент формы.

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

В HTML это можно сделать с помощью элемента формы ( <form> ), <input> с <label> и кнопки отправки <button> .

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

Что такое элемент формы?

Элемент формы состоит из начального тега <form> , необязательных атрибутов, определенных в начальном теге, и конечного тега </form> .

Между начальным и конечным тегами можно разместить элементы формы, такие как <input> и <textarea> для различных типов пользовательского ввода. Подробнее об элементах формы вы узнаете в следующем модуле.

Где обрабатываются данные?

При отправке формы (например, когда пользователь нажимает кнопку «Отправить ») браузер отправляет запрос. Скрипт может ответить на этот запрос и обработать данные.

По умолчанию запрос делается на страницу, где отображается форма.

Допустим, вам нужен скрипт, работающий по адресу https://web.dev , для обработки данных формы. Как это сделать? Попробуйте на CodePen !

      <form action="https://example.com/animals"></form>

В предыдущем примере выполняется запрос к https://example.com/animals . Скрипт на бэкенде example.com может обрабатывать запросы к /animals и обрабатывать данные из формы.

Как передаются данные?

По умолчанию данные формы отправляются как GET -запрос, при этом отправленные данные добавляются к URL-адресу. Если пользователь отправляет «frog» в предыдущем примере, браузер отправляет запрос по следующему URL-адресу:

https://example.com/animals?animal=frog

В этом случае вы можете получить доступ к данным на внешнем или внутреннем сервере, получив данные по URL-адресу.

При желании вы можете указать форме использовать POST запрос, изменив атрибут метода.

<form method="post">
...
</form>

При использовании POST данные включаются в тело запроса .

Данные не будут видны в URL-адресе и к ним можно будет получить доступ только из frontend- или backend-скрипта.

Какой метод следует использовать?

Оба метода имеют свои варианты использования.

Для форм, обрабатывающих конфиденциальные данные, используйте метод POST . Данные шифруются (при использовании HTTPS) и доступны только внутреннему скрипту, обрабатывающему запрос. Данные не отображаются в URL. Типичный пример — форма входа.

Если данные доступны для общего доступа, можно использовать метод GET . После этого данные будут добавлены в историю браузера, поскольку они включены в URL. Этот метод часто используется в формах поиска. Это позволяет добавить страницу с результатами поиска в закладки.

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

Проверьте свое понимание

Проверьте свои знания элемента формы

Ресурсы

Элемент <form> .