Углубленное изучение элемента формы¶

Узнайте все об элементе формы, о том, когда следует использовать форму и как она работает.

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

Нужно ли использовать элемент <form>?¶

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

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

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

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

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

1
2
3
4
5

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

Как происходит отправка формы?¶

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

Как можно получить доступ к данным формы и обработать их? Присланные данные могут быть обработаны с помощью JavaScript на фронтенде с использованием запроса GET или с помощью кода на бэкенде с использованием запросов GET или POST. Подробнее о типах запросов и передаче данных формы.

При отправке формы браузер выполняет запрос на URL, являющийся значением атрибута action. Кроме того, браузер проверяет, есть ли у кнопки Submit атрибут formaction. Если это так, то используется определенный в нем URL.

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

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

1
2
3
4
5

<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>

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

Существует два способа отправки формы. Вы можете нажать кнопку Submit или клавишу Enter при использовании любого элемента управления формой.

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

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

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

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

1
2

<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.

1

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

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

Ресурсы¶

• The form HTML element
• Лучшие практики использования кнопки отправки

Источник — The form element in depth

Комментарии