Подробно об элементе формы

В предыдущем модуле вы узнали, как использовать элемент <form> . В этом модуле вы узнаете, как работает форма и когда ее использовать.

Стоит ли использовать элемент <form> ?

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

Однако в большинстве случаев, когда вы храните или обрабатываете данные пользователей, вам следует использовать элемент <form> . Как вы узнаете из этого модуля, использование <form> дает вам множество встроенных функций браузеров, которые в противном случае вам пришлось бы создавать самостоятельно. <form> также имеет множество встроенных по умолчанию функций специальных возможностей. Если вы хотите избежать перезагрузки страницы, когда пользователь отправляет форму, вы все равно можете использовать элемент <form> , но усовершенствовать его с помощью JavaScript .

Как работает <form> ?

Вы узнали, что <form> — лучший способ обработки пользовательских данных. Теперь вы можете задаться вопросом: как работает форма?

<form> — это контейнер для элементов управления интерактивной формы.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

Как работает отправка формы?

Когда вы отправляете <form> , браузер проверяет атрибуты <form> . Данные отправляются в виде запроса GET или POST в соответствии с атрибутом method . Если атрибут method отсутствует, запрос GET выполняется к URL-адресу текущей страницы.

Как получить доступ к данным формы и обработать их? Отправленные данные могут обрабатываться с помощью JavaScript на внешнем интерфейсе с помощью запроса GET или с помощью кода на внутреннем интерфейсе с помощью запроса GET или POST . Узнайте больше о типах запросов и переносе данных форм .

При отправке формы браузер отправляет запрос к URL-адресу, который является значением атрибута action . Кроме того, браузер проверяет, имеет ли кнопка «Отправить» атрибут formaction . В этом случае используется определенный там URL-адрес.

Кроме того, браузер просматривает дополнительные атрибуты элемента <form> , например, чтобы решить, следует ли проверять форму ( novalidate ), использовать автозаполнение ( autocomplete="off" ) или какую кодировку использовать ( accept-charset ).

Попробуйте создать форму , в которой пользователи смогут указать свой любимый цвет. Данные должны быть отправлены в виде запроса POST , а URL-адрес, по которому данные будут обрабатываться, должен быть /color .

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

Убедитесь, что пользователи могут отправить вашу форму

Есть два способа отправить форму. Вы можете нажать кнопку «Отправить» или нажать Enter при использовании любого элемента управления формой.

Кнопку «Отправить» можно добавить разными способами. Один из вариантов — использовать элемент <button> внутри формы. Пока вы не используете type="button" он работает как кнопка «Отправить» . Другой вариант — использовать <input type="submit" value="Submit"> .

Третий вариант — использовать <input type="image" alt="Submit" src="submit.png"> для создания графической кнопки «Отправить» . Однако теперь, когда вы можете создавать графические кнопки с помощью CSS, не рекомендуется использовать type="image" .

Разрешить пользователям отправлять файлы

Используйте <input type="file"> чтобы люди могли загружать и отправлять файлы при необходимости.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

Сначала добавьте в форму элемент <input> с type="file" . Добавьте атрибут multiple , если пользователи должны иметь возможность загружать несколько файлов.

Чтобы пользователи могли загружать файлы, необходимо еще одно изменение — установите атрибут enctype в вашей форме. Значение по умолчанию — application/x-www-form-urlencoded .

<form method="post" enctype="multipart/form-data">
…
</form>

Чтобы убедиться, что файлы можно отправлять, измените его на multipart/form-data . Без этой кодировки файлы невозможно отправить с помощью POST запроса.

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

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

Ресурсы

• HTML-элемент формы
• Рекомендации по кнопке «Отправить»