1.1 Елемент <form>
Форми є важливою частиною взаємодії користувача з вебсайтами. За допомогою форм користувачі можуть вводити дані, які потім відправляються на сервер для обробки. У HTML для створення форм використовується елемент <form>
Тег <form> використовується для створення форми на вебсторінці. Він служить контейнером для різних елементів форми, таких як текстові поля, кнопки, прапорці тощо. Усі дані, введені користувачем, можуть бути відправлені на сервер для обробки.
Приклад використання:
<form action="/submit" method="post">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button id="submit" type="submit">Відправити</button>
</form>
<script>
const userName = document.getElementById("username");
const userEmail = document.getElementById("email");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && userEmail.validity.valid) {
e.preventDefault();
alert(`Ваше ім'я: ${userName.value}\n` + `Ваш Email: ${userEmail.value}`);
}
});
</script>
<form action="/submit" method="post">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">Відправити</button>
</form>
Атрибути тега <form>
Атрибут action вказує URL, на який будуть відправлені дані форми після натискання кнопки відправлення. Якщо атрибут action не вказаний, дані форми будуть відправлені на поточний URL.
Приклад використання атрибута action:
<form action="https://example.com/submit">
<!-- елементи форми -->
</form>
Атрибут method вказує HTTP-метод, який буде використаний для відправки даних форми. Доступно два значення: GET і POST.
- GET: дані форми включаються в URL запиту у вигляді параметрів. Цей метод підходить для відправки невеликого обсягу даних і не повинен використовуватися для відправки конфіденційної інформації.
- POST: дані форми відправляються в тілі HTTP-запиту. Цей метод підходить для відправки великого обсягу даних і конфіденційної інформації.
Приклад використання атрибута method:
<form action="/submit" method="post">
<!-- елементи форми -->
</form>
1.2 Методи відправки даних
Метод GET
Метод GET відправляє дані форми у вигляді параметрів URL. Цей метод використовується за замовчуванням, якщо атрибут method не вказаний.
Приклад використання методу GET:
<form action="/search" method="get">
<label for="query">Пошук:</label>
<input type="text" id="query" name="query" required>
<button id="submit" type="submit">Шукати</button>
</form>
<script>
const searchField = document.getElementById("query");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (searchField.validity.valid) {
e.preventDefault();
alert(`Ви шукали: ${searchField.value}`);
}
});
</script>
<form action="/search" method="get">
<label for="query">Пошук:</label>
<input type="text" id="query" name="query">
<button type="submit">Шукати</button>
</form>
Особливості методу GET
- Дані форми видно в URL, що робить метод непридатним для передачі конфіденційної інформації
- Обмеження на розмір даних, оскільки URL має обмежену довжину
- Дані можуть бути легко закешовані, і закладка може бути збережена у браузері
Метод POST
Метод POST відправляє дані форми в тілі HTTP-запиту. Цей метод використовується для передачі великого обсягу даних та конфіденційної інформації.
Приклад використання методу POST:
<form action="/submit" method="post">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">Відправити</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert(`Ласкаво просимо, ${userName.value}!`);
}
});
</script>
<form action="/submit" method="post">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Відправити</button>
</form>
Особливості методу POST
- Дані форми не видно в URL, що робить метод придатним для передачі конфіденційної інформації
- Немає обмежень на розмір даних, оскільки дані передаються в тілі запиту
- Дані не кешуються і не зберігаються у закладках браузера
1.3 Додаткові атрибути
Атрибут enctype
Атрибут enctype використовується для вказання способу кодування даних форми при відправці з методом POST. Найбільш часто використовується значення — multipart/form-data, яке необхідне для завантаження файлів.
Приклад використання атрибута enctype:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">Завантажити файл:</label>
<input type="file" id="file" name="file">
<button type="submit">Відправити</button>
</form>
Атрибут target
Атрибут target вказує, де буде відображено відповідь сервера після відправки форми. Можливі значення:
_self(за замовчуванням): у тому ж вікні або вкладці_blank: у новому вікні або вкладці_parent: у батьківському фреймі_top: у верхньому фреймі (якщо використовуються фрейми)
Приклад використання атрибута target:
<form action="/submit" method="post" target="_blank">
<!-- елементи форми -->
</form>
Атрибут novalidate
Атрибут novalidate відключає вбудовану браузером валідацію форми.
Приклад використання атрибута novalidate:
<form action="/submit" method="post" novalidate>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Відправити</button>
</form>
1.4 Способи відправки даних
Відправка даних форми здійснюється за допомогою кнопки відправки: <input type="submit"> або <button type="submit">. Коли користувач натискає на цю кнопку, браузер відправляє дані форми на сервер, використовуючи вказаний метод і URL.
Ось основні способи відправки даних форми:
1. Кнопка відправки: це найпоширеніший спосіб відправки даних форми. Кнопка відправки може бути створена за допомогою елемента <input> або <button>.
Приклад з <input>:
<input type="submit" value="Submit">
Приклад з <button>:
<button type="submit">Submit</button>
2. Клавіша Enter: в текстових полях форми натискання клавіші Enter також може викликати відправку форми.
3. JavaScript: форма може бути відправлена програмно з використанням JavaScript. Це корисно, коли необхідно виконати додаткові перевірки або інші дії перед відправкою даних.
Приклад використання JavaScript для відправки форми:
<form id="myForm" action="/submit" method="post">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">Submit</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert("Авторизація пройшла успішно!\n" + "\n" + `Ласкаво просимо, ${userName.value}!`);
}
});
</script>
<form id="myForm" action="/submit" method="post">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Пароль:</label>
<input type="password" id="password" name="password">
<br>
<button type="button" onclick="submitForm()">Submit</button>
</form>
function submitForm() {
document.getElementById('myForm').submit();
}
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ