📖
HTML Форми
Форми для реєстрації, пошуку і зворотного зв'язку
Тег <form> — контейнер форми
html
<form action="/submit" method="POST">
<!-- поля форми -->
</form>action— URL куди надсилаються даніmethod— спосіб:GET(дані в URL, для пошуку) абоPOST(у тілі запиту, для паролів)
Поля вводу <input>
<input> — самозакриваючий тег. Атрибут type визначає вид поля:
| type | Вигляд | Де використовують |
|---|---|---|
text | Звичайне текстове поле | Ім'я, пошук |
email | Перевіряє формат email | |
password | Символи приховані | Пароль |
number | Тільки числа | Вік, кількість |
checkbox | Прапорець ✓ | Згода, налаштування |
radio | Кругла кнопка ○ | Вибір одного з кількох |
submit | Кнопка відправки | Відправити форму |
range | Повзунок | Гучність, рейтинг |
Важливі атрибути:
name— ключ з яким дані йдуть на серверplaceholder— підказка всередині поля (зникає при вводі)required— поле обов'язкове для заповненняvalue— початкове значення
<label> — підпис до поля
Завжди додавай підпис! Без нього незрозуміло що вводити. Є два способи:
html
<!-- Спосіб 1: for + id (label і input окремо) -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<!-- Спосіб 2: обгорнути input в label -->
<label>
Email:
<input type="email" name="email">
</label>Коли label пов'язаний з input — клік по тексту автоматично фокусує поле. Це зручно і важливо для доступності.
html
💬
Реальна форма реєстрації. Атрибут required забороняє відправку якщо поле порожнє — браузер сам покаже помилку.
Використовуй <button type='submit'> замість <input type='submit'> — кнопку легше стилізувати через CSS і в неї можна вставити HTML (іконку, наприклад).