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