Отправка формы в HTML. Как использовать кнопку отправки и атрибуты формы?

отправка формы в html. как использовать кнопку отправки и атрибуты формы?

Принципы отправки форм

Прежде всего, нужно отметить, что отправка формы может быть осуществлена как средствами HTML, так и с помощью встроенного в браузер языка программирования JavaScript. Программирование не является объектом изучения данного курса, поэтому мы рассмотрим базовый функционал.

Форма никаким образом не обрабатывает введенные в неё данные. Процесс отправки нацелен на их передачу серверу, где существует специальная программа, выполняющая анализ. Чтобы браузер смог понять, куда и каким образом отправить форму, HTML определяет ряд дополнительных атрибутов элемента <form>.

Список дополнительных атрибутов:

  • action - URL-адрес программы-обработчика или другого HTML-документа. Именно на этот адрес будет передано содержимое формы.
  • enctype – Указывает, какой способ кодирования будет применен к данным.
  • method - Выбор из двух доступных HTTP-методов передачи данных.
  • target - Определяет, как поступить с ответом сервера. Загрузить его в новое окно или текущее.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример заполнения атрибутов формы</title>
    </head>
    <body>
        <form action="/test-script.php" method="POST" target="_blank"
              enctype="application/x-www-form-urlencoded">

            <!-- текстовые поля ввода -->
            <input type="text" placeholder="Имя">
            <input type="text" placeholder="Фамилия">

            <!-- кнопка отправки формы -->
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>

Адрес отправки и обработка ответа

Атрибут action должен содержать абсолютный или относительный URL-адрес. Он указывает на расположение программы-обработчика, либо другого HTML-документа, который будет загружен после отправки формы. Таким образом, можно показать страницу с сообщением об успехе. Если этот атрибут не задан, то отправка данных будет осуществлена на адрес текущей страницы.

Добавив в значении атрибута target строку «_blank» вы заставите браузер загрузить ответ сервера в новое окно. По умолчанию применяется значение «_self», которое позволяет заменить содержимое текущей страницы.

Кодировка данных

Кодирование данных сама по себе довольно сложная и глубокая тема. Мы раскроем лишь основные моменты. Как правило, вам не потребуется явным образом задавать атрибут enctype. Значение «application/x-www-form-urlencoded», принимаемое им по умолчанию, подойдет в большинстве случае.

При отправке формы все поля будут объединены в одну строку. Её формирование происходит по определенным правилам. Каждое поле представляется парой ключ/значение, где ключ определяется атрибутом name конкретного поля, а значение — данными, введенными в него пользователем. Имя поля отделяется от значения знаком «=». Содержимое разных полей отделяется друг от друга символом «&». Все пробелы в строковых значениях будут заменены на знак «+». После этих преобразований, не буквенно-числовые значения подвергаются дополнительному URL-кодированию.

Ниже мы приводим пример с тремя текстовыми полями. Отправка этой формы сформирует следующую строку с данными «position=general+developer$age=42$task=a+%2B+b», которые будут добавлены к URL текущей страницы. Просто нажмите кнопку с надписью «отправить» и посмотрите в адресную строку браузера. О том, как это произошло рассказывается далее в статье.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример кодирования отправляемых данных</title>
    </head>
    <body>
        <form enctype="application/x-www-form-urlencoded">

            <!-- текстовые поля ввода -->
            <input type="text" value="general developer">
            <input type="text" name="age" value="42">
            <input type="text" name="task" value="a + b">

            <!-- кнопка отправки формы -->
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>

Форма может быть закодирована в формате «multipart/form-data». Он определяет более сложные правила по формированию сообщения. Разбирать их подробно мы не будем. Отметим лишь, что данное значение атрибута enctype нужно использовать, если форма имеет поля, отвечающие за отправку файлов.

Эта кодировка является не обязательной. Файлы могут быть отправлены и со стандартными настройками. Разница будет ощутима при пересылке больших изображений или видео. «multipart/form-data» осуществляет оптимизацию сообщения на стороне браузера, что позволяет передавать файлы гораздо быстрее.

Указание HTTP-метода

HTTP-метод определяет, в каком виде данные поступят на сервер. Их существует несколько, но HTML позволяет указать для отправляемой формы только два . Если атрибут method имеет значение GET, то содержимое запроса будет отправлено в открытом виде. Браузер осуществит его добавление к URL-адресу ресурса, указанного в атрибуте action.

Для наглядности приведем пример. Допустим, мы осуществили отправку формы, приведенной в предыдущем примере, методом GET. Браузер возьмет значение атрибута action, добавит в его конец символ «?», а после него вставит закодированные данные. Это будет выглядеть следующим образом «http://example.ru/handler.php?position=general+developer$age=42$task=a+%2B+b»

Вторым доступным HTTP-методом является POST. В его случае все данные передаются скрыто, внутри тела запроса. Строка URL-адреса остается чистой.

Важно
Так как метод GET предает информацию в открытом виде, не стоит использовать его для важной информации, такой как: пароли пользователей, номера кредитных карт, серии паспортов.

Не нужно использовать его и для передачи большого объема текстовой информации. Например, статей периодического издания. Более того, отправка файлов из формы возможна только методом POST.

Создание кнопки отправки

Чтобы созданная форма имела возможность послать свое содержимое на сервер, в неё необходимо добавить кнопку отправки. HTML позволяет сделать это с помощью элемента <input>, который должен иметь атрибут type со значением submit.

Наличие кнопки отправки внутри формы дает один побочный эффект взаимодействия. Пользователь может осуществить отсылку как при нажатии на кнопке, так и с помощью клавиши enter. Enter сработает в том случае, если хотя бы один из элементов формы находится в фокусе.

Для указания текста, присутствующего на кнопке, нужно использовать атрибут value.

<input type="submit" value="Текст кнопки отправки">

Последние публикации