Атрибут formmethod тега <input> — метод відправки форми
Атрибут повідомляє браузеру, яким методом слід передавати дані форми на сервер.
Форм-дані можуть бути відправлені через змінні в URL (method="get") або як HTTP post транзакції (method="post")
HTML атрибут formmethod перевизначає атрибут method елемента <form>
Загальний опис
автор: NagarD
- Порада
-
Ніколи не використовуйте метод "GET", щоб передати конфіденційну інформацію! (Паролі або інша інформація буде відображатися в адресному рядку браузера).
автор: с3с - Нотатка
-
Атрибут
автор: с3сformmethodможе використовуватися зtype="submit"таtype="image".
Синтаксис
<input formmethod="get|post">Атрибут formmethod може отримувати 2 значень:
-
get -
Цей метод призначений для передачі даних форми безпосередньо в адресному рядку у вигляді пар «ім'я = значення», які додаються до адреси сторінки після знаку питання і розділяються між собою амперсандом (символ &). Повна адреса наприклад буде http://mahazyn.ua/cat/?name=pobut&sort=desc. Обсяг даних в методі обмежений 4 КБ.
автор: с3с -
post -
Посилає на сервер дані в запиті браузера, обсяг даних, що пересилаються обмежений лише настройками сервера.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 9 | 4 | 5 | ≤12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 3 | 18 | 4 | 4.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута formmethod теґа <input>
<p>Приклад форми для входу з використанням атрибуту 'formmethod'</p>
<hr>
<form>
<label>Ім'я:</label><br>
<input type="text" name="login"><br>
<label>Прізвище:</label><br>
<input type="text" name="login"><br>
<label>Ваше повідомлення:</label><br>
<textarea></textarea>
<br>
<input type="submit" formmethod="post" value="Надіслати">
</form>Форма з method="get" і чотири кнопки з різними formmethod. Позначку праворуч від кожної кнопки малює CSS за самим атрибутом — видно, що PUT не розпізнано і відкотиться до GET. Нижче — те саме значення dialog у відкритому вікні.
HTML
<form method="get" action="/poshuk">
<p><label>Що шукаємо <input type="search" name="q" value="монітор"></label></p>
<p><button type="submit">Без formmethod</button></p>
<p><button type="submit" formmethod="get">formmethod="get"</button></p>
<p><button type="submit" formmethod="post">formmethod="post"</button></p>
<p><button type="submit" formmethod="PUT">formmethod="PUT"</button></p>
<p><button type="button" formmethod="post">той самий post, але type="button"</button></p>
</form>
<dialog open>
<form method="dialog">
<p>Форма з method="dialog" усередині вікна:</p>
<button value="ok">Гаразд</button>
<button value="cancel">Скасувати</button>
<p class="note">Ніякого запиту не буде — вікно просто закриється,
а значення натиснутої кнопки лишиться в returnValue.</p>
</form>
</dialog>CSS
form p {
margin: 0 0 10px;
}
button {
font: inherit;
padding: 5px 10px;
border: 2px solid #b9c6d8;
border-radius: 5px;
background: #f6f9ff;
}
button[type="submit"]::after {
margin-left: 10px;
font-weight: 600;
}
button[type="submit"]:not([formmethod])::after {
content: "→ метод форми: GET";
color: #5a6472;
}
button[formmethod="get" i]::after {
content: "→ GET, дані підуть у рядок адреси";
color: #1b6b33;
}
button[formmethod="post" i]::after {
content: "→ POST, дані підуть у тілі запиту";
color: #1b4f9c;
}
button[type="submit"][formmethod]:not([formmethod="get" i]):not([formmethod="post" i]):not([formmethod="dialog" i])::after {
content: "→ значення не розпізнано, буде GET";
color: #d64545;
}
button[type="button"]::after {
content: "→ ця кнопка нічого не надсилає, атрибут марний";
margin-left: 10px;
color: #d64545;
font-weight: 600;
}
dialog[open] {
margin: 20px 0 0;
padding: 12px 16px;
border: 2px solid #b9c6d8;
border-radius: 6px;
background: #fff;
}
.note {
max-width: 420px;
color: #5a6472;
font-size: .9em;
}Різниця між HTML 4.01 та HTML5
Атрибут formmethod з'явився тільки в HTML5.
Коментарі
Коментарів ще немає — будьте першим!