HTML => формы

Вступление

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

Синтаксис

<form method="post|get" action="somePage.php" target="_blank|_self|_parent|_top|framename">

параметры

атрибут	Описание
`accept-charset`	Задает кодировки символов, которые будут использоваться для отправки формы.
`action`	Указывает, куда отправлять данные формы при отправке формы.
`autocomplete`	Указывает, должна ли форма включать или выключать автозаполнение.
`enctype`	Указывает, как данные формы должны быть закодированы при отправке на сервер (только для метода = "post").
`method`	Указывает метод HTTP, который будет использоваться при отправке данных формы (POST или GET).
`name`	Задает имя формы.
`novalidate`	Указывает, что форма не должна быть проверена при отправке.
`target`	Определяет, где отображать ответ, который получен после отправки формы.

замечания

Элемент <form> представляет собой раздел, содержащий элементы, связанные с формой (например, <button> <fieldset> <input> <label> <output> <select> <textarea> ), который передает информацию серверу. Требуются теги start ( <form> ) и end ( </form> ).

предоставление

Атрибут действия

Атрибут action определяет действие, которое должно выполняться при отправке формы, что обычно приводит к скрипту, который собирает представленную информацию и работает с ней. если оставить его пустым, он отправит его в тот же файл

<form action="action.php">

Атрибут метода

Атрибут метода используется для определения HTTP-метода формы, которая является либо GET, либо POST.

<form action="action.php" method="get">
<form action="action.php" method="post">

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

www.example.com/action.php?firstname=Mickey&lastname=Mouse

Метод POST используется при отправке данных в скрипт. Метод POST не добавляет данные формы к URL-адресу действия, а отправляет его с использованием тела запроса.

Чтобы правильно отправить данные из формы, необходимо указать имя атрибута имени.
В качестве примера давайте отправьте значение поля и задайте его имя в lastname :

<input type="text" name="lastname" value="Mouse">

Дополнительные атрибуты

<form action="action.php" method="post" target="_blank" accept-charset="UTF-8" 
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

<!-- form elements -->

</form>

Атрибут Target в теге формы

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

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

Из тега с целевым атрибутом:

<form target="_blank">

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

Значение	Описание
_blank	Ответ отображается в новом окне или вкладке
_self	Ответ отображается в том же фрейме (это по умолчанию)
_parent	Ответ отображается в родительском кадре
_Топ	Ответ отображается в полном объеме окна
framename	Ответ отображается в именованном iframe

Примечание. Атрибут target был устарел в HTML 4.01 . Атрибут target поддерживается в HTML5 .
Фреймы и фреймы не поддерживаются в HTML5 , поэтому значения _parent, _top и frameename теперь в основном используются с iframes .

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

Изображения и файлы могут быть загружены / отправлены на сервер, установив атрибут enctype тега form в multipart/form-data . enctype указывает, как данные формы будут закодированы при отправке на сервер.

пример

<form method="post" enctype="multipart/form-data" action="upload.php"> 
    <input type="file" name="pic" />
    <input type="submit" value="Upload" />
</form>

Группировка нескольких полей ввода

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

Для каждого набора полей вы можете установить легенду для набора с помощью тега LEGEND TEXT

пример

<form>
  <fieldset>
     <legend>1st field set:</legend>
     Field one:<br>
     <input type="text"><br>
     Field two:<br>
     <input type="text"><br>
  </fieldset><br>
  <fieldset>
     <legend>2nd field set:</legend>
     Field three:<br>
     <input type="text"><br>
     Field four:<br>
     <input type="text"><br>
  </fieldset><br>
  <input type="submit" value="Submit">
</form>

Результат

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

Chrome, IE, Edge, FireFox, Safari и последние версии Opera также поддерживают тег

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

HTML
формы

Поиск…