Пошук уроків, статей та іншого контенту
Створюйте форму за допомогою елемента form, визначайте адресу надсилання та HTTP-метод обробки даних.
formform — HTML-елемент для створення форми, за допомогою якої користувач вводить дані та надсилає їх на сервер.
<form action="/submit" method="post">
<!-- Поля форми розміщують усередині form -->
</form>Форма має два основні атрибути:
action — адреса, на яку надсилаються дані;
method — HTTP-метод надсилання даних.
Важливо: сам елемент form не створює поля введення. Для цього всередині нього розміщують input, textarea, select та кнопку надсилання.
actionАтрибут action визначає адресу обробника форми.
<form action="/register" method="post">
<!-- Поля форми -->
</form>У цьому прикладі після надсилання браузер передасть дані за адресою /register.
<form action="/contacts" method="post">Адреса /contacts починається зі слеша, тому вона відносна до домену сайту. Наприклад, для сайту example.com дані буде надіслано на:
https://example.com/contactsМожна також вказати адресу без початкового слеша:
<form action="save.html" method="post">Тоді адреса буде визначатися відносно поточної сторінки.
<form action="https://example.com/register" method="post">У навчальних прикладах серверний обробник може бути відсутній. У такому разі браузер усе одно спробує перейти за вказаною адресою, але сервер може повернути помилку або сторінку не знайдено.
methodАтрибут method визначає HTTP-метод, який браузер використає для надсилання форми.
Найчастіше використовують:
get — дані додаються до адреси сторінки;
post — дані надсилаються в тілі HTTP-запиту.
Значення атрибута method зазвичай записують малими літерами:
<form action="/search" method="get"><form action="/users" method="post">getМетод get підходить для запитів, які отримують або фільтрують дані, наприклад для пошуку.
<form action="/search" method="get">
<label for="query">Пошуковий запит:</label>
<input id="query" name="query" type="search">
<button type="submit">Знайти</button>
</form>Якщо користувач введе HTML і натисне кнопку, браузер сформує адресу приблизно такого вигляду:
/search?query=HTMLДані методу get:
видно в адресному рядку;
можна зберегти в закладках;
можна передати іншій людині через адресу;
не варто використовувати для паролів та інших приватних даних.
postМетод post використовують, коли дані потрібно передати серверу для створення або зміни інформації. Наприклад, для реєстрації, входу або надсилання повідомлення.
<form action="/messages" method="post">
<label for="message">Повідомлення:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Надіслати</button>
</form>За використання post значення не додаються до адресного рядка. Вони передаються в тілі HTTP-запиту.
Метод post не робить дані автоматично зашифрованими. Для захисту даних сайт має використовувати HTTPS, а сервер — правильно обробляти запити.
nameЩоб значення поля було надіслано, це поле повинно мати атрибут name.
<form action="/profile" method="post">
<label for="username">Ім’я користувача:</label>
<input id="username" name="username" type="text">
<button type="submit">Зберегти</button>
</form>Якщо користувач введе Olena, сервер отримає пару:
username=Olenaname — назва даних;
значення, введене користувачем, — значення даних.
Атрибут id потрібен для зв’язування поля з елементом label, але він не визначає назву даних, які надсилаються.
<form action="/register" method="post">
<div>
<label for="name">Ім’я:</label>
<input id="name" name="name" type="text">
</div>
<div>
<label for="email">Електронна пошта:</label>
<input id="email" name="email" type="email">
</div>
<div>
<label for="password">Пароль:</label>
<input id="password" name="password" type="password">
</div>
<button type="submit">Зареєструватися</button>
</form>Після надсилання сервер отримає три значення:
name;
email;
password.
Для надсилання форми використовують кнопку з типом submit:
<button type="submit">Надіслати</button>Натискання такої кнопки запускає надсилання найближчої форми.
У формі також можуть бути інші кнопки:
<button type="reset">Очистити</button>Кнопка reset повертає поля до їхніх початкових значень.
Якщо кнопка розташована всередині form, але її тип не вказано, браузери зазвичай трактують її як кнопку надсилання. Щоб уникати неочікуваної поведінки, краще завжди явно вказувати type.
Наведений приклад можна зберегти у файл index.html і відкрити в браузері.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Форма пошуку</title>
</head>
<body>
<h1>Пошук статей</h1>
<form action="/search" method="get">
<div>
<label for="query">Що знайти?</label>
<input
id="query"
name="query"
type="search"
placeholder="Наприклад, HTML"
>
</div>
<div>
<label for="category">Категорія:</label>
<select id="category" name="category">
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
</div>
<button type="submit">Шукати</button>
<button type="reset">Очистити</button>
</form>
</body>
</html>Якщо ввести форми та вибрати категорію HTML, адреса після надсилання може мати такий вигляд:
/search?query=%D1%84%D0%BE%D1%80%D0%BC%D0%B8&category=htmlКириличні символи в адресі перетворюються у спеціальне URL-кодування. Це нормальна поведінка браузера.
Користувач може натиснути Enter у текстовому полі, щоб надіслати форму. Тому у формі має бути зрозуміла кнопка submit, навіть якщо надсилання також відбувається клавішею.
<form action="/search" method="get">
<label for="search">Пошук:</label>
<input id="search" name="search" type="search">
<button type="submit">Знайти</button>
</form>Якщо атрибут method не вказати, браузер використовує метод get.
<form action="/search">
<input name="query" type="search">
<button type="submit">Знайти</button>
</form>Такий запис працює, але краще явно вказувати method, щоб поведінка форми була зрозумілою з коду:
<form action="/search" method="get">Якщо атрибут action не вказати, форма надсилається на поточну адресу сторінки. Попри це, у реальних проєктах зазвичай явно зазначають адресу обробника.
name<input id="email" type="email">Поле відображається на сторінці, але його значення не буде передано як дані форми. Потрібно додати name:
<input id="email" name="email" type="email">id помилково використовують замість name<input id="email" type="email">id зв’язує поле з label, але не визначає назву даних для сервера. Для цього потрібен name.
<form action="/login" method="get">Під час входу логін і пароль не повинні потрапляти в адресу. Для такої форми використовують post:
<form action="/login" method="post">Для реального захисту також потрібне HTTPS.
<form action="/search" method="get">
<input name="query" type="search">
</form>
<button type="submit">Знайти</button>Кнопка поза form не належить цій формі й не надсилає її. Розмістіть кнопку всередині:
<form action="/search" method="get">
<input name="query" type="search">
<button type="submit">Знайти</button>
</form>type у кнопки<button>Очистити</button>Усередині форми така кнопка може бути сприйнята як кнопка надсилання. Укажіть потрібний тип явно:
<button type="reset">Очистити</button>form об’єднує поля та кнопки для надсилання даних.
action визначає адресу, на яку надсилається форма.
method="get" додає дані до URL і підходить для пошуку та фільтрації.
method="post" передає дані в тілі запиту й використовується для створення або зміни даних.
Поле повинно мати name, щоб його значення було надіслано.
Для надсилання форми використовують <button type="submit">.
id потрібен для зв’язування поля з label, а name — для передавання даних серверу.