Створення інтерактивної сторінки за допомогою форми

Форми в 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" name="search"

Приклад роботи

Текстові поля

Майже всім формам потрібно текстове введення від користувачів, щоб ввести своє ім'я, адресу електронної пошти, пароль, адресу та ін.ше. Текстові поля форми можуть бути в різних варіантах.

Текстові поля можуть відображати текст-підказку, який зникне, як тільки буде введений певний текст:

<!DOCTYPE html>

<html>

<head>

<title>Підказка</title>

</head>

<body>

<form>

</form>

</body>

</html>

Приклад роботи

Тег <label></label>

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

<label>Email</label>

Приклад роботи

Прапорці

Прапорці - це елементи форми, які мають тільки два стани: увімкнено чи ні.

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

<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>.

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

<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>

<option>Google Chrome</option>

<option>Internet Explorer</option>

<option>Mozilla Firefox</option>

<option>Opera</option>

<option>Safari</option>

</select>

Приклад роботи

Завдання

Створіть форму для опитування за зразком:

Файл зберегти з ім'ям відповідно Прізвище_form.html.

Завантажити через сторінку завдання в Google-клас.

На сторінці завдання після додавання файлів натиснути кнопку "Позначити як виконане".

Page updated

Google Sites

Report abuse