Главная страница » HTML » 31. Отправка формы

31. Отправка формы

Отправка формы — важная часть взаимодействия пользователя с веб-сайтами. В этом уроке мы рассмотрим, как настроить и отправить форму на сервер, какие методы отправки существуют, и как обрабатывать данные формы.

Основы отправки формы

Форма создается с помощью тега <form>. Важнейшие атрибуты формы:

action: URL, куда будут отправлены данные формы.
method: метод отправки данных (GET или POST).

Пример базовой формы:

				
					<form action="/submit-form" method="POST">
  <!-- Поля формы -->
  <input type="text" name="username" placeholder="Введите ваше имя">
  <input type="submit" value="Отправить">
</form>

Методы отправки формы

Метод GET

Метод GET отправляет данные формы через URL. Используется для получения данных от сервера, не для изменения состояния сервера. Данные формы видны в строке адреса браузера.

				
					<form action="/submit-form" method="GET">
  <label for="search">Поиск:</label>
  <input type="text" id="search" name="query" placeholder="Введите запрос">
  <input type="submit" value="Поиск">
</form>

Метод POST

Метод POST отправляет данные в теле HTTP-запроса. Используется для отправки конфиденциальных данных и внесения изменений на сервере.

				
					<form action="/submit-form" method="POST">
  <label for="username">Имя пользователя:</label>
  <input type="text" id="username" name="username" placeholder="Введите ваше имя">
  <input type="submit" value="Отправить">
</form>

Поля формы

Формы могут содержать различные типы полей:

Текстовые поля

				
					<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" placeholder="Введите ваше имя">

Парольные поля

				
					<label for="password">Пароль:</label>
<input type="password" id="password" name="password" placeholder="Введите ваш пароль">

Поля электронной почты

				
					<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Введите ваш email">

Поля для ввода чисел

				
					<label for="age">Возраст:</label>
<input type="number" id="age" name="age" min="0" max="120">

Поля для выбора даты

				
					<label for="birthdate">Дата рождения:</label>
<input type="date" id="birthdate" name="birthdate">

Выпадающие списки

				
					<label for="country">Страна:</label>
<select id="country" name="country">
  <option value="ru">Россия</option>
  <option value="us">США</option>
  <option value="cn">Китай</option>
</select>

Текстовые области

				
					<label for="message">Сообщение:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Введите ваше сообщение"></textarea>

Кнопка отправки

Кнопка отправки формы создается с помощью тега <input type="submit"> или <button type="submit">.

				
					<input type="submit" value="Отправить">

Или

<button type="submit">Отправить</button>

Заключение

В этом уроке мы рассмотрели, как настраивать и отправлять формы в HTML. Мы изучили методы отправки, различные типы полей формы и рассмотрели примеры использования форм.

Тестовое задание

Создайте веб-страницу, которая содержит форму с следующими элементами:

Поле для ввода имени пользователя.
Поле для ввода пароля.
Поле для ввода email.
Выпадающий список для выбора страны.
Чекбокс для подписки на новости.
Кнопку для отправки формы.

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Регистрация пользователя</title>
</head>
<body>
  <h1>Регистрация пользователя</h1>
  <form action="/register" method="POST">
    <label for="username">Имя пользователя:</label>
    <input type="text" id="username" name="username" placeholder="Введите ваше имя"><br>

    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" placeholder="Введите ваш пароль"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Введите ваш email"><br>

    <label for="country">Страна:</label>
    <select id="country" name="country">
      <option value="ru">Россия</option>
      <option value="us">США</option>
      <option value="cn">Китай</option>
    </select><br>

    <label for="subscribe">Подписаться на новости:</label>
    <input type="checkbox" id="subscribe" name="subscribe"><br>

    <input type="submit" value="Зарегистрироваться">
  </form>
</body>
</html>

Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.