Створення інтерактивної сторінки за допомогою форми
Форми в HTML
Зараз практично жоден сайт не обходиться без елементів інтерфейсу на кшталт полів введення тексту, кнопок, перемикачів і прапорців. Вони необхідні для взаємодії з користувачем, щоб він міг шукати на сайті, писати коментарі, відповідати на опитування, прикріплювати фотографії і робити багато інших подібних речей. Саме форми і забезпечують отримання даних від користувача і передачу їх на сервер, де вони вже піддаються аналізу і обробці.
Веб-форма (форма) — елемент веб-сторінки, який дає користувачам можливість вводити інформацію і відправляти її на сервер для подальшої обробки.
Форми потрібні для того, щоб відправляти дані з веб-сторінки на веб-сервер, який зможе ці дані обробити: зареєструвати користувача, створити повідомлення на форумі, відправити лист і так далі. Загалом, форми в інтернеті просто необхідні.
Щоб створити форму, потрібно використовувати парний тег <form></form>, усередині з атрибутами.
Тег <form></form>
За створення форми в html-документі відповідає парний тег <form></form>, в якому містяться усі інші необхідні теги.
<form>
<input>
<select>, <optgroup>, <option>
<fieldset>, <legend>
<textarea>
<button>
<label>
Атрибути тега
action - задає адресу (URL) відправки форми;
method - задає метод відправки форми GET, чи POST.
Приклад:
<form action="https://https://sites.google.com/view/computer-science-teach/" method="get">
поля форми
</form>.
Інтерактивні елементи керування форми
текстові поля (для одного або декількох рядків);
перемикачі;
прапорці;
випадаючі списки;
віджети для завантаження;
кнопки відправки.
Тег <input></input>
Більшість полів форм створюється за допомогою одиночного тега <input>. У цього тега два обов'язкових атрибути:
type задає тип поля;
name задає ім'я поля.
Тип поля впливає на те, як воно буде відображатися і вести себе. Найпоширеніший тип - це text, який позначає текстове поле. Він же використовується за замовчуванням.
Ім'я поля потрібно, щоб правильно обробити дані на сервері. Зазвичай, ім'я поля має бути унікальним в межах форми, хоча є винятки. Для задання імені поля використовують латинські літери і цифри.
<!-- Текстове поле -->
<input type="text">
<input type="text" name="search"
<!-- Прапорець-->
<input type="checkbox">
<!-- Перемикач -->
<input type="radio">
Приклад роботи
Текстові поля
Майже всім формам потрібно текстове введення від користувачів, щоб ввести своє ім'я, адресу електронної пошти, пароль, адресу та ін.ше. Текстові поля форми можуть бути в різних варіантах.
Текстові поля можуть відображати текст-підказку, який зникне, як тільки буде введений певний текст:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Підказка</title>
</head>
<body>
<form>
<p><input name="login" placeholder="Логін"></p>
<p><input name="pass" type="password" placeholder="Пароль"></p>
<p><input type="submit" value="Вхід"></p>
<p><input type="reset" value="Очистити"></p>
</form>
</body>
</html>
Приклад роботи
Тег <label></label>
Так як елементи форми самі по собі не дуже описові, їм, як правило, передує текстова мітка (напис). Тег label пов'язує текст і поле введення логічно. А ще якщо клацнути по тексту в такому підписі, то курсор переміститься в відповідне поле.
<label>Email</label>
<input type="email">
Приклад роботи
Прапорці
Прапорці - це елементи форми, які мають тільки два стани: увімкнено чи ні.
Вони в основному дозволяють користувачеві сказати: «Так» або «Ні» для чогось.
<input type="checkbox"> Запам'ятати мене
Оскільки може виявитися складно клікнути по невеликому прапорцю, рекомендується помістити прапорець і його опис всередину <label>.
<label>
<input type="checkbox"> Я згоден
</label>
Приклад роботи
Перемикачі
Можна надати користувачеві список варіантів на вибір за допомогою перемикачів.
Для роботи цього елемента форми, HTML-код повинен згрупувати список перемикачів разом. Це досягається за допомогою одного і того ж значення для атрибута name:
<!DOCTYPE html>
<html>
<head><title>Гуртки</title></head>
<body>
<h2>Гуртки Кременчуцького ліцею №17 "Вибір" імені М. Г. Неленя</h2>
<p><b>Оберіть гурток</b></p>
<label>
<input type="radio" name="section">Волейбол<br>
</label>
<label>
<input type="radio" name="section">Футбол<br>
</label>
<label>
<input type="radio" name="section">Спортивні бальні танці<br>
</label>
<label>
<input type="radio" name="section">Театральне мистецтво<br>
</label>
<label>
<input type="radio" name="section">Партіотичне виховання<br>
</label>
</body>
</html>
Приклад роботи
Прапорець існує сам по собі, перемикачі можуть з'являтися тільки у вигляді списку (що означає, щонайменше два варіанти).
Крім того, клацання по прапорцю є довільним, в той час як вибір одного з перемикачів є обов'язковим. Ось чому неможливо вимкнути перемикач, якщо вибрати найближчий варіант. Зрештою, завжди вибирається один з перемикачів.
Випадаюче меню
Якщо кількість варіантів для вибору займає надто багато місця, можна скористатися випадаючим меню <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, можна надати можливість вибрати кілька варіантів:
<label>Якими браузерами ви користуєтесь?</label>
<select multiple>
<option>Google Chrome</option>
<option>Internet Explorer</option>
<option>Mozilla Firefox</option>
<option>Opera</option>
<option>Safari</option>
</select>
Приклад роботи
Приклад роботи
Завдання
Створіть форму для опитування за зразком:
Файл зберегти з ім'ям відповідно Прізвище_form.html.