Атрибут formmethod тега <button> — метод надсилання форми
автор: с3с
Загальний опис
автор: NagarD
- Нотатка
-
Про метод "get":
- він додає форм-дані до URL в якості пар ім'я/значення
- це корисно для форм, коли користувачу потрібно надати можливість додати результат в закладки
- Існує обмеження по розміру форм-даних, що передаються в URL (Цей розмір залежить від конкретного браузера), тому, ви не можете бути впевнені, що всі форм-дані будуть коректно передано
- Ніколи не використовуйте метод "get", щоб передати конфіденційну інформацію! (Пароль або іншу конфіденційну інформацію буде відображатися в адресному рядку браузера)
- Нотатка
-
Про метод "post":
- він посилає форм-дані в якості HTTP POST операції
- Форма з методом "post" не може бути закладкою
- він більш надійний та безпечний ніж метод"get"
- він не має обмежень по розміру
Синтаксис
<button type="submit" formmethod="get|post">Атрибут formmethod може отримувати 2 значень:
-
get -
Цей метод призначений для передачі даних форми безпосередньо в адресному рядку у вигляді пар "ім'я = значення", які додаються до адреси сторінки після знаку питання і розділяються між собою амперсандом (символ &). Повна адреса буде "http://example.com/?name=Taras&password=SD_Tdf7". Обсяг даних, що відправляються обмежений 4кб.
В жодному разі не використовуйте цей метод для відправки конфіденційних даних (Наприклад, для сторінки авторизації).
автор: с3с -
post -
Відправляє форм-дані на сервер пост запитом, обсяг даних, що пересилаються обмежений лише налаштуваннями сервера.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 9 | 4 | 5.1 | 15 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 18 | 4 | 5 |
Приклади
+ запропонувати свій приклад у пісочниці
Форма одна, метод у неї get, а кнопок п'ять. Стилі підписують кожній, чим вона насправді надішле дані: жовтим — ті, що беруть метод форми, синім — ті, що його перебивають, червоним — ті, у яких значення невідоме й тому мовчки перетвориться на get. Нижче — та сама форма з параметрами в action: підпис нагадує, що з get вони зникнуть.
HTML
<p class="head">Форма з method="get" і п'ятьма кнопками</p>
<form action="/poshuk" method="get">
<input type="search" name="q" value="що шукаємо">
<button type="submit">Знайти</button>
<button type="submit" formmethod="post">Зберегти</button>
<button type="submit" formmethod="POST">Зберегти (великими)</button>
<button type="submit" formmethod="put">Оновити</button>
<button type="submit" formmethod="dialog">Скасувати</button>
</form>
<p class="head">Параметри в action і метод get разом не живуть</p>
<form action="/zvit?rik=2026&misyats=8" method="post">
<input type="text" name="q" value="текст">
<button type="submit">Надіслати (post)</button>
<button type="submit" formmethod="get">Надіслати (get)</button>
</form>
<p class="head">Кнопки, на яких атрибут не діє</p>
<form action="/poshuk" method="get">
<button type="button" formmethod="post">type="button"</button>
<button type="reset" formmethod="post">type="reset"</button>
</form>CSS
.head {
margin: 20px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
form {
max-width: 640px;
margin-bottom: 6px;
padding: 10px;
border: 1px solid #b9c6d8;
border-radius: 6px;
background: #f6f9ff;
}
input,
button {
margin: 4px 0;
padding: 5px 9px;
font: inherit;
}
form[method="get"]::after {
content: "форма: method=\"get\" — це типове для всіх кнопок нижче";
display: block;
margin-top: 6px;
color: #8a6100;
font-size: .85em;
}
form[method="post"]::after {
content: "форма: method=\"post\", action зі своїм рядком запиту";
display: block;
margin-top: 6px;
color: #1b4f9c;
font-size: .85em;
}
/* кнопка без свого formmethod бере метод форми */
button[type="submit"]:not([formmethod]),
button:not([type]):not([formmethod]) {
background: #fff6d8;
outline: 2px solid #e0a800;
}
button[type="submit"]:not([formmethod])::after {
content: " → метод форми";
color: #8a6100;
font-size: .8em;
}
/* кнопка з відомим значенням справді перебиває метод */
button[formmethod="post"],
button[formmethod="POST"],
button[formmethod="get"],
button[formmethod="dialog"] {
background: #eef3fb;
outline: 2px solid #2f6fd0;
}
button[formmethod="post"]::after,
button[formmethod="POST"]::after,
button[formmethod="get"]::after,
button[formmethod="dialog"]::after {
content: " → " attr(formmethod);
color: #1b4f9c;
font-size: .8em;
}
button[formmethod="dialog"]::after {
content: " → нічого не надсилає, закриває dialog";
}
/* невідоме значення: усе, що не get/post/dialog */
button[formmethod]:not([formmethod="post" i]):not([formmethod="get" i]):not([formmethod="dialog" i]) {
background: #fff4f4;
outline: 2px solid #d64545;
}
button[formmethod]:not([formmethod="post" i]):not([formmethod="get" i]):not([formmethod="dialog" i])::after {
content: " → " attr(formmethod) " невідоме, насправді get";
color: #c0392b;
font-size: .8em;
}
/* на цих типах атрибут не діє зовсім */
button[type="button"],
button[type="reset"] {
background: #f4f5f7;
outline: 2px dashed #97a1ae;
}
button[type="button"]::after,
button[type="reset"]::after {
content: " → formmethod тут не діє";
color: #5a6472;
font-size: .8em;
}<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>
<button formmethod="post">Надіслати</button>
</form>Різниця між HTML 4.01 та HTML5
Атрибут formaction тега <button> з'явився тільки в HTML5.
Коментарі
Коментарів ще немає — будьте першим!