Для чего используется атрибут enctype у form

Элемент SELECT

Создает меню, из которого можно выбрать один или несколько элементов. Элемент select должен иметь закрывающую метку. Внутри него размещаются элементы option, которые задают значения пунктов меню. Меню имеющие возможность выбора нескольких элементов отображается в виде списка, при выборе только одного элемента меню отображается в виде выпадающего.

Элемент select имеет следующие атрибуты. name Указавае имя меню, которые будет использоваться при передаче. Вобщем-то все аналогично предыдущим элементам. size Этот атрибут устанавливает высоту меню в строках, если оно имеет возможность выбора нескольких элементов. multiple Присутствие этого атрибута указывает на возможность выбора нескольких элементо меню.

Атрибуты элемента option selected Указывает на то, что этот элемент меню инициализируется как выделенный при загрузке документа. value Указывает значение, которое будет передано обработчику формы вместе с атрибутом name, указанного в теге select. Элемент option может не иметь закрывающей метки.

  Red Green Blue 

Элемент TEXTAREA

Элемент textarea создает текстовое поле в форме. Если элемент имеет закрывающую метку, то все что заключено между метками считается инициализирующим содержимым, т.е. имеет такое же значение, как и атрибут value у предыдущих элементов. Этот элемент может иметь следующие атрибуты: name Думаю ясно для чего этот атрибут :-). rows Устанавливает высоту видимого размер поля для ввода текста. Задается в виде количества видимых строк текста. cols Устанавливает количество видимых сиволов в строке. Если введенный текст не помещается в область выделенную для ввода, то браузер должен обеспечить прокрутку содержимого.

 Сюда вы должны ввести текст :-) 

Вобщем я рассказал про формы почти все, если только ничего не забыл. Если вдруг что, то ждите пополнений 🙂

Тег form в html

Тег form добавляет контейнер для размещения элементов управления, с которыми пользователи могут взаимодействовать, чтобы отправить информацию на сервер. Форма используется для сбора информации о посетителях сайта, комментариев, мнений и многого другого. А также для авторизации на некоторых сайтах.

Из всех атрибутов элемента два являются особенно важными, они используются во всех формах: action и method . Атрибут action указывает на расположение скрипта, который обрабатывает информацию, передаваемую браузером при отправке данных формы. Скрипт может быть написан на любом языке, исполняемом на стороне сервера.

Атрибут method указывает метод отправки данных формы. Рекомендуется использовать метод POST , потому что он скрывает отправляемую информацию и позволяет передавать двоичные данные. Тем не менее, в некоторых частных случаях необходимо использовать метод GET .

Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:

• button: кнопка, при нажатии которой могут выполняться различные действия в зависимости от значения атрибута type . А именно:

• submit: отправляет данные формы на сервер;
• reset: сбрасывает значения всех элементов управления к состоянию по умолчанию;
• button: не выполняет никаких действий;
• menu: выводит меню.

• fieldset: группирует наборы элементов управления по определенному критерию;
• input: в зависимости от значения атрибута type данный элемент управления может использоваться для различных целей:

• hidden: скрытый элемент управления, используемый для передачи информации на сервер, как правило, управляется скриптом;
• text: элемент управления, используемый для ввода фрагмента текста одной строкой;
• search: используется для ввода поисковой строки;
• tel: элемент управления тега form , используемый для предоставления номера телефона;
• url: текстовое поле, используемое для ввода одного абсолютного URL-адреса ;
• email: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты;
• password: текстовое поле для ввода паролей, в котором символы скрыты точками;
• datetime: элемент управления для ввода даты и времени;
• date: элемент управления для ввода определенной даты;
• month: элемент управления для ввода определенного месяца;
• week: элемент управления для ввода определенной недели;
• time: элемент управления для ввода о времени;
• number: элемент управления для ввода определенного числа;
• range: для ввода одного или двух чисел в указанном диапазоне;
• color: для ввода цвета;
• checkbox: для ввода логического значения ( истина / ложь );
• radio: элемент управления, используемый для выбора одного из нескольких вариантов;
• file: элемент управления, используемый для загрузки файлов на сервер;
• submit: кнопка для отправки данных HTML тега form ;
• image: то же самое, что submit , но с возможностью вывести вместо кнопки по умолчанию пользовательское изображение;
• reset: кнопка, используемая для сброса значений элементов управления формы;
• button: кнопка без назначенного действия по умолчанию.

• keygen: элемент управления, используемый для генерации открытой / секретной пары ключа;
• label: используется для вывода подписей для элементов управления формы;
• object: объект представления и отображения вложенного контента;
• output: элемент управления, используемый для просмотра результатов вычислений, выполняемых на странице, или результатов взаимодействия пользователя с различными элементами управления формы;
• select: элемент управления для выбора одного или нескольких вариантов из списка;
• textarea: элемент управления, используемый для ввода фрагмента текста, состоящего из одной или более строк;
• img: используется для вывода изображения.

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

Атрибут name этого элемента был удален из предыдущих версий стандарта. В HTML5 он был вновь восстановлен, чтобы дать возможность авторам ссылаться на форму по ее имени.

Примеры

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

В нашем первом примере создается простая форма авторизации с тремя элементами: текстовое поле, поле для ввода пароля и кнопка отправки данных. Тег form action и method указывают местоположение скрипта, отвечающего за обработку данных формы, и метод, используемый для их отправки.

Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.

 
Username: 
Password:

Во втором примере мы добавим в тег form новые элементы управления ( пару переключателей и три чекбокса ). Мы также добавим кнопку reset , чтобы вы могли поэкспериментировать с элементами управления, изменяя их значения и снова сбрасывая с помощью кнопки.

Также мы будем использовать элемент label . С его помощью мы можем связать текст с элементом управления. Самый простой способ сделать это — заключить и текст, и элемент управления в открывающийся и закрывающийся тег.

Full name:

Gender: Male Female

Address:

Interests: Books Movies Videogames

В следующем примере мы немного изменим предыдущий HTML тег form форму, чтобы добавить некоторые из новых элементов управления HTML5 : выбора даты, поле ввода номера телефона и выбор цвета. Кроме этого мы сгруппируем элементы управления с помощью fieldset .

Поддержка браузерами новых элементов управления HTML5 пока еще не является полной. В большинстве случаев вместо неподдерживаемых элементов выводятся резервные текстовые поля, поэтому не следует полагаться на валидность этих полей.

Обратите внимание, что мы используем для атрибута method значение » GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.

Что-то наподобие этого: «?fullname=john&birthdate=15/10/2002&. » .

И, наконец, мы создадим тег form с возможностью загрузки файла. В этом примере нам нужно обратить внимание на пару атрибутов: method , который может принимать только значение » POST «, так как это единственный метод, который может передавать двоичные данные. И enctype , который должен иметь значение » multipart/form-data «. Если данная настройка не соблюдается, загрузка файлов будет невозможна.

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

 
File:
 

Атрибуты

Специальные атрибуты тега form :

ACCEPT-CHARSET

Разделенный пробелами список кодировок символов, которые должны использоваться в форме. Список должен быть отсортирован по приоритетности.

ACTION

URI , указывающий местоположение скрипта, отвечающего за обработку данных, передаваемых через форму. Этот скрипт написан на языке, исполняемом на стороне сервера: ASP , PHP , Python и т.д.

 
Some text:

AUTOCOMPLETE

Одно из двух значений этого атрибута тега form указывают браузеру, должен ли он отображать варианты для поля ввода элемента управления. Браузеры обычно выполняют это действие, извлекая данные из базы, содержащей введенные ранее. Возможно два значения, оба не зависят от регистра:

• on: браузер должен автоматически предлагать варианты. Это значение по умолчанию;
• off: браузер не должен автоматически предлагать варианты.

 
Some text:

ENCTYPE

Значение, указывающее метод, который будет использоваться для кодирования данных при отправке формы. Возможны три значения, которые не зависят от регистра:

• application/x-www-form-urlencoded: пробелы заменяются знаком плюс ( «+» ), а специальные символы преобразуются в значения HEX . Это значение по умолчанию;
• multipart/form-data: кодирование не производится. Указывается при загрузке файлов;
• text/plain: только пробелы заменяются знаком плюс ( «+» ).

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

 
File:
 

METHOD

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

• get: данные прикрепляются к URL-адресу ( указанному в атрибуте action ). Пары имя-значение добавляются в виде » name=value » и отделяются одна от другой знаком амперсанда ( «&» ). Вся строка добавляется к URL-адресу после знака вопроса ( «?» ). Например, строка GET может выглядеть следующим образом: «form-result.php?user=john&pass=123456» ;
• post: данные прикрепляются к телу запроса;
• dialog: специальное значение для HTML тег form внутри элемента dialog . Указывает браузеру закрыть диалоговое окно после отправки формы. Результаты должны обрабатываться с помощью скриптов.

 
Username: 
Password:

NAME

Имя формы. Это значение не может быть пустой строкой и должно отличаться от имен других форм.

Этот атрибут тега form был удален из предыдущих версий стандарта. В HTML5 он был восстановлен, чтобы дать возможность ссылаться на форму в наборе форм по ее имени.

NOVALIDATE

Логическое значение, указывающее браузеру не производить валидацию данных формы после отправки данных. Если этот атрибут принимает значение » NOVALIDATE » или пустую строку ( » » ),браузер должен пропустить валидацию формы.

TARGET

Значение указывающее, где должны отображаться результаты обработки данных скриптом. Это значение может быть именем окна или любым из следующих значений ( без учета регистра ):

• _blank: в новом окне / вкладке;
• _parent: непосредственно в родительском контексте;
• _self: в текущем окне;
• _top: в главном окне.

Атрибут тега form target был удален из предыдущих версий HTML , но был восстановлен в HTML5 , так как он стал использоваться с элементом iframe .

 
Some text:

ACCEPT

Указывается разделенный запятыми список разрешенных типов контента. Это может быть полезно при загрузке файлов для фильтрации на стороне клиента типов файлов.

Атрибут accept формы был удален из HTML5, так он является излишним. Вместо этого авторы должны использовать атрибут accept в элементах управления.

Вадим Дворников автор-переводчик статьи « FORM ELEMENT »

Атрибуты полей форм

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

Следующий атрибут, который мы рассмотрели, также является обязательным и называется name. Его значение задает уникальное имя поля. Введенная пользователем информация передается обработчику в качестве значения переменной с именем поля. Атрибут name имеет значение для программистов, поэтому имя должно быть логичным.

Атрибут value

Атрибут value позволяет присвоить элементу управления значение по умолчанию. Введя в поле значение по умолчанию, можно пояснить пользователю, какие данные и в каком формате вы хотите здесь видеть. Для флажков и радиокнопок определяет значение, которое будет передано на сервер, если кнопка выбрана. Оно будет состоять из имени кнопки и ее значения.

Пример: Атрибут value

Ваше имя:

Ваша фамилия:

 Ваше имя: 
value="Иван"> 
Ваша фамилия:

Атрибут disabled

Атрибут disabled весьма полезен для ограничения доступа к некоторым полям формы на основании ранее введенных данных. Чтобы запретить изменение данных, в любое поле можно добавить атрибут disabled. При этом поле становится неактивным, т.е. щелчки на нем не приводят ни к каким действиям.

Пример: Атрибут disabled

Baшa родная планета:

 
Baшa родная планета:
 disabled> 

Атрибут readonly

Атрибут readonly не позволяет пользователю изменять значения элементов формы, но, в отличие от атрибута disabled, такие поля их можно выделять. Это позволяет разработчикам устанавливать значения элементов формы в зависимости от ранее введенных данных с помощью сценариев.

Пример: Прокручиваемый список

Заключен договор:

 
Заключен договор:
 readonly> 

Атрибут size

Атрибут size определяет ширину поля ввода текста (в качестве единицы измерения выступает количество видимых символов). Значение по умолчанию — 20.

Пример: Атрибут size

Ваше имя:

Ваша фамилия:

 
Ваше имя: 
 
Ваша фамилия: 
size="40">
 

Атрибут maxlength

Атрибут maxlength определяет количество символов, которое пользователь может ввести в поле ввода. При превышении этого количества браузер отреагирует на попытку ввода нового символа звуковым сигналом и не даст ввести очередной символ. Не следует путать этот атрибут с атрибутом size, который определяет количество видимых в поле символов. Например при запросе года вы можете ограничить количество символов, установив значение атрибута maxlength равным 4.

Пример: Атрибут maxlength

Ваше имя:

Ваш год рождения:

 
Ваше имя: 
 
Ваш год рождения: 
maxlength="4">
 

HTML5 Атрибуты

Атрибут placeholder

Первое усовершенствование, которое HTML5 вносит в Web-формы — это возможность использования замещающего текста (placeholder text) в поле ввода. Замещающий текст отображается внутри поля ввода до тех пор, пока поле не имеет фокуса ввода. Как только пользователь сфокусируется на поле и начнет ввод текста, замещающий текст исчезает.

Пример: Заполняющий текст

Ваше имя:

Email:

 
Ваше имя: 
placeholdier="Username"> 
Email: 
placeholdier="user@example.com">
 

Атрибут autofocus

Атрибут autofocus делает именно то, о чем говорит его название: как только страница загружается, он передает фокус ввода в конкретное поле ввода. Чтобы механизм автофокуса работал надежно, на странице должен быть только один атрибут autofocus. Если таких элементов будет несколько, браузер размещает курсор в последнем поле автофокуса.

Пример: Автофокусировка на поле формы

Ваше имя:

Email:

 Ваше имя: 
autofocus> 
Email:

Атрибуты min и mах

Атрибуты min и mах позволяют задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое поле формы, например, типы поля ввода — number, range, time, date, datetime, datetime-local, month, time или week.

Пример: Атрибуты min и mах

Введите дату до 2018-01-01:
Введите дату после 2020-01-01:
Выберите место (между 1 и 50):

 Введите дату до 2018-01-01: max="2017-12-31"> 
Введите дату после 2020-01-01: min="2020-01-02"> 
Выберите место (между 1 и 50): min="1" max="50">

Атрибут step

Атрибут step можно использовать с числовым значением ввода, чтобы определить точность возможных вводимых значений. По умолчанию приращение равно 1, но ему также можно присвоить любое числовое значение.

Пример: Атрибут step

Атрибут required

Атрибут required указывает, что поле элемента формы обязательно к заполнению пользователем. Когда пользователь отправляет форму, браузер проверяет, не оставлены ли пустыми все обязательные поля. При необходимости он остановит отправку данных и выведет сообщение об ошибке. Это можно легко реализовать, добавляя атрибут required к элементам , или .

 Baш пароль required> 

autocomplete="on"> Ваше имя: 
Ваша фамилия:  
E-mail: autocomplete="off">

Атрибут pattern

Спецификация HTML5 упростила процесс проверки формы, представив новые типы поля : email, url и tel. Данные значения обеспечивают автоматическую валидацию. При любом несовпадении формата ввода данные типы поля будут выдавать ошибку, предотвращая отправку формы.
Атрибут pattern позволяет задавать наши собственные правила валидации значения поля при помощи Регулярных Выражений (RegEx). И если значение введенное пользователем в поле не совпадает с заданным шаблоном, то выскачет ошибка. В нашем примере значение поля ввода логина должно содержать определенную последовательность латинских букв нижнего регистра и цифр: 3 буквы + 3 цифры. Обратите внимание на использование атрибута title для определения содержательного описания данных, вводимых пользователем. Теперь при попытке ввести данные, не соответствующие регулярному выражению, выводится сообщение об ошибке, в которое включается содержимое атрибута title.

 Ваш логин:pattern="[a-z][0-9]" title="Логин должен содержать последовательно 3 латинских буквы нижнего регистра и 3 цифры"> 

Ваш логин:
E-mail:
novalidate> Ваш логин:[0-9]»>
E-mail:

Атрибут formnovalidate

Атрибут formnovalidate (от англ. «form no validate» — «не проверять форму») отключает проверку данных формы (перед отправкой на сервер) на корректность. Атрибут formnovalidate может быть применен к элементам с типом submit или image.

 
Ваш логин:[0-9]"> 
E-mail:  
 
formnovalidate value="Отправить без валидации">
 

Атрибут form

Атрибут form связывает элемент формы с элементом . Это нужно в том случае, когда элемент формы лежит вне элемента , но должен быть отправлен на сервер вместе с содержимым этого элемента . Значение атрибута form должно быть равно атрибуту id элемента в этом же документе.

id="data" action="action_form.php"> Ваш логин:[0-9]"> 
 
Поля "Ваш email" и "Ваш возраст" находятся за пределами формы
 form="data"> 
form="data"> 

Атрибут formaction

Атрибут formaction (от англ. «form action» — «действие формы») определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними требуемые действия. Атрибут formaction по своему действию аналогично атрибуту action элемента .
Атрибут formaction может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»). При отправке формы браузер сначала проверяет наличие атрибута formaction и если тот отсутствует, он продолжает искать в форме атрибут action.

 
Ваше имя: 
Ваша фамилия:  
formaction="action_form.php">
 

Атрибут formenctype

Атрибут / параметр

Атрибут formenctype указывает способ кодирования данных формы, отправляемых на сервер (только для форм с методом передачи данных method=»POST»). Атрибут formenctype отменяет атрибут enctype элемента .
Атрибут formaction может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»).
Синтаксис:

 
Ваше имя: 
Ваша фамилия:  
Файл для заявки:  
formenctype="multipart/form-data">
 

Атрибут formmethod

Атрибут formmethod указывает метод отправки данных формы на сервер. Атрибут formmethod переопределяет атрибут method элемента .
Атрибут formaction может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»).
Значение атрибута formmethod по умолчанию — get.
Синтаксис:

 
Ваше имя: 
Ваша фамилия:  
formmethod="post" value="Отправка методом POST"> 
formmethod="get" value="Отправка методом GET">
 

Атрибут formtarget

Атрибут formtarget определяет окно или фрейм в которое будет загружаться результат, представленный в виде HTML-документа. Атрибут formtarget переопределяет атрибут target элемента .
Атрибут formtarget может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»).
В качестве значения используется имя окна или фрейма, заданное атрибутом name. Значение атрибута formtarget по умолчанию — _self.
Синтаксис:

 
 
Ваше имя: 
Ваша фамилия:  
formtarget="mytarget" value="Результат в mytarget">
 

Атрибут multiple

Атрибут multiple позволяет пользователям выбрать сразу несколько вариантов ответа (не забудьте написать предупреждение об этой возможности). Multiple — это булев атрибут, значение для него не указывается. Пользователи компьютеров под управлением операционной системы Windows могут выбрать несколько элементов, нажав и удерживая клавишу Ctrl , а пользователи компьютеров Маc — с помощью клавиши Cmd .
Атрибут multiple может применяться с элементом типа email и file.
Синтаксис:

 Выберите изображения:multiple>

Атрибуты тега

Задачи

Текст-подсказка

Добавьте в поле ввода текст-подсказку, которая исчезает когда пользователь начинает вводить текст, а затем, при устaновке фокуса на друтом элементе, снова появляется.

Задача HTML:

HTML-код:

Установка фокуса

Сделайте так, чтобы в загружаемой форме поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.

Задача HTML:

Поиск по сайту: 
HTML-код:     Поиск по сайту:  

Поле ввода обязательно для заполнения

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

Задача HTML:

 
Введите ваше имя:  
HTML-код:     
Введите ваше имя:
 

Отключенное поле

Доработайте HTML-код так, чтобы в результате у пользователя не было возможности редактирования и копирования содержимого текстового поля формы.

Задача HTML:

 
Ваше имя:  
HTML-код:     
Ваше имя:
 

Отправка данных формы

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

Куда отправляются данные?

Здесь мы обсудим, что происходит с данными при отправке формы.

О клиентской/серверной архитектуре

WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.

На стороне клиента HTML-форма — это не более чем удобный способ настройки HTTP-запроса для отправки данных на сервер. Это позволяет пользователю предоставлять информацию для доставки в HTTP-запросе .

Примечание: Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем «Первые шаги в программировании на стороне сервера».

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

Атрибут action

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

В этом примере данные отправляются на абсолютный URL — http://foo.com :

form action="http://foo.com">form> 

Здесь мы используем относительный URL — данные отправляются на другой URL на сервере:

form action="/somewhere_else">form> 

form>form> 

Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут action был обязательным. Это больше не нужно.

form action="#">form> 

Примечание: Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищённой странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом action , все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.

Атрибут method

Этот атрибут определяет способ отправки данных. Протокол HTTP предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод GET и метод POST .

Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.

Метод GET

Метод GET — это метод, используемый браузером, который говорит серверу, что нужно отправить назад данный ресурс: «Эй, сервер, я хочу получить этот ресурс». В этом случае браузер отправляет пустое тело. Поскольку тело пустое, если форма отправляется с использованием данного метода, данные, отправляемые на сервер, добавляются к URL-адресу.

Рассмотрим следующую форму:

form action="http://foo.com" method="get"> div> label for="say">What greeting do you want to say?label> input name="say" id="say" value="Hi" /> div> div> label for="to">Who do you want to say it to?label> input name="to" id="to" value="Mom" /> div> div> button>Send my greetingsbutton> div> form> 

Поскольку используется метод GET , вы увидите URL www.foo.com/?say=Hi&to=Mom , который появится в адресной строке браузера при отправке формы.

Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса ( ? ), за которым следуют пары имя / значение, каждая из которых разделена амперсандом ( & ). В этом случае мы передаём две части данных на сервер:

• say , со значением Hi
• to , со значением Mom

HTTP-запрос имеет следующий вид:

GET /?say=Hi&to=Mom HTTP/2.0 Host: foo.com

Примечание: вы можете найти этот пример на GitHub — смотрите get-method.html (see it live also).

Метод POST

Метод POST немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.

Давайте рассмотрим пример — это та же самая форма, которую мы рассматривали в разделе GET выше, но с атрибутом method , установленным в post .

form action="http://foo.com" method="post"> div> label for="say">What greeting do you want to say?label> input name="say" id="say" value="Hi" /> div> div> label for="to">Who do you want to say it to?label> input name="to" id="to" value="Mom" /> div> div> button>Send my greetingsbutton> div> form> 

Когда форма отправляется с использованием метода POST , данные добавляются не к URL-адресу, а включаются в тело запроса. HTTP-запрос имеет следующий вид:

POST / HTTP/2.0 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 say=Hi&to=Mom

Заголовок Content-Length указывает размер тела, а заголовок Content-Type указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.

Примечание: вы можете найти этот пример на GitHub — смотрите post-method.html (see it live also).

Просмотр HTTP-запросов

HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, вам нужно использовать такие инструменты, как Firefox Network Monitor или Chrome Developer Tools). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):

1. Нажмите F12
2. Выберите Network
3. Выберите «All»
4. Выберите «foo.com» во вкладке «Name»
5. Выберите «Headers»

Затем вы можете получить данные формы, как показано на рисунке ниже.

Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом GET позволит пользователю увидеть информацию из запроса в URL, а запрос с методом POST не позволит. Две причины, почему это может быть важно:

1. Если необходимо отправить пароль (или любую другую важную информацию), никогда не используйте метод GET , иначе рискуете отобразить эту информацию в URL-строке, что небезопасно.
2. Если необходимо отправить большой объем информации, POST -метод является предпочтительным, так как некоторые браузеры ограничивают длину URL. К тому же, многие сервера так же ограничивают длину обрабатываемых URL.

На стороне сервера: получение данных

Какой бы HTTP вы не выбрали, сервер возвращает строку, которая будет последовательно проанализирована для получения данных в формате листа с парами ключ/значение. Способ получения доступа к этому листу зависит от платформы разработки или особенностей фреймворка, который вы можете использовать. Технологии, которые вы используете, определяют, как обрабатываются скопированные ключи. Часто, приоритетным является последнее полученное значение для данного ключа.

Пример: Чистый PHP

PHP предлагает несколько глобальных объектов для доступа к данным. Например, вы используете POST -метод, в приведённом ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо ещё.

 // The global $_POST variable allows you to access the data sent with the POST method by name // To access the data sent with the GET method, you can use $_GET $say = htmlspecialchars($_POST['say']); $to = htmlspecialchars($_POST['to']); echo $say, ' ', $to; ?> 

Пример показывает страницу с данными, которые мы отправили. Вы можете посмотреть это в действии в нашем файле с примером: php-example.html — который содержит те же данные, которые вы видели раньше: method : post и action из php-example.php . Когда данные переданы на отправку (submit), они переданы в форму php-example.php, которая содержит PHP код из примера выше. Когда код будет выполнен, браузер выведет (output) обработанное сообщение: Hi Mom .

Примечание: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать MAMP (Mac and Windows) и/или AMPPS (Mac, Windows, Linux).

Пример: Python

Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется Flask framework для визуализации шаблонов, поддерживающих форму отправки данных (смотри python-example.py).

from flask import Flask, render_template, request app = Flask(__name__) @app.route('/', methods=['GET', 'POST']) def form(): return render_template('form.html') @app.route('/hello', methods=['GET', 'POST']) def hello(): return render_template('greeting.html', say=request.form['say'], to=request.form['to']) if __name__ == "__main__": app.run() 

Два шаблона из коде выше взаимодействуют так:

• form.html: Та же форма, что и выше The POST method , только с использованием action к > . (Это Jinja2 шаблон, который изначально HTML, но может содержать вызовы Python кода в фигурных скобках, которые запустятся веб-сервером. url_for(‘hello’) буквально говорит: после отправки данных переадресуй их в /hello .)
• greeting.html: Этот шаблон просто содержит строку, которая отображает два бита данных, переданных ему при отображении. Это сделано с помощью функции hello() , указанной выше, которая выполняется, когда запрос направляется в /hello URL.

Примечание: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно установить Python/PIP, потом установить Flask используя команду: pip3 install flask . После этого, вы сможете запустить файл из примера, используя команду: python3 python-example.py , потом открыть localhost:5000 в своём браузере.

Другие языки и фреймворки

Существует множество других серверных технологий, которые вы можете использовать для работы с формами, включая языки Perl, Java, .Net, Ruby, и прочее. Выбирайте тот, который нравится больше. К тому же, использовать вышеупомянутые технологии непосредственно, без использования фреймворков, может быть сложно. Лучше использовать один из множества высококачественных фреймворков, таких как:

• Django для Python (немного тяжеловеснее, чем Flask, но больше инструментов и опций)
• Express для Node.js
• Laravel для PHP
• Ruby On Rails для Ruby
• Phoenix для Elixir

Стоит отметить, что использование фреймворков и работа с формами — это не всегда легко. Но это намного легче, чем пытаться написать аналогичную функциональность с нуля, и это определённо сэкономит время.

Примечание: Обучению фреймворкам и работе с серверами не входит в рамки этой статьи. Если хотите узнать больше, ссылки ниже помогут в этом.

Особый случай: отправка файлов

Отправка файлов с помощью форм HTML — это особый случай. Файлы — это бинарные данные или рассматриваются как таковые, в то время как все остальные — это текстовые данные. Поскольку HTTP — это текстовый протокол, есть особые требования для работы с бинарными данными.

Атрибут enctype

Этот атрибут позволяет конкретизировать значение в Content-Type HTTP заголовок, включённый в запрос, при генерировании отправки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: application/x-www-form-urlencoded . На человеческом это значит: «Это форма с данными, которые были закодированы в URL параметры.»

Если хотите отправить файл, нужно сделать следующие три шага:

• Указать method атрибут POST , поскольку содержимое файла, как и сам файл, не могут быть отображены в URL параметрах.
• Установить в enctype значение multipart/form-data , потому что данные будут разбиты на несколько частей: одна часть на файл (две части на два файла), и одна часть на текстовые данные (при условии, если форма содержит поле для получения тестовых данных).
• Подключите один или более File picker (en-US) виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.

form method="post" enctype="multipart/form-data"> div> label for="file">Choose a filelabel> input type="file" id="file" name="myFile" /> div> div> button>Send the filebutton> div> form> 

Предупреждение: Многие сервера имеют заданные ограничения на размер загружаемых файлов и запросы от пользователей, чтобы защититься от возможных злоупотреблений. Важно проверять эти ограничения у администратора сервера, прежде чем загружать файлы.

Проблемы безопасности

Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространёнными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.

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

XSS «Межсайтовый скриптинг» и CSRF «Подделка межсайтовых запросов»

Межсайтовый скриптинг (XSS «Cross Site Request Forgery») и подделка межсайтовых запросов (CSRF «Cross-Site Scripting») — это распространённые типы атак, которые происходят при отображении данных после ответа сервера или другого пользователя.

Межсайтовый скриптинг (XSS «Cross Site Request Forgery») позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. Подделка межсайтовых запросов (CSRF «Cross-Site Scripting») может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же политика происхождения. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.

CSRF-атаки аналогичны XSS-атакам в том, что они начинаются одинаково — с внедрения клиентского скрипта в веб-страницы — но их конечные цели разные. Злоумышленники CSRF пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадёжному пользователю). Атаки XSS используют доверие пользователя к веб-сайту, в то время как атаки CSRF используют доверие веб-сайта к пользователю.

Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный «фильтр», который удаляет элементы HTML , (en-US) и (en-US) полученных от любого пользователя. Это помогает снизить риск, но не исключает его полностью.

SQL — вброс

SQL -вброс представляет собой тип атак, при которых осуществляется попытка выполнения действия с базой данных, используемой целевым веб-сайтом. В этих случаях обычно осуществляется отправка SQL-запроса в надежде, что сервер выполнит этот запрос (обычно при попытке сервера приложения сохранить данные, отправляемые пользователем). Данный вид атак является одним из самых направленных атак на веб-сайты.

Последствия могут быть ужасающими, начиная от потери данных и заканчивая утратой контроля над всей инфраструктурой веб-сайта за счёт повышения привилегий. Это очень серьёзная угроза, поэтому никогда не сохраняйте данные, отправляемые пользователем, без выполнения фильтрации данных (например, с помощью mysqli_real_escape_string() .

Вброс HTTP-заголовка и email

Эти виды атак могут проявляться, когда ваше приложение создаёт заголовки HTTP или электронные почтовые адреса на основании данных, введённых пользователем в форму. Такие атаки напрямую не повреждают сервер или пользователей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.

Такие атаки являются самыми незаметными, но при этом могут превратить ваш сервер в зомби.

Будьте параноиком: никогда не доверяйте вашим пользователям

Как вы боретесь с такими угрозами? Этот вопрос выходит далеко за рамки данной статьи, но есть несколько общих правил, которые следует всегда соблюдать. Самое важное из них — никогда не доверяйте вашим пользователям, в том числе себе; даже проверенный пользователь может быть атакован.

Все данные, поступающие на ваш сервер, необходимо проверять и санитизировать. Все и всегда. Без исключений.

• Избегайте потенциально опасных символов. Конкретные символы, с которыми следует соблюдать осторожность, зависят от контекста, в котором используются данные, а также от используемой платформы. Однако, все языки на стороне сервера имеют соответствующие функции для обеспечения такой защиты.
• Ограничьте входящий объем данных для поступления только реально необходимых данных.
• Помещайте загруженные файлы в песочницу (храните их на другом сервере и предоставляйте доступ к файлам только через отдельный поддомен или даже через совершенно другое доменное имя).

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

Примечание: В статье Безопасность веб-сайта нашего раздела серверного обучения приведено подробное обсуждение упомянутых угроз и возможных способов их устранения.

Заключение

Как мы увидели, отправлять формы просто, однако защитить приложение может быть довольно трудно. Просто помните, что фронтенд разработчики не должны задавать модель безопасности для приложения. Да, как мы увидим далее, мы можем проверить данные на стороне клиента, однако сервер не может доверять этой проверке, потому что он никогда не может по-настоящему узнать что происходит на стороне клиента.

Смотрите также

Если вы хотите узнать больше об обеспечении безопасности веб-приложений, вы можете использовать следующие источники информации:

• Первые шаги в программирование веб-сайтов на стороне сервера
• Открытый проект обеспечения веб-безопасности приложений (OWASP)
• Веб-безопасность от Mozilla

• Назад (en-US)
• Обзор: Forms
• Далее (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 2 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.