Зараз практично жоден сайт не обходиться без елементів інтерфейсу на кшталт полів введення тексту, кноппок, перемикачів і прапорців. Вони необхідні для взаємодії з користувачем, щоб він міг шукати на сайті, писати коментарі, відповідати на опитування, прикріплювати фотографії і робити багато інших подібних речей. Саме форми і забезпечують отримання даних від користувача і передачу їх на сервер, де вони вже піддаються аналізу і обробці.
Форми потрібні для того, щоб відправляти дані з веб-сторінки на веб-сервер, який зможе ці дані обробити: зареєструвати користувача, створити повідомлення на форумі, відправити лист і так далі. Загалом, форми в інтернеті просто необхідні.
Щоб створити форму, потрібно використовувати парний тег <form>, усередині з атрибутами:
actionзадає адресу,URL, відправки форми;methodзадає метод відправки форми GET, чи POST
<form action="https://osnovy-web.blogspot.com/" method="get">
поля форми
</form>
Метод GET:
- Додає дані форми в URL адресу в парі ім'я / значення
- Довжина URL адреси обмежена (2048 символів)
- Ніколи не використовуйте GET для відправки конфіденційних даних! (Буде видно в URL адресу)
- Ефективно для відправки форм, коли користувач хоче додати результат в закладки
- GET краще підходить для незахищених даних, таких як рядки запитів в Google
Метод POST
- POST завжди потрібно використовувати, якщо дані форми містять конфіденційну чи особисту інформацію. Метод POST не відображає дані форми в полі адреси сторінки.
- POST не має обмежень за розміром і може використовуватися для відправки великих обсягів даних.
- Відправлені форми з повідомленням не можуть бути закладками
Приклади форм на веб-сторінках
| Вкажіть ваше ім'я | <input type="text"> | |
| Вкажіть пароль | <input type="password"> | |
| Вкажіть електронну скриньку | <input type="email"> | |
| Вкажіть адресу веб-сайту | <input type="url"> | |
| Вкажіть число | <input type="number"> | |
| Вкажіть число з діапазону | <input type="range"> | |
| Вкажіть пошуковий запит | <input type="search"> | |
| Вкажіть колір | <input type="color"> | |
| Вкажіть дату | <input type="date"> | |
| Виберіть з переліку: |
<select> <option>Варіант 1</option> <option>Варіант 2</option> <option>Варіант 3</option> </select> |
Інтерактивні елементи управління форми:
- текстові поля (для однієї або декількох рядків);
- перемикачі;
- прапорці;
- випадаючі списки;
- віджети для завантаження;
- кнопки відправки.
Елемент <input>
Елемент <input> - найважливіший елемент форми. Елемент <input> відображається декількома способами, в залежності від атрибута type.
Тип поля type впливає на те, як воно буде відображатися і вести себе. Найпоширеніший тип - це text, який позначає текстове поле. Він же використовується за замовчуванням.
Ім'я поля потрібно, щоб правильно обробити дані на сервері. Зазвичай, ім'я поля має бути унікальним в межах форми, хоча є винятки. Для задання імені поля використовують латинські літери і цифри.
<!-- Текстове поле -->
<input type="text"> <input type="text" name="search">
<!-- прапорець-->
<input type="checkbox">
<!-- Перемикач -->
<input type="radio">
Текстові поля
Майже всім формам потрібно текстове введення від користувачів, щоб ввести своє ім'я, адресу електронної пошти, пароль, адреса та ін. Текстові поля форми приходять в різних варіантах.
| Текст | <input type="text"> | Допускає будь-який тип символів | |
|---|---|---|---|
| <input type="email"> | Може показувати попередження, якщо введений невірний email | ||
| Пароль | <input type="password"> | Символи показуються як точки | |
| Число (номер) | <input type="number"> <input type="number" min=" " max=" "> | Можуть бути використані клавіші вверх/вниз | |
| Телефон | <input type="tel"> | Може спрацювати автозаповнення | |
| Багаторядковий текст | <textarea></textarea> | Може бути змінений розмір поля |
Текстові поля можуть відображати текст-підказку, що вказується за допомогою атрибуту placeholder="" , який зникне, як тільки буде введений певний текст:
<input type="text" name="username" placeholder="text">
Тег Label
Так як елементи форми самі по собі не дуже описові, їм, як правило, передує текстова мітка. Тег label пов'язує текст і поле введення логічно. А ще якщо клацнути по тексту в такому підписі, то курсор переміститься в відповідне поле.
<label>Email</label>
<input type="email">
Прапорці
Прапорці - це елементи форми, які мають тільки два стани: увімкнено чи ні. Вони в основному дозволяють користувачеві сказати: «Так» або «Ні» для чогось.
<input type="checkbox"> Запам'ятати мене
<label> <input type="checkbox"> Я згоден </label>
Перемикачі
Ви можете надати користувачеві список варіантів на вибір за допомогою перемикачів.
Для роботи цього елемента форми, HTML-код повинен згрупувати список перемикачів разом. Це досягається за допомогою одного і того ж значення для атрибута name:
прапорець існує сам по собі, перемикачі можуть з'являтися тільки у вигляді списку (що означає, щонайменше два варіанти).
Крім того, клацання по прапорці є довільним, в той час як вибір одного з перемикачів є обов'язковим. Ось чому неможливо вимкнути перемикач, якщо вибрати найближчий варіант. Зрештою, завжди вибирається один з перемикачів.
Випадаюче меню
Якщо кількість варіантів для вибору займає надто багато місця, ви можете скористатися випадаючим меню <select>.
Вони працюють подібно до перемикачів, відрізняється тільки компоновка.
<select>
<option>січень</option>
<option>лютий</option>
<option>березень</option>
<option>квітень</option>
<option>травень</option>
<option>червень</option>
<option>липень</option>
<option>серпень</option>
<option>вересень</option>
<option>жовтень</option>
<option>листопад</option>
<option>гГрудень</option>
</select>
Якщо додати атрибут multiple, можна надати можливість вибрати кілька варіантів:
Кнопка Submit
Кнопка submit <input type = "submit"> визначає кнопку для подання у вигляді даних для обробки форм. Оброблювач форм зазвичай являє собою сторінку на сервері зі скриптом для обробки вхідних даних. Оброблювач форм задається у вікні форми атрибутом action.
Групування елементів форми
Кожній групі елементів можна привласнити назву за допомогою елемента <legend>, який йде відразу за тегом <fieldset>.
Браузери для підвищення наочності відображають результат використання елемента <fieldset> у вигляді рамки.
Назва групи проявляється зліва у верхній межі <fieldset>. Наприклад, якщо в елементі <fieldset> зберігається контактна інформація:
Приклад реєстраційної форми на сайті
Приклад форми входу на сайт
Відеоуроки
Довідник всіх атрибутів форм
Завдання 1
Завдання 2
1. Створити файл form2.html такого зразка:
Завдання 3
Створіть форму для опитування про якість послуг, що надаються компанією стільникового зв’язку, наведену на рис. Збережіть форму у файлі з ім'ям formsmobil.html
Завдання 4
Зміст завдання у коментарі коду
Завдання 5
Зміст завдання у коментарі коду