Атрибут method тега <form> — надсилання GET чи POST
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<form method="get | post">
...
</form>Атрибут method може отримувати 2 значень:
-
get -
Цей метод є одним з найбільш поширених і призначений для отримання необхідної інформації і передачі даних в адресному рядку. Пари «ім'я=значення» приєднуються в цьому випадку до адреси після знаку питання і розділяються між собою амперсандом (символ &).
Зручність використання методу отримання полягає в тому, що адресу з усіма параметрами можна використовувати неодноразово, зберігши його, наприклад, в закладки браузера, а також змінювати значення параметрів прямо в адресному рядку.
автор: с3с -
post -
Метод post посилає на сервер дані в заголовку запиту. Це дозволяє відправляти більшу кількість даних, ніж метод get, оскільки у нього встановлено обмеження в 4 Кб.
Великі обсяги даних використовуються в форумах, поштових службах, при заповненні бази даних, при пересиланні файлів і ін.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Та сама форма з method="get" і з method="post": що бачить сервер
HTML
<div class="poruch">
<div class="karta get">
<h3><code>method="get"</code> — пошук</h3>
<form action="/search" method="get">
<p><label>Запит<br><input type="text" name="q" value="html атрибути"></label></p>
<p><label>Розділ<br><input type="text" name="rozdil" value="html"></label></p>
<p><button type="button">Знайти</button></p>
</form>
<p class="zapyt"><code>GET /search?q=html+%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%B8&rozdil=html</code></p>
<p><small>Видно в адресі, копіюється, кладеться в закладки, оновлюється без питань.</small></p>
</div>
<div class="karta post">
<h3><code>method="post"</code> — вхід</h3>
<form action="/login" method="post">
<p><label>Пошта<br><input type="email" name="email" value="[email protected]"></label></p>
<p><label>Пароль<br><input type="password" name="pass" value="taemnytsia"></label></p>
<p><button type="button">Увійти</button></p>
</form>
<p class="zapyt"><code>POST /login</code><br><code>[email protected]&pass=taemnytsia</code> <small>— у тілі запиту</small></p>
<p><small>Не потрапляє ні в адресу, ні в історію, ні в логи сервера.</small></p>
</div>
</div>CSS
.poruch {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.karta {
flex: 1 1 280px;
border: 1px solid #d0d0d0;
border-radius: 6px;
padding: 10px 14px;
}
.karta h3 {
margin: 0 0 8px;
font-size: 15px;
}
.karta p {
margin: 0 0 8px;
}
.karta small {
color: #6b6b6b;
}
input {
font: inherit;
width: 100%;
box-sizing: border-box;
padding: 4px 6px;
border: 1px solid #b0b0b0;
border-radius: 4px;
}
button {
font: inherit;
padding: 6px 12px;
border: 0;
border-radius: 4px;
background: #0172ad;
color: #fff;
}
.zapyt {
padding: 6px 8px;
border-radius: 4px;
background: #f2f2f2;
word-break: break-all;
}
.get {
border-color: #0172ad;
}
.post {
border-color: #1b7a3d;
}Найпростіший приклад використання HTML атрибута method теґа <form>
<p>Приклад форми для входу з використанням атрибуту 'method'</p>
<hr>
<form method="post">
<label>Ім'я:</label><br>
<input type="text" name="login"><br>
<label>Ваше повідомлення:</label><br>
<textarea></textarea>
<br>
<input type="submit" value="Увійти" >
</form>Коментарі
Коментарів ще немає — будьте першим!