Введення в форми. Частина 1.
Пояснення:
Створення форми - тег <form>
За допомогою тегу <form></form> встановлюється форма на сторінці.
Додатково потрібно вказати атрибут action="" - адреса документа,який опрацює дані форми.
Сам по собі цей тег не відображається на сторінці, але браузер розуміє, що зараз буде форма.

Тег <input> - одинарний
За допомогою тегу <input> можна створювати різні елементи інтерфейсу і забезпечити взаємодію з користувачем.
Атрибут type="" - для цього тегу, має багатофункціональність. Наприклад - поля з логіном та паролем користувачів.

Поле <textarea> - для введення тексту
За допомогою тегу <textarea> </textarea> користувач може написати декілька речень.

Атрибути, які часто використовуються
Розглянемо 4 основні атрибути, для тегів які використовуються у формах

Теги <input> та <button></button> - кнопки
Тег <input> із атрибутом type="button | reset | submit" - дозволяє вибрати тип кнопки
Атрибут value="" - дозволяє змінити напис на кнопці.

Тег <button> </button> - парний, на відміну від тегу <input>,
пропонує розширені можливості по створенню кнопок.

Таблиця:
| № | Тема | Приклад коду | Підсумок |
|---|---|---|---|
| 1 | form | | Створює форму, у яку користувач вводить дані. Атрибут action показує, куди ці дані надсилаються. |
| 2 | input | | Тег input створює поле для введення даних. Має різні type (текст, пароль, кнопка тощо). |
| 3 | input type="text" | | Поле для звичайного тексту, наприклад для імені. |
| 4 | input type="password" | | Поле для пароля — текст прихований крапками або зірочками. |
| 5 | value | | Атрибут value задає значення поля або текст на кнопці. Для кнопок — це напис, для полів — початковий текст. |
| 6 | input type="button" | | Кнопка, яка нічого не надсилає, але може щось виконувати через JavaScript. |
| 7 | input type="submit" | | Кнопка, що відправляє дані з форми. |
| 8 | input type="reset" | | Кнопка, яка очищає всі поля у формі. |
| 9 | placeholder | | Показує сірий текст-підказку всередині поля, який зникає, коли починаєш писати. |
| 10 | disabled | | Поле вимкнене — у нього не можна нічого вводити. |
| 11 | readonly | | Поле можна бачити, але не змінювати. Відправляється разом із формою. |
| 12 | required | | Поле обов’язкове — без нього форма не відправиться. |
| 13 | button | | Створює кнопку. Може відправляти форму або виконувати інші дії через JavaScript. |
| 14 | textarea | | Велике поле для введення кількох рядків тексту (наприклад, коментаря). |
| 15 | resize: none; | | Якщо в <style> до тегу textarea надати властивість resize: none;, змінювати розмір вікна буде неможливо: textarea {resize: none;}. |
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC
WebUniverse