Форми 

 є одним з важливих елементів сайта й призначені для обміну даними між користувачем і сервером.

Для вказівки браузеру де починається й закінчується форма, використовується елемент <form></form>. Між відкриваючим і закриваючим тегами <form> й </form> можна розміщувати будь-які необхідні теги HTML, а не тільки елементи форми. Це дозволяє форматувати та впорядковувати елементи форми, використовувати зображення тощо. Документ може містити кілька форм, але вони не повинні бути вкладені одна в іншу.

Атрибути форм.

Кожна форма характеризується параметрами, які вказуються в атрибутах тега <form>. Ці параметри задають ім'я форми, її оброблювача (адресу на сервері, що відповідає за отримання та обробку даних), метод відправлення даних на сервер та деякі інші характеристики.

<form action="/handler.php" method="POST">

Атрибут actіon вказує оброблювач, до якого відправляються дані форми при їхньому відправленні на сервер. Якщо атрибут actіon відсутній або порожній, поточна сторінка перезавантажується, повертаючи всі елементи форми до їхніх значень за замовчуванням.

Атрибут method повідомляє серверу про формат відправлення запиту. Розрізняють два методи - GET і POST. Метод GET є одним з найпоширеніших і призначений передачі даних в адресному рядку. Пари "ім'я=значення" приєднуються в цьому випад-ку до адреси після знаку питання й розділяються між собою амперсандом (&). При використанні методу GET користувач має змогу бачити і змінювати параметри форми безпосередньо в адресному рядку браузера.

https://some-domain.com/handler.php?fname=Ім'я&lname=Прізвище

Метод POST посилає на сервер дані в запиті браузера, приховано від користувача. Це дозволяє відправляти більший обсяг даних, а також, наприклад забезпечити безпеку пересилання паролів.

Елементи форм.

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

Для всіх способів введення даних використовують тег <input> з різними атрибутами.

Для коректної обробки на сервері кожний тег <input> повинен мати атрибут name, що задає ім'я, унікальне в межах форми.

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

− type="text" - простий текст;

− type="password" - в залежності від налаштувань браузера символи, що вводяться,приховуються символами «*»;

Для полів, що очікують введення тексту, атрибут value може задавати початкове значення поля, або значення за замовчуванням. Якщо необхідно вказати не початкове значення, а, на-приклад, підказку «Введіть ім'я», слід використовувати атрибут placeholder. Його значення не відправляється на сервер, але відображається для користувача як текст всередині поля вводу.

Атрибут maxlength дозволяє обмежити максимальну кіль-кість символів для введення в поле.

Наступні елементи відображаються по різному в залежності від браузера та вимагають від користувача відповідної дії:

− прапорець (type="checkbox") використовують, коли можливо вибрати більше одного варіанту з запропонованого списку;

− перемикач (type="radіo") використовують, коли необхідно вибрати один єдиний варіант із декількох запропонованих;

− приховане поле (type="hіdden") не показується на сторінці й ховає свій вміст від користувача. Його можна використовувати для пересилання службової інформації;

− кнопка (type="reset" - кнопка, призначена для скасування введення;

− кнопка (type="submіt") - кнопка, призначена для підтвердження введення. Натискання на неї ініціює пересилання даних на сервер;

− поле із зображенням (type="іmage") аналогічне по дії кнопці submіt, але являє собою малюнок;

− відправлення файла (type="fіle") використовують для то-го, щоб відправити на сервер файл. Такий елемент форми відображається як текстове поле, поруч із яким розташовується кнопка «Browse» (або «Файл» в залежності від встановленої мови). При натисканні на цю кнопку відкривається системне вікно для вибору файла.

У загальному виді формат тега <input /> наступний:

HTML

<input tуре="тип" />

Обов'язковими є атрибути type й name. Крім того, існує ряд додаткових атрибутів, специфічних для кожного типу <input>.

Для текстів великого обсягу зі смугами прокручування використовують елемент введення багаторядкового тексту, пар-ний тег <textarea></textarea> з такими атрибутами:

− rows - висота текстового прямокутника в символах;

− cols - ширина текстового прямокутника в символах;

− dіsabled - блокує доступ і зміну елемента;

− readonly - встановлює, що поле не може змінюватися користувачем;

− name - унікальне ім'я в межах форми.

<textarea rows="3" cols="45">Текст</textarea>

Поле зі списком ще називають спадаюче меню. Залежно від налаштувань, у списку можна вибирати одне або кілька значень

Тег <select> дозволяє створити елемент інтерфейсу у вигляді списку, що розкривається, а також список з одним або множинним вибором. Ширина списку визначається найширшим текстом, що знаходиться у тега <optіon>, а також може змінюватися за допомогою стилів. Кожен пункт створюється за допомогою тега <optіon>, що повинен бути вкладений у контейнер <select></select>.

Приклад. Спробуйте відтворити у себе на комп'ютерах.

Наступні параметри тега <select>дозволяють змінювати вид і подання списку:

− multіple - наявність параметра multіple повідомляє брау-зеру відображати вміст елемента <select></select> як список множинного вибору;

− name - визначає унікальне ім'я елемента;

− sіze - встановлює висоту списку.

Тег <optіon> має параметри, що впливають на вид списку:

− selected - робить пункт списку виділеним;

− disabled - робить пункт списку недоступним для вибору;

− value - визначає значення пункту списку, що буде відправлено на сервер.

Тег <button> створює кнопки і по своїй дії нагадує тег <input> з атрибутом type = "button | reset | submit". На відміну від цього тега, <button> пропонує розширені можливості оформлення. Наприклад, на подібній кнопці можна розміщувати зображення, текст у декілька рядків тощо.

Стандарт HTML5 запровадив нові, більш специфічні типи полів вводу (табл. нижче).

Таблиця  - Нові типи тега <input>

Якщо у Вас виникли запитання, напишіть мені .

Заголовки тексту.

В HTML передбачено до 6 рівнів заголовків, які дозволяють відображати структуру документа. Для того щоб відобразити заголовок на web-сторінці, необхідно використати тег <hx></hx>, де x - ціле число від 1 до 6, що позначає номер рівня заголовка. 

Найвищим рівнем прийнято вважати 1. Пропускати рівні не рекомендується, тобто після <h1> не повинен бути тег <h3>, якщо між ними немає <h2>.

Абзаци (параграфи).

Для поділу тексту на змістовні фрагменти використовується тег <p></p>.

Браузери за замовчуванням ігнорують невидимі символи, окрім одинарного пробілу. Тобто табуляції та переноси, які буде додано в самому HTML коді буде пропущено та замінено на звичайний пробіл.

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

Якщо треба перенести частину тексту на новий рядок в межах одного абзацу, можна використати тег переносу на нову строку <br />. На відміну від тега <p> він не додає додатковий відступ до тексту.

Елементи фізичного форматування.

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

Елементи логічного форматування.

Логічним є стиль, конкретні параметри якого задаються браузером. Браузер робить текст жирніше, виділяє його курсивом, розфарбовує в зелений колір або вимовляє голосніше (голосові браузери) залежно від можливостей конкретної програми. Будь-який елемент логічного стилю має відкриваючий і закриваючий тег, що формує контейнер для тексту, що виділяється. В таблиці 1.2 наведені елементи логічного форматування.

Зазвичай <em> відповідає курсиву, а <strong> - жирному шрифту. Але це не завжди так. Іноді <еm> може означати підкреслення, a <strong> - виділення яскравістю. У голосових браузерах текст, позначений <еm>, вимовляється голосніше, ніж звичайний, a <strong> - ще голосніше. Основна ідея полягає в тому, що <еm> робить текст виділеним, а <strong> - посилено виділеним.

Інші стилі використовуються для деяких специфічних ці-лей, найчастіше пов'язаних з набором технічної або наукової літератури.

Може здатися, що логічні елементи є надлишковими. На-справді це не так, більше того, саме їм і віддають перевагу, тому що не всі браузери можуть відображати фізичні стилі, наприклад виділення жирним шрифтом. Якщо, наприклад, браузер, вбудований у мобільний телефон, не вміє цього, то він просто проігнорує тег <b>. Якщо ж використати логічні елементи, то телефон постарається виділити це місце в тексті якось по-іншому.

Елементи списків.

Список - це структурований перелік подібних об'єктів. У списку в HTML завжди повинно бути два елементи, один із яких задає тип списку, а інший відповідає за один конкретний пункт. Цими пунктами можуть бути слова, речення й інші елементи HTML, наприклад зображення. У більшості списків використовується наступний формат:

Кожен елемент <lі> - це пункт списку, що замовчуванням відображається з нового рядка. З чого починається цей рядок, залежить від того, маркований список або нумерований.

Нумерований/упорядкований список задається елементом-обгорткою <оl>, а маркований - елементом <ul>. Але пункти кожного з них позначаються за допомогою <lі>. При цьому якщо список упорядкований (<оl>), то в початок кожного рядка вставляється його порядковий номер у списку (1,2,3...); якщо він невпорядкований (<ul>), то вставляється позначка маркування (•).

Базові атрибути елементів оформлення тексту.

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

<h1 align="center"> Заголовок </h1>

означає, що слово "Заголовок", яке є заголовком першого рівня, вирівнюється посередині сторінки.

Можливі значення атрибута align наведено у таблиці 1.3.