Атрибут method | htmlbook.ru
Атрибут method | htmlbook.ruАтрибуты тегов
Значения атрибутов
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Атрибут method сообщает серверу о методе запроса.
Синтаксис
<form method="get | post">...</form>Значения
Значение атрибута method не зависит от регистра. Различают два метода — get и post.
- get
- Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода get заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке.
- post
- Метод post посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу get, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.
Обязательный атрибут
Нет.
Значение по умолчанию
get
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег FORM, атрибут method</title>
</head>
<body>
<form action="handler.php" method="post">
<p><input type="text" name="str"></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>О сайте
Помощь
Копирование материалов
Борьба с ошибками
Технологии
Поисковый плагин
Основные разделы
Статьи
Блог
Практикум
Цифровые книги
Форум
HTML
Самоучитель HTML
XHTML
Справочник по HTML
HTML5
CSS
Самоучитель CSS
Справочник по CSS
Рецепты CSS
CSS3
Сайт
Вёрстка
Макеты
Веб-сервер
htmlbook.ru использует хостинг timeweb© 2002–2021 Влад Мержевич, по всем вопросам пишите по адресу [email protected]
Подпишитесь на материалы сайта по RSS
POST — HTTP | MDN
HTTP-метод POST предназначен для отправки данных на сервер. Тип тела запроса указывается в заголовке Content-Type.
Разница между PUT и POST состоит в том, что PUT является идемпотентным: повторное его применение даёт тот же результат, что и при первом применении (то есть у метода нет побочных эффектов), тогда как повторный вызов одного и того же метода POST может иметь такие эффекты, как например, оформление одного и того же заказа несколько раз.
Запрос POST обычно отправляется через форму HTML и приводит к изменению на сервере. В этом случае тип содержимого выбирается путём размещения соответствующей строки в атрибуте enctype элемента <form> или formenctype атрибута элементов <input> или <button>:
application/x-www-form-urlencoded: значения кодируются в кортежах с ключом, разделённых символом'&', с'='между ключом и значением. Не буквенно-цифровые символы — percent encoded: это причина, по которой этот тип не подходит для использования с двоичными данными (вместо этого используйтеmultipart/form-data: каждое значение посылается как блок данных («body part»), с заданными пользовательским клиентом разделителем («boundary»), разделяющим каждую часть. Эти ключи даются в заголовкиContent-Dispositionкаждой частиtext/plain
Когда запрос POST отправляется с помощью метода, отличного от HTML-формы, — например, через XMLHttpRequest — тело может принимать любой тип. Как описано в спецификации HTTP 1.1, POST предназначен для обеспечения единообразного метода для покрытия следующих функций:
- Аннотация существующих ресурсов
- Публикация сообщения на доске объявлений, в новостной группе, в списке рассылки или в аналогичной группе статей;
- Добавление нового пользователя посредством модальности регистрации;
- Предоставление блока данных, например, результата отправки формы, процессу обработки данных;
- Расширение базы данных с помощью операции добавления.
Простая форма запроса, используя стандартный application/x-www-form-urlencoded content type:
POST / HTTP/1.1 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 say=Hi&to=Mom
Форма запроса, используя multipart/form-data content type:
POST /test.html HTTP/1.1 Host: example.org Content-Type: multipart/form-data;boundary="boundary" --boundary Content-Disposition: form-data; name="field1" value1 --boundary Content-Disposition: form-data; name="field2"; filename="example.txt" value2 --boundary--
BCD tables only load in the browser
Формы и их составляющие (form, input) в HTML
Для создания интерактивного сайта необходим способ передачи данных от пользователя. Самый простой способ передать данные на сайт — это использовать форму (тег ).Материал в этой статье только описывает теги, которые могут содержаться в <form>. Но для программирования функционала необходимо знание языка, к примеру, PHP. Пожалуйста, посмотрите курс PHP, если хотите полноценно понять способ передачи данных на сайт.
<form action="/index.php" method="POST">
Пожалуйста, введите мэйл и пароль:<br>
<input type="text" name="email" value="" placeholder="Ваш мэйл" required><br>
<input type="password" name="password" value="" placeholder="Ваш пароль"><br>
<input type="submit" value="Войти на сайт">
</form>Браузер использует свой стандартный стиль для полей ввода и кнопок, если не задан особый стиль. У каждого браузера стили для элементов форм отличаются. Поэтому чтобы сделать единый дизайн формы для вех браузеров, необходимо переопределить стандартные стили. Читайте об этом в курсе по CSS.
Рассмотрим построчно теги из примера.<form> … </form> — этот тег формы. Внутри него могут находиться различные элементы: текстовые поля, поля для ввода пароля и т.п. Во время отправки формы все поля внутри формы передадут свои значения на страницу, адрес которой указан в атрибуте action=»…». Способ передачи данных указывается в атрибуте method=»…». Подробнее о передаче данных из формы на сайт можно прочитать в разделе по программированию, к примеру, на языке PHP. В этой статье рассмотрим только виды полей для вода информации.
<input> — этот тег может отображать различные элемены в зависимости от значения атрибута type=»…». На третьей строке он используется как поле для ввода текста type=»text». А на четвёртой стройке он используется для ввода пароля
В конце стретьей строки есть атрибут required. В переводе означает «обязательный». Если попытаться отправить форму (в нашем случае нажать на кнопку «Войти на сайт») без заполнения этого поля, то форма не отправится и выдаст предупреждение: На пятой строке <input> используется с атрибутом type=»submit». В результате чего браузер рисует кликабельную кнопку, которая запускает процесс отправки содержимого формы.
В атрибуте value=»…» задаётся значение, которое принимает элемент формы. К примеру, если в поле с атрибутом type=»text» задать value=»Это текст в форме», то после загрузки html страницы в этом текстовом поле будет стоять текст «Это текст в форме». В случае с полем type=»submit» значение в атрибуте value=»…»
устанавливает надпись на кнопку отправки формы.В примере все текстовые поля имеют атрибут value=»» (value равно пустоте, между двойными кавычками «» ничего нет). Поэтому на заднем фоне поля для ввода отображается текст-заглушка, которая сразу прячется, как только начинается ввод в поле. Текст этой заглушки можно задать через атрибут placeholder=»…».
Далее разберём подробнее какие ещё типы полей могут быть в формах. Рассмотрим самые востребованные.
input type=»radio»
Поле для ввода с атрибутом type=»radio» помогает сделать переключатель вариантов. К примеру, если пользователь должен выбрать только один вариант из списка, то код формы будет таким:<form action="/index.php" method="POST">
Выберите сыр:<br>
<input name="cheese" type="radio" value="v1">Чеддер<br>
<input name="cheese" type="radio" value="v2" checked>Блю<br>
<input name="cheese" type="radio" value="v3">Камбоцола<br>
<input name="cheese" type="radio" value="v4">Морбье<br>
<input name="cheese" type="radio" value="v5">Смоленский<br>
<input name="cheese" type="radio" value="v6">Чечил<br>
</form>В примере выше можно заметить, что на втором варианте ответа стоит атрибут checked. Он указывает на то, что во время загрузки страницы второй пункт будет отмечен как выбранный.
input type=»checkbox»
Если есть необходимость выбрать несколько пунктов из предложенных, то необходимо использовать type=»checkbox»:<form action="/index.php" method="POST">
Выберите сыр:<br>
<input name="cheese" type="checkbox" value="v1">Чеддер<br>
<input name="cheese" type="checkbox" value="v2" checked>Блю<br>
<input name="cheese" type="checkbox" value="v3">Камбоцола<br>
<input name="cheese" type="checkbox" value="v4" checked>Морбье<br>
<input name="cheese" type="checkbox" value="v5" checked>Смоленский<br>
<input name="cheese" type="checkbox" value="v6">Чечил<br>
</form>input type=»file»
<form action="/index.php" method="POST">
Загрузите фото сыра:<br><br>
<input type="file"><br><br>
<input type="submit" value="Загрузить">
</form>В браузере форма из этого примера будет выглядеть так: При клике на кнопку выбора файла откроется окно, где пользователь сможет указать файл для загрузки. Кнопка «Загрузить» (она же <input type=»submit»>) начинает процесс отправки формы вместе с выбранным файлом.
<textarea>
Если необходимо получить от пользователя очень длинный текст, то записывать его через текстовое поле <input type=»text»> будет проблематично, потому что это поле вмещает только одну строку. К счастью, есть более удобное многострочное поле с возможностью изменения его размера. Такое поле создаётся с помощью тега <textarea>. Этот тег парный — он имеет открывающую и закрывающую часть. HTML код формы с этим полем выглядит так:<form action="/index.php" method="POST">
Напишите стих про мышей:<br><br>
<textarea></textarea>
</form>POST-запросы и отправка форм | Node.js с примерами кода
При оправке каких-то сложных данных обычно используются формы. Рассмотрим, как получать отправленные данные в Express.
Для получения данных форм из запроса необходимо использовать специальный пакет body-parser. Поэтому вначале добавим его в проект с помощью команды
npm install body-parser --save
Определим в папке проекта новый файл register.html:
<!DOCTYPE html>
<html>
<head>
<title>Регистрация</title>
<meta charset="utf-8" />
</head>
<body>
<h2>Введите данные</h2>
<form action="/register" method="post">
<label>Имя</label><br />
<input type="text" name="userName" /><br /><br />
<label>Возраст</label><br />
<input type="number" name="userAge" /><br /><br />
<input type="submit" value="Отправить" />
</form>
</body>
</html>
Здесь определены два поля для ввода имени и возраста пользователя. После нажатия на кнопку данные будут уходить по адресу /register.
В файле app.js определим следующий код:
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
// создаем парсер для данных application/x-www-form-urlencoded
const urlencodedParser = bodyParser.urlencoded({
extended: false,
})
app.get('/register', urlencodedParser, function (
request,
response
) {
response.sendFile(__dirname + '/register.html')
})
app.post('/register', urlencodedParser, function (
request,
response
) {
if (!request.body) return response.sendStatus(400)
console.log(request.body)
response.send(
`${request.body.userName} - ${request.body.userAge}`
)
})
app.get('/', function (request, response) {
response.send('Главная страница')
})
app.listen(3000)
Прежде всего для получения отправленных данных необходимо создать парсер:
const urlencodedParser = bodyParser.urlencoded({
extended: false,
})
Поскольку данные отправляются с помощью формы, то для создания парсера применяется функция urlencoded(). В эту функцию передается объект, устанавливающий параметры парсинга. Значение extended: false указывает, что объект — результат парсинга будет представлять набор пар ключ-значение, а каждое значение может быть представлено в виде строки или массива.
При переходе по адресу /register будет срабатывать метод app.get, который отправит пользователю файл register.html.
Так как данные отправляются с помощью метода POST, то для обработки определяем функцию app.post("/register",...). Первый параметр функции — адрес, на который идет отправка — /register. Стоит отметить, что в данном случае с одинм адресом /register связаны две функции, только одна обрабатывает запросы get, а другая — запросы post. Второй параметр — выше созданный парсер. Третий параметр — обработчик:
app.post('/register', urlencodedParser, function (
request,
response
) {
if (!request.body) return response.sendStatus(400)
console.log(request.body)
response.send(
`${request.body.userName} - ${request.body.userAge}`
)
})
Для получения самих отправленных данных используем выражения типа request.body.userName, где request.body инкапсулирует данные формы, а userName — ключ данных, который соответствует значению атрибута name поля ввода на html-странице:
<input type="text" name="userName" />
Запустим приложение и обратимся к странице register.html:
После отправки введенные данные будут получены в функции app.post("/register",...), которая выведет результат обработки:
Атрибут метода формы HTML
❮ HTML тег
Попробуй сам »Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Атрибут метода определяет, как отправлять данные формы (данные формы отправляются на страницу, указанную в атрибут действия ).
Данные формы могут быть отправлены как переменные URL (с method = "get" ) или как сообщение HTTP
транзакция (с методом = "post" ).
Примечания к GET:
- Добавляет данные формы в URL в парах имя / значение
- Длина URL-адреса ограничена (около 3000 символов)
- Никогда не используйте GET для отправки конфиденциальных данных! (будет видно в URL)
- Полезно для отправки формы, когда пользователь хочет добавить результат в закладки
- GET лучше подходит для незащищенных данных, таких как строки запроса в Google
Примечания к посту:
- Добавляет данные формы в тело HTTP-запроса (данные не отображаются в URL-адресе)
- Без ограничений по размеру
- Отправленные формы с POST не могут быть добавлены в закладки
Поддержка браузера
| Атрибут | |||||
|---|---|---|---|---|---|
| метод | Есть | Есть | Есть | Есть | Есть |
Синтаксис
Значения атрибутов
| Значение | Описание |
|---|---|
| получить | По умолчанию.Добавляет данные формы к URL-адресу в парах имя / значение: URL-адрес? Name = value & name = value |
| пост | Отправляет данные формы как почтовую транзакцию HTTP |
Другие примеры
Пример
Отправьте форму, используя метод «публикации»:
<форма
action = "/ action_page.php"
method = "post">
❮ HTML тег