HTML/Атрибут method (Элемент form)
Синтаксис
(X)HTML
<form action="..." method="[значение]"> ... </form>
Описание
Атрибут / параметр method (от англ. «method» ‒ «метод») указывает метод отправки данных формы на сервер.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | Form: FORM | Перевод |
| 3.2 | FORM | |
4. 01 | method = get|post [CI]… DTD: Transitional
Strict
Frameset | |
| 5.0 | 4.10.19.6 Form submission The method and… | |
| 5.1 | 4.10.19.6. Form submission The method and… | |
| XHTML | ||
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset | |
| 1.1 | Extensible 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Плюсы метода:
- Позволяет быстро получать результаты передачи форм с небольшим количеством коротких полей.
Минусы метода:
- Передача личных данных (пароли, номера кридитных карт и так далее) с помощью данного метода является небезопасной, так как данные передаваемые этим методом могут быть легко перехвачены.
- 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>
<p><input type=»reset»> <input type=»submit»></p>
</form>
</body>
</html>
Параметр method (Элемент form)
06-html-form — основы | andron13
Формочки и формошлёпы #
Один мой друг, а именно Геннадий Колтун с ib.by, называет фронтендщиков формошлёпами.
В чём то он определённо прав. Формы и формочки поджидают нас в интернете везде. Формы логина и регистрации на сайте, форма отправки емайлов, контактов, биллинга и всего чего только может быть.
Пример формы
И мы шлёпаем эти формы всё время. И пожалуй это тот тег, который нам надо разобрать досконально.
Так давайте просто начнём:
Form и input #
Тегом <form> мы объединяем поля для ввода данных.
<form>
Здесь будет форма
</form>
На самом деле у тега есть определённые полезные и достаточно обязательные атрибуты. Эти атрибуты указывают куда отправлять форму и каким способом. Соответственно они называются action и method. Тогда это будет выглядеть вот так:
<form action="" method="">
Предлагаю сразу вписать туда значения, что бы мы привыкали к заполнению нужных атрибутов. В action мы поставим заглушку #, решётка часто используется заглушки ссылки. А в метод передачи данных мы напишем post. Методы передачи, получения, изменения и удаления данных, такие как post, get и другие — темы для самостоятельного изучения, внизу статьи будет пара ссылок на Википедию.
Результат:
<form action="#" method="post">
Здесь будет форма
</form>
Если я говорю о формочках, то я представляю себе сразу форму логина на сайт.
<form action="#" method="post">
<b>Форма логина на наш сайт</b><br>
Имя пользователя <input type="text">
</form>
Вроде выглядит всё очевидно. Подпись для поля, тег для ввода и даже тип ввода “text” не должен вызывать удивления.
Делаем второе такое поле — пароль.
<form action="#" method="post">
<p><b>Форма логина на наш сайт</b></p>
<p>Имя пользователя <input type="text"></p>
<p> Пароль <input type="password"></p>
</form>
Если мы попытаемся заполнить поле текста, то мы будем видеть символы, которые вводим. Если же мы будем заполнять поле пароля, то вместо символов мы увидим звёздочки. Помимо text и password существует ещё несколько полей.
Значения атрибута type в input #
button #
button: делает поле ввода кнопкой.
С помощью дополнительного атрибута value мы можем подписать эту кнопку.
Пример:
<input type="button" value="Кнопка">
submit #
submit: тоже кнопка, обычно эта кнопка отправляет данные.
Пример:
<input type="submit">
reset #
reset: кнопка сброса данных в форме
<input type="reset">
image #
image: собственная кнопка на сайте. Пример:
<input type="image" src="button-help.png" alt="help">
checkbox #
checkbox: Флажок или чекбокс. Атрибут value и в данном случае поможет подписать поле чекбокса.
Атрибут checked сделает поле активным(выбранным).
<input type="checkbox" checked>
color #
color: этот атрибут появился в HTML5, и он управляет выбором цвета.
<input type="color" value="#169FA2">
date, datetime-local, month, time #
Атрибуты работы с датой и временем. Надеюсь, что они говорят сами за себя.
date: я был бы удивлён, если бы с помощью date мы не могли бы выбрать дату.
datetime-local: даёт возможность помимо даты ввести ещё и время.
month: ввод месяца и года.
time: ввод времени.
week: ввод недели.
<input type="date"> <input type="datetime-local"> <input type="month"> <input type="time" value="22:53:05"> <input type="week">
email #
email: поле для ввода емайл-адреса. Поле проверяется средствами HTML на минимальную валидность: наличие собачки, и подобия доменного имени после него.
С помощью важного атрибута placeholder мы можем ввести значение, которое исчезнет, как только пользователь начнёт вводить данные.
С помощью волшебного атрибута size увеличивается поле ввода. Size измеряется в буквах. Значение 25 означает 25 символов моноспейсного шрифта.
<input type="email" placeholder="ваш емайл ввиде [email protected]" size="25">
file #
file: Если вы вдруг скачали ненужный файл из интернета, то с помощью формы и атрибута file вы сможете его закачать обратно. Атрибут accept настраивает какие файлы можно принимать и то какие файлы сможет отправить пользователь на сервер. Пример:
<input type="file" accept=".doc,.docx">
hidden: элемент скрытого поля, которое отправится на сервер. Например счётчик пользователя.
Пример:
<input type="hidden" name="verySecret" value="666">
number #
number: Принимает числа. Мы можем указать минимальные значения и даже шаг — step.
<input type="number" min="0" step="10">
password #
password: Мы рассмотрели этот атрибут в самом начале. Можно добавить, что у нас есть возможность указания максимальной и минимальной длины — minlength и maxlength.
<input type="password" minlength="10" maxlength="20">
Хочу заметить, что пароли стоит передавать только по защищённому протоколу — HTTPS. Я бы сказал, что отправка паролей пользователя по обычным протоколам — преступная халатность.
radio #
radio: возможность выбор с переключением.
<p>M
<input type="radio" name="gender" value="male"></p>
<p>W
<input type="radio" name="gender" value="female"></p>
<p>D
<input type="radio" name="gender" value="diverse"></p>
С помощью атрибута name мы можем связать три радио-поля и только одно из них может быть выбрано.
Если атрибут name удалить, что все три поля могут быть выбранными.
range #
range: можно использовать для визуализации изменения значений. Например звука:
<p>Звук
<input type="range" name="volume"
min="0" max="11"></p>
По умолчанию в теге атрибуты со следующими значениями:
- min: 0
- max: 100
- value: min + (max-min)/2, or min if max is less than min
- step: 1
search #
search: предположу, что этот инпут для поиска.
Поиск <input type="search">
tel #
tel: Поле ввода телефонного номера.
<p>Телефон:<input type="tel"></p>
text #
text: Однострочное текстовое поле
<p>Text:<input type="text" required minlength="4" maxlength="20" size="10"></p>
Мы можем сделать поле(кстати не только это обязательным), мы можем изменить размер и ввести минимальное и/или
максимальное вводимое значение.
textarea #
Существует и многострочное поле для ввода. Это правда не атрибут для инпута а отдельный тег. Но я думаю, что его стоит разместить здесь, что бы мы видели и альтернативу.
Пример:
<p> Комментарий</p> <textarea name="comment" cols="30" rows="4"></textarea>
url #
url: Поле ввода/редактирования урла. С минимальной проверкой валидности.
Label #
Поля обычно подписывают. Мы использовали простой текст в абзаце или заголовок. Взрослые программисты используют лейбл для подписывания инпутов.
Есть два различающихся способа использования label.
Пример первый:
<label for="firstname">First name:</label> <input type="text" name="firstname"><br> <input type="checkbox" name="subscribe"> <label for="subscribe">Subscribe to newsletter</label>
Пример второй:
<label> Чекбокс
<input type="checkbox" checked>
</label>
Вся разница в том, что в первом случае мы должны связать label и input с помощью for и name значений.
А во втором случае у нас input внутри label и дополнительная связка необязательна.
Атрибуты #
Мы рассмотрели подробно атрибут type. Давай посмотрим список других возможных атрибутов в теге input: autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required, size, spellcheck.
autocomplete #
Браузеры запоминают, что мы вводим в формулярах. И мы можем отключить эти данные для всей формы или для отдельных полей.
Мне тяжело сейчас придумать, где именно вебмастер может решить, что он умнее пользователя. И на самом деле я считаю, что вмешивание в поведение браузера достаточно смелое решение. Но ситуации бывают разные, возможность для этого есть и мы должны её знать.
<form action="#" method="post" autocomplete="on">
<p><b>Форма логина на наш сайт</b></p>
<p>Имя пользователя <input type="text" autocomplete="off"></p>
<p> Пароль <input type="password"></p>
</form>
list #
<form>
<label for="color">Favorite color?</label><br> <input name="color" list="colors">
</form>
<datalist>
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
<option>Green</option>
<option>Orange</option>
<option>Purple</option>
<option>Black</option>
<option>White</option>
<option>Gray</option>
</datalist>
И с помощью этих строчек мы получили выпадающий список с выбором.
Как вариант такой список может выглядеть и вот так.
<input list="browsers">
<datalist>
<option value="Internet Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
maxlength и minlength #
maxlength и minlength мы рассмотрели уже пару раз вверху, да и говорят они сами за себя.
pattern #
В паттернах у нас есть возможность писать регулярные выражения, которые будут проверять значения на валидность. Регулярные выражения не самая важная тема в программировании. Её можно опустить, уверен что тебе есть что сейчас учить.
placeholder #
placeholder: помогает пользователю понять как ему стоит заполнить поле. Это очень удобная вещь.
readonly #
Помечает поле “только к чтению”.
required #
Поле обязательно к заполнению.
Это те поля которые помечаются красной звёздочкой.
size #
Размер, длина строки.
spellcheck #
С помощью этого атрибута можно отключить проверку орфографии.
Я бы сказал это удобно, особенно для моей фамилии. Не очень приятно читать, что фамилия написана с ошибкой.
<label>Фамилия с проверкой
<input type="text" spellcheck="false">
</label>
<label>Фамилия без проверки
<input type="text" spellcheck="true">
</label>
select #
Список выбора можно настроить используя тег select. Возможности HTML расширяются не просто так. Правильно настроенные теги вызывают нативные интерфейсы на тех же мобильниках. И человек не путается при вводе данных.
<form action="#" method="post">
<p><label>Выберите язык <br>
<select size="7" multiple name="language[]">
<option disabled>список языков в нашей школе</option>
<option selected value="java">Java</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Dart">Dart</option>
<option value="C-sharp">C#</option>
<option value="C">C</option>
<option value="ruby">Ruby</option>
<option value="pascal">Pascal</option>
</select>
</label></p>
<p><input type="submit" value="Отправить"></p>
Итого — минимально самая простая форма #
<!-- Это форма ещё не закончена -->
<form action="#" method="get">
<label> Имя
<input type="text">
</label>
<label> Фамилия
<input type="text">
</label>
<input type="submit">
</form>
В консоле разработчика мы можем посмотреть, что делает браузер, когда мы нажимаем “отправить”.
Создавай простую форму, в ней два поля имя и фамилия, кнопку submit. Открываем в браузере и смотрим.
devtools
На вкладке Network мы можем увидеть все данные, которые передаются серверу. И как они передаются. Добавьте в поля названия полей, проверьте, что метод передачи get и посмотрите что происходит в урле вашей страницы при отправке данных. Поменяйте на POST и посмотрите ещё раз. Найдите ваши данные в окне Нетворка в девтулсах.
<form action="#" method="get">
<label> Имя
<input type="text" name="firstname">
</label>
<label> Фамилия
<input type="text" name="secondname">
</label>
<input type="submit">
</form>
Дополнительные ссылки #
- Метод Post
- Простым языком о HTTP
- О HTTPS
- Request_methods
- CRUD
- ib.by — позже, после того как выучите front здесь можно попробовать устроится на свою первую работу. Сошлитесь на эту страницу.
- https://developer.mozilla.org/ru/docs/Learn/Forms
- https://developer.mozilla.org/ru/docs/Learn/Forms/Form_validation
- https://learn.javascript.ru/forms-controls
- Запись вебинара RS School
Сошлитесь на эту страницу.Домашнее задание #
- Пимпочки
- Типичный формуляр
- Много инпутов
- Запись на курсы программирования
Метод HTML-формы Атрибут
❮ Тег HTML
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Атрибут метода указывает, как отправлять данные формы (данные формы отправляются на страницу, указанную в атрибут действия ).
Данные формы могут быть отправлены как переменные URL (с method="get" ) или как сообщение HTTP
транзакция (с method="post" ).
Примечания к GET:
- Добавляет данные формы в URL-адрес в парах имя/значение
- Длина URL-адреса ограничена (около 3000 символов)
- Никогда не используйте GET для отправки конфиденциальных данных! (будет видно в URL)
- Полезно для отправки форм, когда пользователь хочет добавить результат в закладки
- GET лучше подходит для незащищенных данных, таких как строки запроса в Google
Примечания к POST:
- Добавляет данные формы в тело HTTP-запроса (данные не отображаются в URL-адресе)
- Не имеет ограничений по размеру
- Отправка формы с помощью POST не может быть добавлена в закладки
Поддержка браузера
| Атрибут | |||||
|---|---|---|---|---|---|
| метод | Да | Да | Да | Да | Да |
Синтаксис
Попробуйте сами »
❮ Тег HTML