Содержание
- 1 The GET Method
- 2 Группирование данных формы с помощью
- 3 HTML Tutorial
- 4 Создание текстовых полей (тег )
- 5 The formenctype Attribute
- 6 The formtarget Attribute
- 7 Синтаксис¶
- 8 Атрибуты¶
- 9 Основные теги и атрибуты форм HTML
- 10 OPTIONS Method
- 11 The POST Method
- 12 The formmethod Attribute
- 13 Метод POST
- 14 GET Method
- 15 PUT Method
- 16 HTML тег
- 17 TRACE Method
- 18 DELETE Method
- 19 Обработка формы с GET-параметрами
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
Next 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 выведет на экран то, что мы в эту форму написали.
С этим читают
- Переход на v4
- Hidden wiki
- Sql server express localdb
- Class yii\grid\actioncolumn
- Форма заявки с сайта: разбираемся в видах и настройках элемента
- Чпу, роутинг, единая точка входа на php
- Путь к http/2
- Верстка интернет-магазина: список товаров
- Angular http get example using httpclient
- Формы для сайта: юзабилити форм