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

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

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

Как это сделать с помощью HTML?

В 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 обрабатывал данные формы — как бы вы это сделали? Попробуйте !

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

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

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

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

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

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

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

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

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

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

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

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

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

Если данные доступны для совместного использования, вы можете использовать метод GET . Таким образом, данные будут добавлены в историю вашего браузера, поскольку они включены в URL-адрес. Формы поиска часто используют это. Таким образом, вы можете добавить в закладки страницу результатов поиска.

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

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

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

Ресурсы

Элемент <form> .