JavaRush /Курсы /Модуль 1: Web Core /Формы в HTML: <form>

Формы в HTML: <form>

Модуль 1: Web Core

5 уровень , 0 лекция

Открыта

1.1 Элемент `<form>`

Формы являются важной частью взаимодействия пользователя с веб-сайтами. С помощью форм пользователи могут вводить данные, которые затем отправляются на сервер для обработки. В HTML для создания форм используется элемент <form>

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

Пример использования:

HTML

    
      <form action="/submit" method="post">
        <label for="username">Имя пользователя:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button id="submit" type="submit">Отправить</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const userEmail = document.getElementById("email");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && userEmail.validity.valid) {
            e.preventDefault();
            alert(`Ваше имя: ${userName.value}\n` + `Ваш Email: ${userEmail.value}`);
          }
        });
      </script>

HTML

    
      <form action="/submit" method="post">
        <label for="username">Имя пользователя:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Отправить</button>
      </form>

Атрибуты тега <form>

Атрибут action указывает URL, на который будут отправлены данные формы после нажатия кнопки отправки. Если атрибут action не указан, данные формы будут отправлены на текущий URL.

Пример использования атрибута action:

HTML

    
      <form action="https://example.com/submit">
        <!-- элементы формы -->
      </form>

Атрибут method указывает HTTP-метод, который будет использован для отправки данных формы. Доступны два значения: GET и POST.

GET: данные формы включаются в URL запроса в виде параметров. Этот метод подходит для отправки небольших объемов данных и не должен использоваться для отправки конфиденциальной информации.
POST: данные формы отправляются в теле HTTP-запроса. Этот метод подходит для отправки больших объемов данных и конфиденциальной информации.

Пример использования атрибута method:

HTML

    
      <form action="/submit" method="post">
        <!-- элементы формы -->
      </form>

1.2 Методы отправки данных

Метод GET

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

Пример использования метода GET:

HTML

    
      <form action="/search" method="get">
        <label for="query">Поиск:</label>
        <input type="text" id="query" name="query" required>
        <button id="submit" type="submit">Искать</button>
      </form>
      <script>
        const searchField = document.getElementById("query");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (searchField.validity.valid) {
            e.preventDefault();
            alert(`Вы искали: ${searchField.value}`);
          }
        });
      </script>

HTML

    
      <form action="/search" method="get">
        <label for="query">Поиск:</label>
        <input type="text" id="query" name="query">
        <button type="submit">Искать</button>
      </form>

Особенности метода GET

Данные формы видны в URL, что делает метод неподходящим для передачи конфиденциальной информации
Ограничение на размер данных, так как URL имеет ограниченную длину
Данные могут быть легко закэшированы, и закладка может быть сохранена в браузере

Метод POST

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

Пример использования метода POST:

HTML

    
      <form action="/submit" method="post">
        <label for="username">Имя пользователя:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Пароль:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Отправить</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert(`Добро пожаловать, ${userName.value}!`);
          }
        });
      </script>

HTML

    
      <form action="/submit" method="post">
        <label for="username">Имя пользователя:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Пароль:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Отправить</button>
      </form>

Особенности метода POST

Данные формы не видны в URL, что делает метод подходящим для передачи конфиденциальной информации
Нет ограничений на размер данных, так как данные передаются в теле запроса
Данные не кэшируются и не сохраняются в закладках браузера

1.3 Дополнительные атрибуты

Атрибут enctype

Атрибут enctype используется для указания способа кодирования данных формы при отправке с методом POST. Наиболее часто используемое значение — multipart/form-data, которое необходимо для загрузки файлов.

Пример использования атрибута enctype:

HTML

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Загрузить файл:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Отправить</button>
      </form>

Атрибут target

Атрибут target указывает, где будет отображен ответ сервера после отправки формы. Возможные значения:

_self (по умолчанию): в том же окне или вкладке
_blank: в новом окне или вкладке
_parent: в родительском фрейме
_top: в верхнем фрейме (если используются фреймы)

Пример использования атрибута target:

HTML

    
      <form action="/submit" method="post" target="_blank">
        <!-- элементы формы -->
      </form>

Атрибут novalidate

Атрибут novalidate отключает встроенную в браузер валидацию формы.

Пример использования атрибута novalidate:

HTML

    
      <form action="/submit" method="post" novalidate>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Отправить</button>
      </form>

1.4 Способы отправки данных

Отправка данных формы осуществляется с помощью кнопки отправки: <input type="submit"> или <button type="submit">. Когда пользователь нажимает на эту кнопку, браузер отправляет данные формы на сервер, используя указанный метод и URL.

Вот основные способы отправки данных формы:

1. Кнопка отправки: это самый распространенный способ отправки данных формы. Кнопка отправки может быть создана с помощью элемента <input> или <button>.

Пример с <input>:

HTML

    
      <input type="submit" value="Submit">

Пример с <button>:

HTML

    
      <button type="submit">Submit</button>

2. Клавиша Enter: в текстовых полях формы нажатие клавиши Enter также может вызвать отправку формы.

3. JavaScript: форма может быть отправлена программно с использованием JavaScript. Это полезно, когда необходимо выполнить дополнительные проверки или другие действия перед отправкой данных.

Пример использования JavaScript для отправки формы:

HTML

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Submit</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert("Авторизация прошла успешно!\n" + "\n" + `Добро пожаловать, ${userName.value}!`);
          }
        });
      </script>

HTML

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="button" onclick="submitForm()">Submit</button>
      </form>

JavaScript

    
      function submitForm() {
        document.getElementById('myForm').submit();
      }

Предыдущая Предыдущая лекция

Следующая Следующая лекция

Комментарии (1)

ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ

No Name Уровень 36

11 мая 2025

Наконец-то что то интересное

Формы в HTML: <form>

1.1 Элемент <form>

1.2 Методы отправки данных

1.3 Дополнительные атрибуты

1.4 Способы отправки данных

1.1 Элемент `<form>`