Form html post: Sending form data — Learn web development

Leave a Comment / Html / By /

Содержание

— HTML | MDN

Элемент HTML form (<form>) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.

Можно использовать :valid и :invalid CSS псевдоклассы для стилизации <form> элемента, в зависимости от того, валиден или нет конкретный элемент elements внутри формы.

Как и все HTML-элементы, этот элемент поддерживает глобальные атрибуты (en-US).

accept HTML 4 Этот API вышел из употребления и его работа больше не гарантируется.

Список типов содержимого, разделённых запятой, которые принимает сервер.> Примечание: Примечание об использовании: Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте accept атрибут заданного <input> элемента.

accept-charset

Разделённые пробелами символьные кодировки, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку что и у страницы. (В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)

action

URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута formaction на <button> или <input> элементе.

autocomplete HTML5

Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута autocomplete на элементе формы. Возможные значения:* off: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.

  • on: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы. > **Примечание:**Если вы установили значение off для autocomplete атрибута ​​​​​формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение off для autocomplete каждого <input> элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите Google Chrome notes.
enctype

Когда значение атрибута method равно post, атрибут — MIME тип содержимого, которое используется, чтобы передать форму на сервер. Возможные значения:*

application/x-www-form-urlencoded: Значение по умолчанию, если атрибут не задан.

  • multipart/form-data: Используйте это значение, если пользуетесь элементом <input> атрибутом type установленным в «file».
  • text/plain (HTML5)Это значение может быть переписано атрибутом formenctype на элементе <button> или <input>.
method

HTTP (en-US) метод, который браузер использует, для отправки формы. Возможные значения:* post: Соответствует HTTP POST методу ; данные из формы включаются в тело формы и посылаются на сервер.

  • get: Соответствует GET методу; данные из формы добавляются к URI атрибута
    action    , их разделяет ‘?’, и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.Это значение может быть переписано атрибутом formmethod на <button> или <input> элементе.
name

Имя формы. В HTML 4 его использование запрещено (id следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.

novalidate HTML5

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

formnovalidate на <button> или <input> элементе, принадлежащем форме.

target

Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, контекста просмотра (например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имеют специальное значение:* _self: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.

  • _blank: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.
  • _parent: Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра.
    Если нет предка, эта опция действует точно так же как as _self.
  • _top: HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as _self.HTML5: Это значение может быть перезаписано formtarget атрибутом на <button> или <input> элементе.

Этот элемент реализует HTMLFormElement интерфейс.

<!-- Простая форма, которая пошлёт GET запрос -->
<form action="">
  <label for="GET-name">Name:</label>
  <input type="text" name="name">
  <input type="submit" value="Save">
</form>
<!-- Простая форма, которая пошлёт POST запрос -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input type="text" name="name">
  <input type="submit" value="Save">
</form>
<!-- Форма с fieldset, legend, и label -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Другие элементы, которые используются для создания форм: <button>, <datalist>, <fieldset>, <input>,<keygen> (en-US), <label>, <legend>
    , <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea> (en-US).

Last modified: , by MDN contributors

HTML/Атрибут method (Элемент form)

Синтаксис

(X)HTML

<form action="..." method="[значение]">
  ...
</form>

Описание

Атрибут / параметр method (от англ. «method» ‒ «метод») указывает метод отправки данных формы на сервер.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.Раздел
HTML
2.0Form: FORMПеревод
3.2FORM
4.0117.3 The FORM element
method = get|post [CI]…
DTD: Transitional Strict Frameset
5.04.10.19. 6 Form submission
The method and…
5.14.10.19.6. Form submission
The method and…
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Значения

get
Объединяет данные формы в одну строку, после чего присоединяет полученную строку к URL-адресу обработчика формы (указывается в атрибуте «action» или «formaction») и с помощью полученного URL-адреса передаёт данные формы на сервер.
<form action="http://example. com/handler.php" formmethod="get"
 
>
<p><label>Фамилия: <input type="text" name="family"></label></p>
                   <!-- Введено значение ivanov -->
<p><label>Имя: <input type="text" name="name"></label></p>
               <!-- Введено значение ivan -->
<button type="submit"> Отправить </button>
</form>

В итоге получится: http://www.example.com/script/index.php?family=ivanov&name=ivan

Плюсы метода:

  • Позволяет быстро получать результаты передачи форм с небольшим количеством коротких полей.

Минусы метода:

  • Некоторые сервера ограничивают длину URL-адреса с аргументами;
  • Передача личных данных (пароли, номера кридитных карт и так далее) с помощью данного метода является небезопасной, так как данные передаваемые этим методом могут быть легко перехвачены.
post
Браузер устанавливает связь с сервером, на котором находится обработчик данных формы (URL-адрес обработчика указывается в атрибуте «action» или «formaction») и после установки связи передаёт (в отдельном сеансе связи) данные на сервер.

Плюсы метода:

  • В отличие от метода «get» данный метод является более безопасным методом передачи личных данных;
  • Может передавать на сервер большие объёмы данных формы.

Минусы метода:

  • Требуется определённый опыт в создании соответствующих обработчиков формы.
dialog
Предполагает, что форма с данными находится в диалоговом окне (элемент dialog), которое должно быть закрыто после отправки данных на сервер.

Значение по умолчанию: «get».

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Параметр method (Элемент form)</title>
</head>
<body>
<h2>Пример с атрибутом «method»</h2>
<form action=»/examples/php-scripts/coffee. php» method=»post»>
<fieldset> <legend><b>Вы любите кофе с молоком?</b></legend>
<label><input type=»radio» name=»coffee» value=»yes»> да</label>
<label><input type=»radio» name=»coffee» value=»no»> нет</label>
</fieldset>
<p><input type=»reset»> <input type=»submit»></p>
</form>
</body>
</html>

Параметр method (Элемент form)

PHP | Отправка форм. POST-запросы

Последнее обновление: 15.03.2021

Одним из основных способов передачи данных веб-сайту является обработка форм. Формы представляют специальные элементы разметки HTML, которые содержат в себе различные элементы ввода — текстовые поля, кнопки и т.д. И с помощью данных форм мы можем ввести некоторые данные и отправить их на сервер. А сервер уже обрабатывает эти данные.

Создание форм состоит из следующих аспектов:

  • Создание элемента <form><form> в разметке HTML

  • Добавление в этот элемент одно или несколько поле ввода

  • Установка метода передачи данных. Чаще всего используются методы GET или POST

  • Установка адреса, на который будут отправляться введенные данные

POST-запросы

Итак, создадим новую форму. Для этого определим новый файл form.php, в которое поместим следующее содержимое:


<!DOCTYPE html>
<html>
<head>
<title>METANIT.COM</title>
<meta charset="utf-8" />
</head>
<body>
<h4>Форма ввода данных</h4>
<form action="user.php" method="POST">
    <p>Имя: <input type="text" name="name" /></p>
    <p>Возраст: <input type="number" name="age" /></p>
    <input type="submit" value="Отправить">
</form>
</body>
</html>

Атрибут action="user.php" элемента form указывает, что данные формы будет обрабатывать скрипт user.php, который будет находиться с файлом form. php в одной папке. А атрибут method="POST" указывает, что в качестве метода передачи данных будет применяться метод POST.

Теперь определим файл user.php, который будет иметь следующее содержание:


<?php
$name = "не определено";
$age = "не определен";
if(isset($_POST["name"])){
 
    $name = $_POST["name"];
}
if(isset($_POST["age"])){
 
    $age = $_POST["age"];
}
echo "Имя: $name <br> Возраст: $age";
?>

Для обработки запросов типа POST в PHP используется встроенная глобальная переменная $_POST. Она представляет ассоциативный массив данных, переданных с помощью метода POST. Используя ключи, мы можем получить отправленные значения. Ключами в этом массиве являются значения атрибутов name у полей ввода формы.

Например, так как атрибут name поля ввода возраста имеет значение age (<input type="number" name="age" />), то в массиве $_POST значение этого поля будет представлять ключ «age»: $_POST["age"]

И поскольку возможны ситуации, когда поле ввода будет не установлено, то в этом случае желательно перед обработкой данных проверять их наличие с помощью функции isset(). И если переменная установлена, то функция isset() возвратит значение true.

Теперь мы можем обратиться к скрипту form.php и ввести в форму какие-нибудь данные:

И по нажатию кнопки введенные данные методом POST будут отправлены скрипту user.php:

Необязательно отправлять данные формы другому скрипту, можно данные формы обработать в том же файле формы. Для этого изменим файл form.php следующим образом:


<!DOCTYPE html>
<html>
<head>
<title>METANIT.COM</title>
<meta charset="utf-8" />
</head>
<body>
<?php
$name = "не определено";
$age = "не определен";
if(isset($_POST["name"])){
 
    $name = $_POST["name"];
}
if(isset($_POST["age"])){
 
    $age = $_POST["age"];
}
echo "Имя: $name <br> Возраст: $age";
?>
<h4>Форма ввода данных</h4>
<form method="POST">
    <p>Имя: <input type="text" name="name" /></p>
    <p>Возраст: <input type="number" name="age" /></p>
    <input type="submit" value="Отправить">
</form>
</body>
</html>

Поскольку в данном случае мы отправляем данные этому же скрипту — то есть по тому же адресу, то у элемента форма можно не устанавливать атрибут action.

Стоит отметить, что в принципе мы можем отправлять формы и запросом GET, в этом случае для получения тех же значений формы применяется массив $_GET, который был рассмотрен в прошлой теме:


<!DOCTYPE html>
<html>
<head>
<title>METANIT.COM</title>
<meta charset="utf-8" />
</head>
<body>
<?php
$name = "не определено";
$age = "не определен";
if(isset($_GET["name"])){
 
    $name = $_GET["name"];
}
if(isset($_GET["age"])){
 
    $age = $_GET["age"];
}
echo "Имя: $name <br> Возраст: $age";
?>
<h4>Форма ввода данных</h4>
<form method="GET">
    <p>Имя: <input type="text" name="name" /></p>
    <p>Возраст: <input type="number" name="age" /></p>
    <input type="submit" value="Отправить">
</form>
</body>
</html>

НазадСодержаниеВперед

Методы GET и POST.

Использование и отличия

Рейтинг: 5 из 5, голосов 154

28 декабря 2019 г.

HTTP методы GET и POST используются для отправки данных на сервер.

Чаще всего методы используются в HTML формах, гиперссылках и AJAX запросах.

POST и GET запросы можно отправить на сервер с помощью любого программного обеспечения, работающего с протоколом HTTP.

Обработка запросов может отличаться в зависимости от типа сервера.

Большинство действующих сайтов работают с языком программирования PHP. В этом случае передаваемые данные попадают в суперглобальные массивы $_GET и $_POST.

Массивы $_GET и $_POST являются ассоциативными. Таким образом, переданный на сервер параметр с именем «user_name», будет доступен как $_GET[‘user_name’] или $_POST[‘user_name’] в зависимости от используемого метода.

Какой метод использовать GET или POST, чем отличаются методы

Основное отличие метода GET от POST в способе передачи данных.

Запрос GET передает данные в URL в виде пар «имя-значение» (другими словами, через ссылку), а запрос POST передает данные в теле запроса (подробно показано в примерах ниже). Это различие определяет свойства методов и ситуации, подходящие для использования того или иного HTTP метода.

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

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

Запрос, выполненный методом POST, напротив следует использовать в случаях, когда нужно вносить изменение в ресурс (выполнить авторизацию, отправить форму оформления заказа, форму обратной связи, форму онлайн заявки). Повторный переход по конечной ссылке не вызовет повторную обработку запроса, так как не будет содержать переданных ранее параметров. Метод POST имеет большую степень защиты данных, чем GET: параметры запроса не видны пользователю без использования специального ПО, что дает методу преимущество при пересылке конфиденциальных данных, например в формах авторизации.

HTTP метод POST поддерживает тип кодирования данных multipart/form-data, что позволяет передавать файлы.

Также следует заметить, что методы можно комбинировать. То есть, при необходимости вы можете отправить POST запрос на URL, имеющий GET параметры.

В каких случаях использовать POST и когда нужно использовать GET

В таблице ниже показаны распространенные варианты использования HTTP запросов с объяснением в чем разница между GET и POST запросами в конкретной ситуации.

Ситуация GET POST
Фильтр товаров

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

Для повторного посещения страницы пользователь должен будет повторно заполнить форму фильтра, страницей с параметрами нельзя будет поделиться, сохранить в закладки и вернуться к странице позже без повторного заполнения формы фильтра.
Форма авторизации

Отсутствует защита конфиденциальной информации. Введенный пароль будет виден в адресной строке браузера, будет сохранен в истории посещенных сайтов.

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

Онлайн заявка

Оформления заказа

Форма обратной
связи

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

Повторное обращение по конечной ссылке не приведет к повторной обработке запроса с введенными ранее параметрами.
Через гиперссылку

Переход по гиперссылке с параметрами равнозначен отправке запроса через HTML форму.

Нет технической возможности поместить POST запрос в гиперссылку.
AJAX запросы Используются оба метода. Выбор зависит от контекста. Принципы выбора метода такие же, как и для HTML форм.

Сравнительная таблица HTTP методов GET и POST

В таблице ниже приведены основные свойства и отличия GET и POST методов.

Свойство GET POST
Способ передачи данных Через URL В теле HTTP запроса
Защита данных

Данные видны всем в адресной строке браузера, истории браузера и т. п.

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

Не более 2048 символов

Не ограничена

Примечание: ограничения могут быть установлены сервером.
Сохранение в закладки

Страница с параметрами может быть добавлена в закладки

Страница с параметрами не может быть добавлена в закладки.
Кэширование Страница с параметрами может быть кэширована Страница с параметрами не может быть кэширована
Индексирование поисковыми системами Страница с параметрами может быть индексирована Страница с параметрами не может быть индексирована
Возможность отправки файлов Не поддерживается Поддерживается
Поддерживаемые типы кодирования application/x-www-form-urlencoded

application/x-www-form-urlencoded

multipart/form-data

text/plain
Использование в гиперссылках <a> Да Нет
Использование в HTML формах Да Да
Использование в AJAX запросах Да Да

Пример использования GET запроса

В примере показана простая HTML форма фильтра по нескольким параметрам.

HTML код формы, генерирующей GET запрос:

<form method="GET" name="filter" action="http://example.com/catalog/">
<p>Диагональ экрана</p>
<label><input type="radio" name="screen" value="4" checked> 4</label><br>
<label><input type="radio" name="screen" value="4.5"> 4.5</label><br>
<label><input type="radio" name="screen" value="5"> 5</label>
<p>Цвет</p>
<label><input type="checkbox" name="color_black" checked> Черный</label><br>
<label><input type="checkbox" name="color_white" checked> Белый</label><br>
<label><input type="checkbox" name="color_golden"> Золотой</label><br>
<input type="submit" value="Применить фильтр">
</form>

После отправки формы браузер переведет пользователя по ссылке:

http://example.com/catalog/?screen=4&color_black=on&color_white=on

Ссылка содержит URL документа, отвечающего за обработку и блок параметров. Знак «?» отмечает начало блока параметров GET запроса. Далее находятся пары «имя-значение», разделенные знаком «&». Имена параметров отделены от значений знаком «=».

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

Пример использования POST запроса

В примере показана простая HTML форма авторизации.

HTML код формы, генерирующей POST запрос:

<form method="POST" name="authorization" action="http://example.com/profile.php">
Логин: <input type="text" name="username"><br>
Пароль: <input type="password" name="user_password"><br>
<input type="submit" value="Войти">
</form>

После отправки формы браузер переведет пользователя по ссылке:

http://example.com/profile.php

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

Запрос состоит из области заголовков и тела запроса.

В заголовках указана служебная информация: URL обработчика, тип кодирования, параметры браузера и т. д.

В теле запроса содержатся передаваемые параметры. Формат тела запроса может отличаться в зависимости от выбранного типа кодирования.

by Lebedev

Форма отправки данных в PHP (POST, GET)

Чтобы организовать передачу данных на сервер с помощью формы, потребуется реализовать HTML форму, в которую посетители сайта будут вводить свою информацию и PHP код, назначение которого в принятии и обработке полученных данных на сервере.

HTML форма отправки данных

Форма на странице формируется тегами <form>…</form>, внутри которых помещаются теги полей для ввода текстовой информации, теги специальных компонентов (например, поле со списком), теги для поля выбора и загрузки файла.

Для HTML5 так же существует возможность размещать теги полей формы не внутри тегов формы, а в любом месте на странице. При этом для каждого такого поля нужно указывать атрибут «form», чтобы определить с какой формой отправки он должен взаимодействовать.

Итак, простейшая форма отправки может содержать следующий код:

<form action="myform.php" method="post">
Значение А: <input type="text" name="data1">
Значение Б: <input type="text" name="data2">
<input type="submit" value="Отправить">
</form>

Элементы формы и их параметры:

action=»myform.php» – атрибут «action» определяет, какой php-файл будет обрабатывать отправляемые данные. В этом примере, данные будут отправлены в файл «myform.php», находящийся в той же директории что и страница с формой. Если этот атрибут не указать явно, данные формы будут отправлены по адресу страницы самой формы.

method=»post» – параметр method определяет метод передачи данных POST или GET. Более подробно об этом в статье «Отличия методов POST или GET». Если не указывать атрибут явно, по умолчанию будет использоваться метод GET.

Текст «Значение А:» и «Значение Б:» добавлен только с целью оформления и понятности формы для пользователя. Добавлять это для передачи данных не обязательно, но для того, чтобы пользователю стало понятно, что вводить, стоит указывать.

Теги <input> используются для формирования различных управляющих элементов формы.

type=»text» – атрибут «type» определяет вид поля. В зависимости от того, какой тип указан, меняется и внешний вид элемента, и его назначение. Значение атрибута «text» указывает, что в браузере элемент будет отображаться однострочным текстовым полем, куда пользователь сможет ввести свою строку.

name=»data1″ – атрибут «name», указывает имя, вернее индекс данных в массиве, полученных сервером. Это обязательный параметр, по которому в php-обработчике можно будет затем получить доступ переданному значению. Имя может быть выбрано произвольно, однако, удобнее когда это значение имеет какой-то понятный смысл.

type=»submit» – тег <input> с таким значением параметра «type» будет отображаться на странице как кнопка. На самом деле на форме можно обойтись и без кнопки. Если, например, в форме есть текстовые поля, то отправку можно осуществить, просто нажав «Ввод» на клавиатуре. Но наличие кнопки делает форму более понятной.

value=»Отправить» – в данном случае (для type=»submit») определяет только надпись на кнопке. Для type=»text», например, это будет текст, который будет выведен в текстовом поле.

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

 

Обработка отправленных HTML формой данных в PHP

Отправленные описанным способом данные, помещаются в суперглобальные массивы $_POST, $_GET и $_REQUEST. $_POST или $_GET будут содержать данные в зависимости от того, каким методом осуществлялась отправка. $_REQUEST содержит отправленные данные любым из указанных методов.

$_POST, $_GET и $_REQUEST – это ассоциативные массивы, поля-индексы которых совпадают с атрибутами «name» тегов <input>. Соответственно, для работы с данными в файле myform. php можно присвоить переменным значения элементов такого массива указав в качестве индекса имя поля:

// для метода GET
$a = $_GET['data1'];
$b = $_GET['data2'];
// для метода POST
$a = $_POST['data1'];
$b = $_POST['data2'];
// при любом методе
$a = $_REQUEST['data1'];
$b = $_REQUEST['data2'];

Проверка заполнения полей формы

Иногда при получении данных нужно проверить, не отправил ли пользователь пустую форму. Для этого можно использовать функцию empty.

if (empty($_REQUEST['data1'])) {
echo 'Поле не заполнено';
} else {
echo 'Поле было заполнено';
$a = $_REQUEST['data1'];
}

Обычно этого решения достаточно. Если нужно вводить текст, то будет понятно, введен он или нет. Однако, если пользователь намеренно для вычислений введет ноль, то функция empty покажет, что значения нет. Поэтому для таких ситуаций лучше использовать функцию isset. Она будет явно проверять, заданно ли значение или нет.

if (isset($_REQUEST['data1'])) {
echo 'Поле было заполнено';
$a = $_REQUEST['data1'];
} else {
echo 'Поле не заполнено';
}

HTML-формы

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

HTML-форма используется для сбора пользовательского ввода. Пользовательский ввод чаще всего отправляются на сервер для обработки.

Пример

Имя:

Фамилия:

Попробуйте сами »

Элемент

Элемент HTML используется для создать HTML-форму для пользовательского ввода:


.
элементы формы
.


Элемент

представляет собой контейнер для различных типов элементов ввода, такие как: текстовые поля, флажки, радио кнопки, кнопки отправки и т. д.

Все в этой главе рассматриваются различные элементы формы: HTML-элементы формы.

Элемент

Элемент HTML является наиболее используемый элемент формы.

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

Вот несколько примеров:

Тип Описание
Отображает однострочное поле ввода текста
<тип ввода = "радио"> Отображает переключатель (для выбора одного из множества вариантов)
Отображает флажок (для выбора нуля или более из множества вариантов)
Отображает кнопку отправки (для отправки формы)
<тип ввода = "кнопка"> Отображает нажимаемую кнопку

В этой главе рассматриваются все различные типы входов: Типы ввода HTML.

Текстовые поля

определяет однострочное поле ввода для ввод текста.

Пример

Форма с полями ввода текста:


 

 

 

 

Попробуйте сами »

Вот как приведенный выше HTML-код будет отображаться в браузере:

Имя:

Фамилия:

Примечание: Сама форма не видна. Также обратите внимание, что ширина по умолчанию поля ввода составляет 20 символов.

Элемент

<дел> {{ форма.сообщение.ошибки}} {{ форма.сообщение }}
<дел> {{ form.sender. errors }} {{ форма. отправитель }}
<дел> {{ form.cc_myself.errors }} {{ form.cc_myself }}