Изучите основы использования форм в Интернете, прочитав это введение в элемент формы.
Представьте, что вы хотите спросить людей на своем веб-сайте об их любимом животном. В качестве первого шага вам нужен способ сбора данных.
Как это сделать с помощью 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 обрабатывал данные формы — как бы вы это сделали? Попробуйте !
Вы можете выбрать расположение сценария, используя атрибут action .
<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><form> .<form-container><form><form-element> Какой атрибут вы можете использовать, чтобы определить, где обрабатывается <form> ?
whereactionaction определяет, где обрабатывается <form> .hrefurlКаков метод запроса по умолчанию?
GETPOST