Форми в HTML

Зараз практично жоден сайт не обходиться без елементів інтерфейсу на кшталт полів введення тексту, кноппок, перемикачів і прапорців. Вони необхідні для взаємодії з користувачем, щоб він міг шукати на сайті, писати коментарі, відповідати на опитування, прикріплювати фотографії і робити багато інших подібних речей. Саме форми і забезпечують отримання даних від користувача і передачу їх на сервер, де вони вже піддаються аналізу і обробці.

Форми потрібні для того, щоб відправляти дані з веб-сторінки на веб-сервер, який зможе ці дані обробити: зареєструвати користувача, створити повідомлення на форумі, відправити лист і так далі. Загалом, форми в інтернеті просто необхідні.

Щоб створити форму, потрібно використовувати парний тег <form>, усередині з атрибутами:

action задає адресу, URL, відправки форми;
method задає метод відправки форми GET, чи POST

Приклад:

<form action="https://osnovy-web.blogspot.com/" method="get"> поля форми </form>

See the Pen form-get-html by kravets (@raisa69) on CodePen.

Метод 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">	Допускає будь-який тип символів
Email	<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">

See the Pen form-html by kravets (@raisa69) on CodePen.
Тег Label

Так як елементи форми самі по собі не дуже описові, їм, як правило, передує текстова мітка. Тег label пов'язує текст і поле введення логічно. А ще якщо клацнути по тексту в такому підписі, то курсор переміститься в відповідне поле.

<label>Email</label>
<input type="email">

Прапорці

Прапорці - це елементи форми, які мають тільки два стани: увімкнено чи ні. Вони в основному дозволяють користувачеві сказати: «Так» або «Ні» для чогось.

<input type="checkbox"> Запам'ятати мене

Оскільки може виявитися складно клацнути по невеликому прапорці, рекомендується помістити прапорець і його опис всередину <label>.

<label> <input type="checkbox"> Я згоден </label>

See the Pen form-chekbox-html by kravets (@raisa69) on CodePen.

Перемикачі

Ви можете надати користувачеві список варіантів на вибір за допомогою перемикачів.
Для роботи цього елемента форми, HTML-код повинен згрупувати список перемикачів разом. Це досягається за допомогою одного і того ж значення для атрибута name:

See the Pen form-cheked-html by kravets (@raisa69) on CodePen.

прапорець існує сам по собі, перемикачі можуть з'являтися тільки у вигляді списку (що означає, щонайменше два варіанти).

Крім того, клацання по прапорці є довільним, в той час як вибір одного з перемикачів є обов'язковим. Ось чому неможливо вимкнути перемикач, якщо вибрати найближчий варіант. Зрештою, завжди вибирається один з перемикачів.

Випадаюче меню

Якщо кількість варіантів для вибору займає надто багато місця, ви можете скористатися випадаючим меню <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, можна надати можливість вибрати кілька варіантів:

See the Pen form-option-html by kravets (@raisa69) on CodePen.

Кнопка Submit

Кнопка submit <input type = "submit"> визначає кнопку для подання у вигляді даних для обробки форм. Оброблювач форм зазвичай являє собою сторінку на сервері зі скриптом для обробки вхідних даних. Оброблювач форм задається у вікні форми атрибутом action.

See the Pen forms-submit-html by kravets (@raisa69) on CodePen.

Групування елементів форми

Елемент <fieldset> ... </ fieldset> призначений для групування елементів, пов'язаних один з одним, розділяючи таким чином форму на логічні фрагменти.

Кожній групі елементів можна привласнити назву за допомогою елемента <legend>, який йде відразу за тегом <fieldset>.

Браузери для підвищення наочності відображають результат використання елемента <fieldset> у вигляді рамки.

Назва групи проявляється зліва у верхній межі <fieldset>. Наприклад, якщо в елементі <fieldset> зберігається контактна інформація:

Приклад реєстраційної форми на сайті

See the Pen form-registration-html by kravets (@raisa69) on CodePen.

Приклад форми входу на сайт

See the Pen form-login-html by kravets (@raisa69) on CodePen.

Відеоуроки

Довідник всіх атрибутів форм

Завдання 1

1. Створіть файл form1.html. Додайте на сторінку порожню форму,

2. потім задайте їй адресу відправки https://echo.pdu.edu.vn.ua

3. Вкажіть метод відправки даних - post.

4. Додайте в форму поле введення за допомогою тега <input>,

5. задайте йому тип text, ім'я login.

Завдання 2

1. Створити файл form2.html такого зразка:

Завдання 3

Створіть форму для опитування про якість послуг, що надаються компанією стільникового зв’язку, наведену на рис. Збережіть форму у файлі з ім'ям formsmobil.html

Завдання 4

Зміст завдання у коментарі коду

See the Pen task-form-html by kravets (@raisa69) on CodePen.

Завдання 5