Html submit get request

HTML Form Action: POST and GET

The method attribute in the element specifies how the data is sent to the server.

HTTP methods declare what action is to be performed on the data that is submitted to the server. HTTP Protocol provides several methods, and the HTML Form element is able to use two methods to send user data:

  • GET method — used to request data from a specified resource
  • POST method — used to send data to a server to update a resource

The GET Method

The HTML GET method is used to get a resource from the server. For example,

When we submit the above form by entering California in the input field, the request sent to the server will be www.programiz.com/search/?location=California .

The HTTP GET method adds a query string at the end of the URL to send data to the server. The query string is in the form of key-value pair followed by ? symbol.

From the URL, the server can parse the user-submitted value where:

Note: If there is more than one query, the query string will be separated by a & symbol.

Читайте также:  Установить java программу телефон

The POST method

The HTTP POST method is used to send data to the server for further processing. For example,

When we submit the form, it will add the user input data to the body of the request sent to the server. The request would look like

POST /user HTTP/2.0 Host: www.programiz.com Content-Type: application/x-www-form-urlencoded Content-Length: 33 firstname=Robin&lastname=Williams

The data sent is not easily visible to the user. However, we can check the sent data using special tools like the browsers’ dev tools.

GET vs POST

GET POST
Data sent with the GET method is visible in the URL. Data sent with the POST method is not visible.
GET requests can be bookmarked. POST requests can’t be bookmarked.
GET requests can be cached. POST requests can’t be cached.
GET requests have a character limit of 2048 characters. POST requests do not have a limit.
Only ASCII characters are allowed in GET requests. All data is allowed in POST request

Table of Contents

Источник

Html submit get request

elements of type submit are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.

Value

An element’s value attribute contains a string which is displayed as the button’s label. Buttons do not have a true value otherwise.

Setting the value attribute

input type="submit" value="Send Request" /> 

Omitting the value attribute

If you don’t specify a value , the button will have a default label, chosen by the user agent. This label is likely to be something along the lines of «Submit» or «Submit Query.» Here’s an example of a submit button with a default label in your browser:

Additional attributes

formaction

A string indicating the URL to which to submit the data. This takes precedence over the action attribute on the element that owns the .

This attribute is also available on and elements.

formenctype

A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:

This, the default value, sends the form data as a string after URL encoding the text using an algorithm such as encodeURI() .

Uses the FormData API to manage the data, allowing for files to be submitted to the server. You must use this encoding type if your form includes any elements of type file ( ).

Plain text; mostly useful only for debugging, so you can easily see the data that’s to be submitted.

If specified, the value of the formenctype attribute overrides the owning form’s action attribute.

This attribute is also available on and elements.

formmethod

A string indicating the HTTP method to use when submitting the form’s data; this value overrides any method attribute given on the owning form. Permitted values are:

A URL is constructed by starting with the URL given by the formaction or action attribute, appending a question mark («?») character, then appending the form’s data, encoded as described by formenctype or the form’s enctype attribute. This URL is then sent to the server using an HTTP get request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value.

The form’s data is included in the body of the request that is sent to the URL given by the formaction or action attribute using an HTTP post method. This method supports complex data and file attachments.

This method is used to indicate that the button closes the dialog with which the input is associated, and does not transmit the form data at all.

This attribute is also available on and elements.

formnovalidate

A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the novalidate attribute on the element’s owning form.

This attribute is also available on and elements.

formtarget

A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a browsing context (that is, a tab, window, or ). A value specified here overrides any target given by the target attribute on the that owns this input.

In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:

Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.

Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the user agent.

Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as _self .

Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as _self .

This attribute is also available on and elements.

Using submit buttons

buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use , or better still, a element.

A simple submit button

We’ll begin by creating a form with a simple submit button:

form> div> label for="example">Let's submit some textlabel> input id="example" type="text" name="text" /> div> div> input type="submit" value="Send" /> div> form> 

Try entering some text into the text field, and then submitting the form.

Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be text=usertext , where «usertext» is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the ; see Sending form data for more details.

Adding a keyboard shortcut to a submit button

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button — just as you would with any for which it makes sense — you use the accesskey global attribute.

In this example, s is specified as the access key (you’ll need to press s plus the particular modifier keys for your browser/OS combination). In order to avoid conflicts with the user agent’s own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See accesskey for further details.

Here’s the previous example with the s access key added:

form> div> label for="example">Let's submit some textlabel> input id="example" type="text" name="text" /> div> div> input type="submit" value="Send" accesskey="s" /> div> form> 

For example, in Firefox for Mac, pressing Control — Option — S triggers the Send button, while Chrome on Windows uses Alt + S .

The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn’t interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it’s not a complete solution for accessibility purposes.

Disabling and enabling a submit button

To disable a submit button, specify the disabled attribute on it, like so:

input type="submit" value="Send" disabled /> 

You can enable and disable buttons at run time by setting disabled to true or false ; in JavaScript this looks like btn.disabled = true or btn.disabled = false .

Validation

Submit buttons don’t participate in constraint validation; they have no real value to be constrained.

Examples

We’ve included simple examples above. There isn’t really anything more to say about submit buttons. There’s a reason this kind of control is sometimes called a «simple button.»

Technical Summary

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 12, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTTP-запрос методом GET.

Одним из способов, как можно отправить запрос по протоколу HTTP к серверу, является запрос методом GET. Этот метод является самым распространенным и запросы к серверу чаще всего происходят с его использованием.

Самый простой способ, как можно создать запрос методом GET- это набрать URL-адрес в адресную строку браузера.

Если у вас есть желание погрузиться в тему серверного программирования глубже, все мои уроки здесь.

Браузер передаст серверу примерно следующую информацию:

GET / HTTP/1.1 Host: site.ru User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:18.0) Gecko/20100101 Firefox/18.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Cookie: wp-settings Connection: keep-alive

Запрос состоит из двух частей:

1. строка запроса (Request Line)

2. заголовки (Message Headers)

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

Чтобы добавить GET параметры к запросу, нужно в конце URL-адреса поставить знак «?» и после него начинать задавать их по следующему правилу:

имя_параметра1=значение_параметра1& имя_параметра2=значение_параметра2&… 

Разделителем между параметрами служит знак «&».

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

http://site.ru/page.php?name=dima&age=27

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

Вот пример, как это можно сделать на языке PHP.

"; echo "Ваш возраст: " . $_GET["age"] . "
"; ?>

Конструкция $_GET[«имя_параметра»] позволяет выводить значение переданного параметра.

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

Ваше имя: dima Ваш возраст: 27

Кстати, переходя по какой-либо ссылке, которая оформлена в HTML вот так:

мы тоже выполняем запрос к серверу методом GET.

Все мои уроки по серверному программированию здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Источник

Оцените статью