Атрибут action

The GET Method

The GET method sends the encoded user information appended to the page request. The page and the encoded information are separated by the ? character.

http://www.test.com/index.htm?name1=value1&name2=value2

The GET method produces a long string that appears in your server logs, in the browser’s Location: box.
The GET method is restricted to send upto 1024 characters only.
Never use GET method if you have password or other sensitive information to be sent to the server.
GET can’t be used to send binary data, like images or word documents, to the server.
The data sent by GET method can be accessed using QUERY_STRING environment variable.
The PHP provides $_GET associative array to access all the sent information using GET method.

Try out following example by putting the source code in test.php script.

<?php
   if( $_GET || $_GET ) {
      echo "Welcome ". $_GET. "<br />";
      echo "You are ". $_GET. " years old.";
      
      exit();
   }
?>
<html>
   <body>
   
      <form action = "<?php $_PHP_SELF ?>" method = "GET">
         Name: <input type = "text" name = "name" />
         Age: <input type = "text" name = "age" />
         <input type = "submit" />
      </form>
      
   </body>
</html>

It will produce the following result −

Группирование данных формы с помощью

Элемент используется для группирования связанных данных в форме.

Элемент определяет заголовок для Элемент.

Пример

<form action=»/action_page.php»> <fieldset> <legend>Personal information:</legend> First name:<br> <input type=»text» name=»firstname» value=»Mickey»><br> Last name:<br> <input type=»text» name=»lastname» value=»Mouse»><br><br> <input type=»submit» value=»Submit»> </fieldset> </form>

Таким образом, HTML-код выше будет отображаться в браузере:

Вот список атрибутов :

Атрибут	Описание
accept-charset	Задает кодировку, используемую в отправленной форме (по умолчанию: кодировка страницы).
action	Указывает адрес (URL) для отправки формы (по умолчанию: страница отправки).
autocomplete	Указывает, должен ли обозреватель Автозаполнение формы (по умолчанию: on).
enctype	Задает кодировку отправленных данных (по умолчанию: URL-кодировка).
method	Указывает метод HTTP, используемый при отправке формы (по умолчанию: Get).
name	Задает имя, используемое для идентификации формы (для использования DOM: Document.Forms.Name).
novalidate	Указывает, что обозреватель не должен проверять форму.
target	Указывает целевой объект адреса в атрибуте Action (по умолчанию: _self).

Вы узнаете больше о атрибутах формы в следующих главах.

❮ Назад Дальше ❯

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors Colors RGB HEX HSL

HTML CSSHTML Links Links Link Colors Link Bookmarks

HTML Images Images Image Map Background Images The Picture Element

HTML TablesHTML Lists Lists Unordered Lists Ordered Lists Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Создание текстовых полей (тег )

Они создаются при помощи тега Input. Запомните этот тег. С помощью него создается большинство элементов формы в HTML. Input переводится как ввод и, чтобы указать конкретный элемент, здесь нужно использовать атрибут type. В данном случае у нас будет обычный элемент для ввода текста. Также для элемента нужно задать имя. В нашем случае назовем это поле name.

Для нашего поля необходимо дать описание, чтобы посетителю было понятно, что необходимо ввести в поле. Для этого заключим наш тег input в абзац и в тег <label>. Тег label сделает наше описание активным и таким образом, щелкнув на описание, у нас произойдет активация Input и курсор будет переключаться на него. Вот так наша строка будет выглядеть в HTML коде:

<p><label>Введите ваше имя: <input type=”text” name=”name”></label></p>

Давайте разберем еще атрибуты для тега input. Следующий атрибут – это size. Без этого атрибута наше поле input имеет фиксированный стандартный размер в 20 символов. Если мы хотим сделать поле более широким, то необходимо указать атрибут size.

<p><label>Введите ваше имя: <input type=”text” name=”name” size=”30”></label></p>

Еще следует отметить такой атрибут, как ограничение на количество символов, которое можно ввести в поле. Допустим, мы хотим ограничить поле для ввода имени 10 символами. Чтобы это реализовать, мы добавляем атрибут maxlength.

<p><label>Введите ваше имя(макс. 10 символов): <input type=”text” name=”name” size=”30” maxlength = “10”></label></p>

Теперь несмотря на то, что ширина поля позволяет ввести больше символов, мы не сможем превысить размер в 10 знаков.

Далее давайте пройдем поле для ввода пароля. Оно практически ничем не отличается, за исключением атрибута type. Для пароля type будет password. Поэтому скопируем предыдущую строку и введем необходимые изменения.

<p><label>Введите ваш пароль (макс. 10 символов): <input type=”password” name=”name” size=”30” maxlength = “10”></label></p>

Отличие поля password заключается в том, что вместо символов при вводе в поле выводятся круглые маркеры.

Вот так будет выглядеть код, который мы набрали:

А вот так будет выглядеть результат в браузере:

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

The formenctype Attribute

The input attribute specifies how the form-data should be encoded when submitted (only for forms with method=»post»).

Note: This attribute overrides the enctype attribute of the element.

The attribute works with the following input types: submit and image.

Example

A form with two submit buttons. The first sends the form-data with default encoding, the second sends the form-data encoded as «multipart/form-data»:

<form action=»/action_page_binary.asp» method=»post»> <label for=»fname»>First name:</label> <input type=»text» id=»fname» name=»fname»><br><br> <input type=»submit» value=»Submit»> <input type=»submit» formenctype=»multipart/form-data» value=»Submit as Multipart/form-data»></form>

The formtarget Attribute

The input a attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

Note: This attribute overrides the target attribute of the element.

The attribute works with the following input types: submit and image.

Example

A form with two submit buttons, with different target windows:

<form action=»/action_page.php»> <label for=»fname»>First name:</label> <input type=»text» id=»fname» name=»fname»><br><br> <label for=»lname»>Last name:</label> <input type=»text» id=»lname» name=»lname»><br><br> <input type=»submit» value=»Submit»> <input type=»submit» formtarget=»_blank» value=»Submit to a new window/tab»> </form>

Синтаксис¶

Элемент <form> парный, содержимое размещается между открывающим (<form>) и закрывающим (</form>) тегами.

Элемент <form> содержит другие HTML теги, которые определяют способы ввода данных.

Тег <input> определяет пользовательское поле для ввода информации.
Тег <textarea> определяет поле формы для создания области многострочного ввода.
Тег <button> используется для размещения кнопки внутри формы.
Тег <select> устанавливает элемент управления для создания раскрывающегося (выпадающего) списка.
Тег <option> определяет пункты раскрывающегося списка, установленного тегом <select>.
Тег <optgroup> используется для группировки связанных данных в раскрывающемся списке, установленного тегом <form>.
Тег <label> устанавливает текстовую метку для элемента <input>.
Тег <legend> определяет заголовок для элемента <fieldset>.

Атрибуты¶

Атрибут	Значение	Описание
accept	file_type	Определяет разделенный запятыми список типов файлов, которые принимает сервер (Список может быть представлен через загрузку файлов). Не поддерживается в HTML5.
accept-charset	character_set	Определяет кодировку, в которой сервер может принимать и обрабатывать данные.
action	URL	Указывает адрес, куда отправляются данные из заполненной формы, и где они будут обрабатываться.
autocomplete	onoff	Включает/выключает автозаполнение полей формы. По умолчанию значение включено.
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Определяет способ кодирования данных формы при их отправке. (Значение по умолчанию application/x-www-form-urlencoded). (Используется только при методе POST).
method
	Определяет HTTP метод отправки данных формы. (по умолчанию используется метод GET)
get	-передает данные формы в адресной строке («имя=значение»), которые добавляются к URL страницы после вопросительного знака и разделяются между собой амперсандом (&). (http://example.ru/doc/?name=Ivan&password=vanya)
post	— браузер устанавливает связь с сервером и посылает данные для обработки.
name	text	Определяет имя формы.
novalidate	novalidate	Устанавливает, что данные введенные в форму не будут проверяться перед отправкой.
target
	Определяет, где показать ответ, полученный после отправки формы
_blank	-показывает в новом окне.
_self	-показывает в текущем окне.
_parent	— показывает в родительском фрейме.
_top	— открывает во всю ширину окна.
framename	— открывает в iframe (имя должно быть указано в качестве значения

Тег <form> поддерживает глобальные атрибуты и атрибуты событий.

Основные теги и атрибуты форм HTML

В рамках данного урока мы займемся созданием html формы связи, а в следующих уроках коснемся создания обработчика на языке php. Форму для сайта в html мы будем создавать в новом файле, чтобы не путаться в коде. Давайте перейдем в notepad++ и создадим новый документ и сразу вставим в него шаблон html документа.

Скачайте шаблон html документа html_page_template.

Дадим документу название формы и сохраним файл под именем form.html.

Формы создаются с помощью парного тега form примерно так же, как таблицы. У тега form есть обязательные атрибуты, которые мы должны указать.

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

И еще один важный атрибут – это атрибут method. Он отличает за то, каким способом будут отсылаться данные. Способов может быть два. О них мы поговорим в следующих уроках. А пока просто напишем значение POST.

Также добавим форме имя. За это отвечает атрибут name. Дадим имя форме – form1.

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

OPTIONS Method

The OPTIONS method is used by the client to find out the HTTP methods and other options supported by a web server. The client can specify a URL for the OPTIONS method, or an asterisk (*) to refer to the entire server. The following example requests a list of methods supported by a web server running on tutorialspoint.com:

OPTIONS * HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)

The server will send an information based on the current configuration of the server, for example:

HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Allow: GET,HEAD,POST,OPTIONS,TRACE
Content-Type: httpd/unix-directory

The POST Method

The POST method transfers information via HTTP headers. The information is encoded as described in case of GET method and put into a header called QUERY_STRING.

The POST method does not have any restriction on data size to be sent.
The POST method can be used to send ASCII as well as binary data.
The data sent by POST method goes through HTTP header so security depends on HTTP protocol. By using Secure HTTP you can make sure that your information is secure.
The PHP provides $_POST associative array to access all the sent information using POST method.

Try out following example by putting the source code in test.php script.

<?php
   if( $_POST || $_POST ) {
      if (preg_match("//",$_POST )) {
         die ("invalid name and name should be alpha");
      }
      echo "Welcome ". $_POST. "<br />";
      echo "You are ". $_POST. " years old.";
      
      exit();
   }
?>
<html>
   <body>
   
      <form action = "<?php $_PHP_SELF ?>" method = "POST">
         Name: <input type = "text" name = "name" />
         Age: <input type = "text" name = "age" />
         <input type = "submit" />
      </form>
   
   </body>
</html>

It will produce the following result −

The formmethod Attribute

The input attribute defines the HTTP method for sending form-data to the action URL.

Note: This attribute overrides the method attribute of the element.

The attribute works with the following input types: submit and image.

The form-data can be sent as URL variables (method=»get») or as an HTTP post transaction (method=»post»).

Notes on the «get» method:

This method appends the form-data to the URL in name/value pairs
This method is useful for form submissions where a user want to bookmark the result
There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred
Never use the «get» method to pass sensitive information! (password or other sensitive information will be visible in the browser’s address bar)

Notes on the «post» method:

This method sends the form-data as an HTTP post transaction
Form submissions with the «post» method cannot be bookmarked
The «post» method is more robust and secure than «get», and «post» does not have size limitations

Example

A form with two submit buttons. The first sends the form-data with method=»get». The second sends the form-data with method=»post»:

<form action=»/action_page.php» method=»get»> <label for=»fname»>First name:</label> <input type=»text» id=»fname» name=»fname»><br><br> <label for=»lname»>Last name:</label> <input type=»text» id=»lname» name=»lname»><br><br> <input type=»submit» value=»Submit using GET»> <input type=»submit» formmethod=»post» value=»Submit using POST»></form>

Метод POST

Когда вы заходите на любой сайт, вы делаете это методом GET. Вернее, ваш браузер сообщает серверу, что заход осуществляется методом GET. Когда вы переходите по страницам сайта — каждая страница запрашивается методом GET.

Однако у этого метода есть недостаток — GET-параметры видны в адресной строке. Это значит, что введённые в форму логин и пароль будут передаваться в URL-адресе, а значит видны в истории браузера, что очень нехорошо.

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

Метод GET в формах чаще всего используется для поиска чего-либо (товаров, статей и т.д.).

Некоторые разработчики считают, что данные, передаваемые методом POST, имеют какую-то особую защиту, которая не позволяет злоумышленнику украсть или подменить их.

Это не так. Никакой дополнительной защиты у метода POST нет. Для защиты http-запросов нужно использовать https.

Данные, передаваемые методом POST, лежат в суперглобальном массиве $_POST. Теперь можно переписать нашу форму, чтобы она передавала данные методом POST:

GET Method

A GET request retrieves data from a web server by specifying parameters in the URL portion of the request. This is the main method used for document retrieval. The following example makes use of GET method to fetch hello.htm:

GET /hello.htm HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.tutorialspoint.com
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive

The server response against the above GET request will be as follows:

HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
ETag: "34aa387-d-1568eb00"
Vary: Authorization,Accept
Accept-Ranges: bytes
Content-Length: 88
Content-Type: text/html
Connection: Closed

<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>

PUT Method

The PUT method is used to request the server to store the included entity-body at a location specified by the given URL. The following example requests the server to save the given entity-body in hello.htm at the root of the server:

PUT /hello.htm HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.tutorialspoint.com
Accept-Language: en-us
Connection: Keep-Alive
Content-type: text/html
Content-Length: 182

<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>

The server will store the given entity-body in hello.htm file and will send the following response back to the client:

HTTP/1.1 201 Created
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Content-type: text/html
Content-length: 30
Connection: Closed

<html>
<body>
<h1>The file was created.</h1>
</body>
</html>

HTML тег

Все элементы тега форм создаются с помощью тега <input>.

Синтаксис <input>

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

name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
- text — текстовое поле. Одно из самых часто используемых значений
- password — текстовое поле, но с той особенностью, что при вводе символы скрыты
- radio — радиокнопки
- checkbox — переключатели
- submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
- reset — кнопка для очистки всей формы
- hidden — скрытое поле
- button — кнопки для обработки каких-то действий (не путать с submit!)
- file — для загрузки файлов на сервер
- image — поле с изображением (используется крайне редко)
value=»значение» — указывается значение по умолчанию

Теперь разберем более подробно каждый элемент

TRACE Method

The TRACE method is used to echo the contents of an HTTP Request back to the requester which can be used for debugging purpose at the time of development. The following example shows the usage of TRACE method:

TRACE / HTTP/1.1
Host: www.tutorialspoint.com
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)

The server will send the following message in response to the above request:

HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Connection: close
Content-Type: message/http
Content-Length: 39

TRACE / HTTP/1.1
Host: www.tutorialspoint.com
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)

Previous Page Print Page

DELETE Method

The DELETE method is used to request the server to delete a file at a location specified by the given URL. The following example requests the server to delete the given file hello.htm at the root of the server:

DELETE /hello.htm HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.tutorialspoint.com
Accept-Language: en-us
Connection: Keep-Alive

The server will delete the mentioned file hello.htm and will send the following response back to the client:

HTTP/1.1 200 OK
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Content-type: text/html
Content-length: 30
Connection: Closed

<html>
<body>
<h1>URL deleted.</h1>
</body>
</html>

Обработка формы с GET-параметрами

Формы можно передавать с помощью методов GET и POST. Указывается метод с помощью атрибута method тега form:

Если метод не указан, то по-умолчанию форма отправляется методом GET.

Формы, отправляемые методом GET, передают данные через URL-адрес.

Соответственно GET-параметр — это параметр, передаваемый в URL-адресе. Например, разберём URL /index.php?name=Vasya&price=1000 по частям:

/index.php — ссылка на сам скрипт
? — символ, с которого всегда начинается перечисление GET-параметров
name=Vasya — это первый GET-параметр с ключом name и значением Vasya
& — разделитель между GET-параметрами
price=1000 — это второй GET-параметр с ключом price и значением 1000

Ну а раз мы эти параметры передали, значит теперь можем получить их в PHP. Для этого существует суперглобальный массив $_GET.

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

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

Поэтому важно указывать атрибут name каждому элементу формы, иначе этот элемент не отправится на сервер. Итак, создадим простенькую форму и добавим ей PHP-обработчик:

Итак, создадим простенькую форму и добавим ей PHP-обработчик:

Теперь при отправке заполненной формы PHP выведет на экран то, что мы в эту форму написали.

С этим читают

Html

The GET Method

Группирование данных формы с помощью

Пример

HTML Tutorial

Создание текстовых полей (тег )

The formenctype Attribute

Example

The formtarget Attribute

Example

Синтаксис¶

Атрибуты¶

Основные теги и атрибуты форм HTML

OPTIONS Method

The POST Method

The formmethod Attribute

Example

Метод POST

GET Method

PUT Method

HTML тег

TRACE Method

DELETE Method

Обработка формы с GET-параметрами