Form post: Атрибут method | htmlbook.ru

Leave a Comment / Разное / By /

Содержание

Атрибут method | htmlbook.ru

Атрибут method | htmlbook.ru

Атрибуты тегов

Значения атрибутов

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.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 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

Подпишитесь на материалы сайта по 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    )
  • 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>
Если создать html файл и вставить в него код из примера выше, то в браузере такой файл отобразится как html страница со следующим содержанием: — в этой форме есть два поля для ввода и одна кнопка. Все эти элементы строятся самим браузером.

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

Рассмотрим построчно теги из примера.

<form> … </form> — этот тег формы. Внутри него могут находиться различные элементы: текстовые поля, поля для ввода пароля и т.п. Во время отправки формы все поля внутри формы передадут свои значения на страницу, адрес которой указан в атрибуте action=»…». Способ передачи данных указывается в атрибуте method=»…». Подробнее о передаче данных из формы на сайт можно прочитать в разделе по программированию, к примеру, на языке PHP. В этой статье рассмотрим только виды полей для вода информации.

<input> — этот тег может отображать различные элемены в зависимости от значения атрибута type=»…». На третьей строке он используется как поле для ввода текста type=»text». А на четвёртой стройке он используется для ввода пароля

type=»password». Отличие типов «text» от «password» в том, что в поле для ввода пароля все символы скрываются, заменяясь на звёздочки или точки.

В конце стретьей строки есть атрибут 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>
На экране негобраузера форма будет выглядеть так: Обратите внимание, что все поля имеют атрибут name=»cheese» с одинаковым значением. Это необходимо, потому что на одной странице могут находится несколько форм с радиокнопками. Но переключатель будет работать только внутри группы радиокнопок с одинаковым значением атрибута name. А значение value=»…» должно быть разным. именно value у выбранного пункта будет передано во время отправки формы.

В примере выше можно заметить, что на втором варианте ответа стоит атрибут 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>
Браузер отрисует такие элементы как поля, в которых можно поставить галочку. Как и в случае с type=»radio» можно задать checked для тех пунктов, которые должны быть отмечены по умолчанию после загрузки страницы.

input type=»file»

Одним из самых востребованных типов вода полей является поле для выбора файла type=»file». HTML формы с кнопкой загрузки файла выглядит так:
<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>
Браузер отобрасит поле для ввода текста в несколько строк с возможностью изменения размера за правый-нижний угол: В отличии от других input полей, у textarea нет атрибута value. Значение textarea находится непосредственно между тегами <textarea>…</textarea>. И если необходимо задать текст, который будет в этом поле после загрузки страницы, то нужно писать его именно между открывающимся и закрывающимся тегом <textarea>…</textarea>

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 тег

Пример

Отправьте форму, используя метод «get»:

<форма action = "/ action_page.php" method = "get">









Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Атрибут метода определяет, как отправлять данные формы (данные формы отправляются на страницу, указанную в атрибут действия ).

Данные формы могут быть отправлены как переменные 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 тег

POST — HTTP | MDN

Метод HTTP POST отправляет данные на сервер.Тип тела запроса указывается заголовком Content-Type .

Разница между PUT и POST заключается в том, что PUT является идемпотентным: вызов его один или несколько раз подряд дает тот же эффект (то есть не побочный эффект ), где последовательные идентичные POST могут иметь дополнительные эффекты. , как будто передаете заказ несколько раз.

Запрос POST обычно отправляется через HTML-форму и приводит к изменению на сервере.В этом случае тип контента выбирается путем помещения соответствующей строки в атрибут enctype элемента или в атрибут formenctype элемента или <сценарий> импортировать {реактивный} из "vue" импортировать {Inertia} из '@ inertiajs / inertia' экспорт по умолчанию { настраивать () { const form = reactive ({ first_name: null, last_name: null, электронная почта: null, }) function submit () { Инерция.сообщение ('/ пользователи', форма) } вернуть {форму, отправить} }, }

В отличие от классической формы отправки ajax, с помощью Inertia вы не обрабатываете поведение отправки сообщения на стороне клиента. Скорее, вы делаете это на стороне сервера, используя перенаправление. И, конечно же, ничто не мешает вам перенаправить обратно на страницу, на которой вы находитесь.

LaravelRails

  класс UsersController расширяет контроллер
{
    индекс публичной функции ()
    {
        return Inertia :: render ('Пользователи / Индекс', [
          'users' => User :: all (),
        ]);
    }

    публичное хранилище функций ()
    {
        Пользователь :: создать (
            Request :: validate ([
                'first_name' => ['обязательно', 'максимум: 50'],
                'last_name' => ['обязательно', 'максимум: 50'],
                'email' => ['обязательно', 'максимум: 50', 'электронная почта'],
            ])
        );

        return Redirect :: route ('users.индекс');
    }
}

Проверка на стороне сервера

Обработка ошибок проверки на стороне сервера в Inertia работает немного иначе, чем классическая форма, управляемая ajax, где вы отлавливаете ошибки проверки из ответов 422 и вручную обновляете состояние ошибки формы. Это потому, что Inertia никогда не получает 422 ответа. Скорее, Inertia работает больше как стандартная отправка полностраничной формы.

Дополнительную информацию см. На странице проверки.

Помощник формы

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

Vue 2Vue 3ReactSvelte

  <шаблон>
  

    
    
    
 {{form.errors.email}} 

    
    
    
 {{form.errors.password}} 

    
    Форма  Помни меня
    
    
  



<сценарий>
импортировать {useForm} из '@ inertiajs / inertia-vue3'

экспорт по умолчанию {
  настраивать () {
    const form = useForm ({
      электронная почта: null,
      пароль: null,
      помните: ложь,
    })

    вернуть {форму}
  },
}

Для отправки формы используйте методы get , post , put , patch и delete .

Vue 2Vue 3ReactSvelte

  form.submit (метод, URL, параметры)
form.get (URL, параметры)
form.post (URL, параметры)
form.put (URL, параметры)
form.patch (URL, параметры)
form.delete (url, options)

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

Vue 2Vue 3ReactSvelte

  форма.post ('/ profile', {
  preserveScroll: правда,
  onSuccess: () => form.reset ('пароль'),
})

Если вам нужно изменить данные формы перед их отправкой на сервер, вы можете сделать это с помощью метода transform () .

Vue 2Vue 3ReactSvelte

  форма
  .transform ((данные) => ({
    ...данные,
    помните: данные. помните? 'на' : '',
  }))
  .post ('/ login')

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

Vue 2Vue 3ReactSvelte

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

Vue 2Vue 3ReactSvelte

  
  {{form.progress.percentage}}%

В случае ошибок формы они доступны через свойство errors .

Vue 2Vue 3ReactSvelte

  
 {{form.errors.email}}

Чтобы проверить, есть ли в форме ошибки, используйте hasErrors свойство. Чтобы удалить ошибки формы, используйте метод clearErrors () .

Vue 2Vue 3ReactSvelte

  // Очистить все ошибки
form.clearErrors ()

// Удаляем ошибки для определенных полей
form.clearErrors ('field', 'anotherfield')

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

Чтобы восстановить исходные значения формы, используйте метод reset () . Обратите внимание: это вернет значения к исходным значениям, которые были предоставлены при первом создании экземпляра помощника формы.

Vue 2Vue 3ReactSvelte

  // Сброс формы
form.reset ()

// Сбрасываем определенные поля
form.reset ('field', 'anotherfield')

Чтобы отменить отправку формы, используйте метод cancel () .

Vue 2Vue 3ReactSvelte

  форма.cancel ()

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

Vue 2Vue 3ReactSvelte

  импорт {useForm} из '@ inertiajs / inertia-vue3'

const form = useForm ('CreateUser', данные)
const form = useForm (`EditUser: $ {user.id}`, data)

Чтобы проверить, есть ли в форме какие-либо изменения, используйте свойство isDirty .

Vue 2Vue 3ReactSvelte

  
 Есть несохраненные изменения формы.

Загрузка файлов

При посещении, которое включает файлы, Inertia автоматически преобразует данные запроса в объект FormData .

Подробнее см. на странице загрузки файлов

XHR / fetch submissions

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

Создание сообщения с отправкой формы

Fluent Forms только что представила потрясающую новую функцию, также известную как Custom Post Type (CPT) . Эта функция позволяет принимать сообщения, отправленные пользователями, и публиковать их напрямую. Эта форма автоматически создает сообщение после того, как пользователь отправляет данные. Прочтите это простое руководство, чтобы создать произвольный тип сообщения с помощью Fluent Forms.

Сначала перейдите на вкладку Modules и включите модуль Post / CPT Creation .Это позволит вам получить дополнительную возможность добавить форму публикации, как на снимке, приведенном ниже:


После этого шага перейдите на вкладку Все формы и щелкните значок стрелки вниз справа от кнопки Добавить новую форму . Затем выберите тип сообщения из этой опции. В этом примере была выбрана опция Тип сообщения:

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

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

Последним шагом для настройки формы CPT является настройка Post Feed , расположенного на вкладке Post Creation в настройках формы. Перед добавлением этого пост-фида необходимо включить его, как в примере, приведенном ниже:

Затем вы должны настроить подачу сообщений в соответствии с вашими потребностями, установив имя канала , Тип сообщения и так далее.Затем необходимо настроить отображение полей поста. Где вы можете выбрать шорткод для полей сообщения, щелкнув меню (3 точки) с правой стороны.

В обновленной версии расширена интеграция полей ACF. Доступно 2 типа полей ACF: General и Advanced Field . Теперь вы можете сопоставить поля ACF, такие как Repeater / file / image / gallery, или любые поля с соответствующим полем Fluent Forms.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *