Подробное описание элемента формы

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

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

Browser Support

  • Chrome: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 1.

Source

Не всегда нужно помещать элементы управления формы в элемент <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" не рекомендуется.

Наконец, избегайте добавления тайм-аутов. Предоставляйте пользователям столько времени, сколько им нужно для отправки формы. Тайм-ауты приводят к потере данных и раздражают пользователей. Ознакомьтесь с рекомендациями W3C по тайм-аутам форм .

Предоставьте пользователям возможность отправлять файлы.

Используйте <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 запроса.

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

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

Какое значение параметра enctype необходимо для отправки файлов?

multipart/form-data
🎉
multipart/form-files
Попробуйте еще раз!
form-data
Попробуйте еще раз!
form-files
Попробуйте еще раз!

Можно ли отправить данные пользователя без <form>

Нет
Попробуйте еще раз!
Да, с помощью JavaScript.
🎉
Да, с помощью Flash.
Попробуйте еще раз!
Да, с использованием HTML5.
Попробуйте еще раз!

Как можно отправить <form> ?

Нажмите <button> .
Попробуйте еще раз!
Нажмите Enter .
Попробуйте еще раз!
Нажмите на <input type="image"> .
Попробуйте еще раз!
Все ответы верны.
🎉

Ресурсы