Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Изучите основы использования форм в Интернете, прочитав это введение в элемент формы.
Представьте, что вы хотите спросить людей на своем веб-сайте об их любимом животном. В качестве первого шага вам нужен способ сбора данных.
Как это сделать с помощью HTML?
В HTML вы можете создать это, используя элемент формы ( ), с и кнопку отправки .
Примечание. Вы можете задаться вопросом, откуда взялись стили для этого примера. Они взяты из общей таблицы стилей , включенной во все демо-версии . Заинтересованы в стилизации форм? Вы можете узнать об этом в следующем модуле .
Элемент формы состоит из начального тега
.Между открывающим и конечным тегом вы можете включить элементы формы, такие как и , для разных типов пользовательского ввода. Вы узнаете больше об элементах формы в следующем модуле.
Примечание. Используйте HTTPS для защиты всех веб-сайтов и форм, а не только если вы обрабатываете конфиденциальные данные. Таким образом, все данные шифруются. Узнайте больше: Безопасные соединения с помощью HTTPS .
Когда форма отправляется (например, когда пользователь нажимает кнопку «Отправить» ), браузер отправляет запрос. Сценарий может ответить на этот запрос и обработать данные.
Примечание. Для обработки формы необходим сценарий (работающий на сервере или клиенте). Он может проверять данные, сохранять их в базе данных или выполнять другие операции на основе данных формы.
По умолчанию запрос делается на страницу, где отображается форма.
Предположим, вы хотите, чтобы сценарий, запущенный на https://web.dev обрабатывал данные формы — как бы вы это сделали? Попробуйте !
Переключить ответВы можете выбрать расположение сценария, используя атрибут action .
В предыдущем примере выполняется запрос https://example.com/animals . Скрипт на сервере example.com может обрабатывать запросы к /animals и обрабатывать данные из формы.
По умолчанию данные формы отправляются как запрос GET , при этом отправленные данные добавляются к URL-адресу. Если пользователь отправляет слово «лягушка» в приведенном выше примере, браузер отправляет запрос на следующий URL-адрес:
https://example.com/animals?animal=frog В этом случае вы можете получить доступ к данным во внешнем или внутреннем интерфейсе, получив данные по URL-адресу.
Если вы хотите, вы можете указать форме использовать запрос POST , изменив атрибут метода.
При использовании POST данные включаются в тело запроса .
Данные не будут видны в URL-адресе, и доступ к ним можно будет получить только из внешнего или внутреннего скрипта.
Есть варианты использования обоих методов.
Для форм, обрабатывающих конфиденциальные данные, используйте метод POST . Данные зашифрованы (если вы используете HTTPS) и доступны только внутреннему сценарию, обрабатывающему запрос. Данные не отображаются в URL-адресе. Типичным примером является форма входа.
Если данные доступны для совместного использования, вы можете использовать метод GET . Таким образом, данные будут добавлены в историю вашего браузера, поскольку они включены в URL-адрес. Формы поиска часто используют это. Таким образом, вы можете добавить в закладки страницу результатов поиска.
Теперь, когда вы узнали о самом элементе формы, пришло время узнать о полях формы , которые сделают ваши формы интерактивными.
Проверьте свои знания элемента формы
Как выглядит открывающий тег элемента формы?