Швидко освоїти Html

Навіщо потрібні і як працюють форми на сучасних сайтах

Тег Input

Input з різними значеннями для Type

Інші атрибути тега Input і приклади їх використання

Випадаючі списки, текстові поля та інші форми

Select та Option — теги випадаючих списків

Атрибути тега Option

Textarea — створення текстового поля у формі

Label — для чого потрібен цей Html тег у формі

Fieldset і Legend — розбиваємо форму на частини

Вітаю вас, шановні читачі блогу . Сьогодні я хочу поговорити про такий невід’ємною складовою верстки будь-якого сайту, як HTML форми. Який би не був движок вашого сайту (cms), на ньому обов’язково будуть в тому чи іншому вигляді використовуватися форми, створені за допомогою тегів Form і Input, а так само атрибутів і параметрів Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

Ну, і ще можна додати до цього елементи для створення випадаючих списків і текстових полів — Select, Option, Textarea, Label, Fieldset, Legend.

Навіщо потрібні і як працюють форми на сучасних сайтах

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

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

Так, хочу ще нагадати, що ми вже встигли розглянути багато матеріалів на тему мови гіпертекстової розмітки, наприклад, дізналися принципи формування кольорів в Html, трьох видів списків на тегах ul, ol, li, dl) і принципи створення таблиць на тегах Tr, Th, Td, Table.

По своїй суті форми складаються з елементів, для створення яких всередині основного контейнера з тегів Form вставляють різні теги — Checked, Value, Checkbox, Radio, Checkbox, Submit та ін. Нам лише потрібно буде розташувати її код у будь-якому зручному для цього місці шаблону сайту, вказавши за допомогою тегів і атрибутів, як вона має виглядати.

Це може бути текстове поле з кнопкою відправки введеного запиту, варіанти вибору з радіокнопками (коли можна залишити натиснутою тільки одну з цих кнопок), кілька текстових полів з кнопкою для надсилання (зворотній зв’язок описана тут) і багато іншого.

Наприклад, у разі «пошуку», з допомогою атрибута Value можна визначити, що саме буде написано на кнопці, розташованій поруч з полем для введення запиту. Дані вводяться у формах повинні бути в подальшому якимось чином оброблені.

Наприклад, у разі зворотного зв’язку користувач, після того як заповнить поле зі своїм ім’ям, введе свій E-mail і текст повідомлення, а потім натискає кнопку відправки, буде вправі сподіватися на відправку даних з форми на E-mail автора сайту. Але реалізувати з допомогою лише однієї мови гіпертекстової розмітки (читайте тут що таке Html, теги і валідатор W3C), на жаль, не можливо.

Для цих цілей буде потрібно спеціальна програма обробник, яка після натиснення користувачем на кнопку відправки візьме всі дані з полів зворотного зв’язку і відправить їх на E-mail власнику ресурсу. Яка саме програма буде це робити, ви повинні вказати самі з допомогою атрибута Action.

Зазвичай програма обробки являє собою скрипт, написаний на мові PHP. Тому в атрибуті Action тега Form ви повинні будете прописати шлях до файлу цього скрипта, що лежить на сервері вашого хостингу. Наведу як приклад підписку на RSS-стрічку мого блогу за допомогою E-mail:

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

Теги Form і Input для створення кнопок, чекбоксов і радіокнопок

Будь-яка форма повинна бути укладена в відкриваючий і закриваючий теги Form. Це своєрідний контейнер для їх створення. У цього тега є ряд обов’язкових і необов’язкових атрибутів:

Name – унікальне ім’я, яке потрібно вказувати, якщо в Html файлі, де ви щось робите, буде використовуватися кілька вебформ

Action – обов’язковий атрибут вказує шлях до скрипта, якому будуть передані дані для подальшої обробки

Method – з допомогою нього ви можете змінити метод передачі даних з цієї вебформы скрипту файлу обробника. Якщо ви не вкажете, то за замовчуванням буде використовуватися метод Get, який, власне кажучи, призначений в основному для змінних і коротких повідомлень, і до того ж відкритим способом передаючи дані через адресний рядок браузера. Для передачі даних форм скрипту обробника все ж краще використовувати метод POST, призначений спеціально для передачі текстових повідомлень закритим способом

Розглянемо інші теги, що дозволяють створювати різноманітні вебформы. Самий універсальний – це Input. Всередині нього обов’язково прописують атрибут Type, який визначає, що саме буде з себе представляти HTML форма, створена за допомогою цього тегу.

C допомогою Input і Type, можна створювати такі елементи:

однорядкові текстові поля (Type=»Text»)

поля для введення пароля (Type=»Password»)

чекбокси (Type=»Checkbox»)

радіокнопки (Type=»Radio»)

приховані поля Type=»Hidden»)

звичайні кнопки (Type=»Button»)

кнопки для відправки даних в обробник (Type=»Submit»)

кнопки для приведення вебформы до вихідного стану (Type=»Reset»)

поля для завантаження файлів на сервер (Type=»File)

кнопки з зображенням (Type=»Image»)

Input не має закриваючого тега. Що саме буде представляти із себе вебформа, створена за допомогою нього, цілком і повністю залежить від параметра, вказаного в атрибуті Type. Якщо Type не вказано, то за замовчуванням буде створено текстове поле.

Приклади форм, створених на Input з різними значеннями для Type

TEXT	Звичайне текстове поле для введення символів з клавіатури
PASSWORD	Текстове поле, в якому вводяться символи закриваються зірочками
BUTTON	Просто кнопка
SUBMIT	Створюється кнопка, за допомогою якої можна відправити дані в програму обробника
IMAGE	Поле із зображенням, при натисканні на яку, дані будуть відправлені в обробник
RADIO	Радиопереключатели — слід використовувати, якщо потрібно вибрати тільки один варіант із запропонованих	Joomla WordPress SMF
Joomla WordPress SMF
CHECKBOX	CHECKBOX — чекбокси (можна активувати кілька чекбоксов одночасно)	Joomla WordPress SMF
Joomla WordPress SMF
FILE	Створюється кнопка для завантаження файлу на сервер
HIDDEN	Приховане поле, яке не відображається, але в файл обробника дані передаються.
RESET	Кнопка для повернення даних в первісне значення (скидання).

Інші атрибути тега Input і приклади їх використання

Розглянемо, для чого потрібні інші атрибути:

Name – у разі, якщо дані повинні бути відправлені в скрипт програми обробника, то ви повинні обов’язково вказати параметр для атрибута Name. Під цим ім’ям дані, відправлені з форми, будуть фігурувати в програмі обробника інформації.

Size — з допомогою нього задається розмір поля створюваної вебформы. Значення вказується в кількості символів, яке зможе поміститися в даному полі. Якщо Size не вказано, то ширина буде прийнята за замовчуванням дорівнює 24 символів

Maxlength — за замовчуванням кількість символів, яку можна буде ввести в Html форму, не обмежена, але з допомогою Maxlength можна задати це обмеження. Більше символів, ніж в ньому буде зазначено, вам ввести в поле не вдасться

Value — за допомогою нього можна вказати, що саме буде написано за замовчуванням в полі або ж на кнопку відправки даних

Checked — це атрибут-прапор, який можна вставити в Input для радіокнопок (radio) або ж для чекбоксов (checkbox). У цьому випадку дана радіокнопка або чекбокс будуть активними при завантаженні сторінки вебформой (у них вже буде стояти галочка)

Тепер давайте розглянемо всі приклади форми з Input. Зовнішній вид текстового поля схожий на вигляд поля для введення пароля, тому розглянемо лише варіант створення Text, наприклад, для введення адреси електронної пошти:

Введіть Вашу E-mail:

Тепер давайте розглянемо створення вебформы з радіокнопками (Radio):

Вам подобається ресурс KtoNanNovenkogo.ru?

Так?
Ні?

Зверніть увагу, що в цій формі два рази використовується тег Input – по разу для створення кожної з двох радіокнопок. Причому, у кожному з них прописаний атрибут Name з однаковим значенням (rezultat), а значення Value різне (YES і NO).

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

Розглянемо приклад створення вебформы з чекбоксами (Checkbox):

Який движок(и) сайту ви віддаєте перевагу?

WordPress
Joomla
SMF

Чекбокси відрізняються від радіокнопок можливістю вибрати відразу кілька варіантів. Name служить для визначення у файлі обробника, в якому саме чекбоксі проставлені прапорці,а Value — задає те значення, яке буде надіслано обробник (якщо Значення вказано не буде, то в обробник буде відправлений текст, розташований поруч з даними чекбоксів).

Select, Option, Textarea, Label, Fieldset, Legend — випадаючі списки, текстові поля та інші елементи вебформ

Для початку хочу нагадати, що таке, власне, вебформы і для чого вони потрібні на сторінках сайту. Вони в першу чергу покликані в зручному для користувача вигляді повторювати наявні в будь-якій операційній системі елементи: кнопки, поля для введення тексту, що випадають списки, прапорці, перемикачі і тому подібні речі.

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

Причому, всі складові її елементи (зразок Select, Option, Textarea, Label, Fieldset, Legend) являють собою вже закінчені заготовки (контейнери), для вставки яких достатньо буде лише використовувати потрібний тег з потрібними атрибутами і параметрами.

Браузери самі знають, як відображати той чи інший елемент вебформы. Правда, варіанти відображення одного і того ж елемента в різних браузерах можуть трохи відрізнятися один від одного, але, як правило, не суттєво.

Т. о. виходить, що вебформы в Html є спробою перенести ключові елементи, використовувані в будь-якій операційній системі, на сторінки вебсайту. Але для чого вони можуть знадобитися на сторінках сайту?

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

Хоча, дані можна відправити не тільки на сервер, але і, наприклад, електронною поштою на адресу, указану в атрибуті Action тега Form. При відправленні з Html даних на E-mail користувача, заповнює поля, після натискання на кнопку відправки даних, запуститься програма використовувана на його комп’ютері за замовчуванням.

Відкриваючий тег Form в такому випадку повинен виглядати приблизно так:

Select та Option — теги випадаючих списків

Всі елементи вебформы, які створюють поля з випадаючими списками, формуються однаковим чином. Спочатку задається контейнер поля зі списком з допомогою відкриває і закриває Html тега Select. А потім усередині цього контейнера створюються окремі контейнери з пунктами (елементами) цього списку. Це робиться з допомогою відкриваючих і закриваючих тегів Option.

Виходить приблизно так:

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

Name — ви повинні задати унікальне ім’я для даного елемента вебформы, створюваного за допомогою Select. Це ім’я буде передано на сервер в програму обробник даних в якості імені змінної. Значення цієї змінної буде передано значення атрибута Value (задається у Option для кожного пункту) пункту випадаючого списку, який вибере користувач.

Size — за допомогою нього можна задати кількість відображуваних пунктів. Інакше кажучи, з допомогу Size можна задати висоту списку, що вимірюється в кількості рядків. Якщо ви не вказуєте в явному вигляді значення Size в тезі Select, то буде використовуватися значення висоти випадаючого списку за замовчуванням, при цьому вона буде різною у разі відсутності або присутності в Select атрибут Multiple:

Якщо Multiple в Select присутній, то висота випадаючого списку в вебформе буде за замовчуванням дорівнює кількості його елементів. Тобто будуть показані всі елементи списку із множинним вибором. См. приклад множинного нижче. Якщо атрибут Size в Select задати менше кількості пунктів, то праворуч з’явиться смуга прокрутки.

Якщо Multiple в Select відсутня, то висота випадаючого списку в вебформе буде за замовчуванням дорівнює одному рядку. Тобто видно буде тільки один рядок, а інші пункти будуть доступні тільки при натисканні на кнопку ліфта (праворуч). См. приклад наведений нижче

Multiple — приписування даного атрибуту в тезі Select дозволить вам створити випадаючий список з можливість одночасного вибору декількох пунктів. Детальніше про це атрибуті читайте нижче.

Форми з випадаючими списками можна поділити на два варіанти. У першому варіанті ви зможете вибрати тільки один елемент (рядок) поля з випадаючим списком, у другому варіанті — утримуючи Ctrl або Shift зможете вибрати з наявних пунктів.

При цьому у другому варіанті будуть відправлені на сервер дані про всіх обраних пунктах. Який саме список, що буде створений, визначається наявністю або відсутністю в тезі Select атрибут Multiple.

Multiple вказується в Select без параметра, т. к. пишеться просто Multiple і все. Якщо він присутній, то буде створена вебформа випадаючого списку з можливістю множинного вибору (утримуючи Ctrl або Shift).

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

LabelSelectSelectEDLegend

Праворуч наведено приклад вебформы випадаючого списку із множинним вибором, який створений на основі коду, наведеного вище. Як ви бачите, утримуючи Ctrl або Shift можна виділити кілька пунктів одночасно.

Якщо в тегу Select атрибут Multiple не буде, то вибрати можна тільки один елемент цього списку (рядок).

Приклад, в якому можна вибрати тільки один пункт, ви можете бачити тут:

LabelSelectSelectEDLegend

Атрибути тега Option

SelectED — він визначає, який пункт випадаючого списку буде виділений. Тобто буде відображатися з одним видимим пунктом. У разі ж списку із множинним вибором (якщо Select присутній атрибут Multiple) можна буде за допомогою вказівки SelectED в Html тегу Option виділити відразу декілька пунктів.

Value — на сервер з вебформы поля випадаючого списку буде відправлена пара значень — ім’я змінної і значення цієї змінної. Так от, ім’я змінної береться з атрибута Name тега Select, а значення цієї змінної буде взято із Value тега Option, але тільки того пункту (або пунктів, у випадку множинного вибором), який вибрав користувач перед тим, як натиснути кнопку відправки даних.

SelectLabelSelectEDLegend

У створюваний випадаючий список (з допомогою Select та Option) можна додати щось на зразок роздільників з заголовком груп, які будуть відрізнятися від інших пунктів меню накреслення шрифту.

Для створення групи з пунктів списку потрібно укласти їх в відкриваючий і закриваючий теги форми Optgroup, а відкриваючого тегу Optgroup прописати атрибут Label, в якості параметра якого потрібно буде ввести бажану назву групи.

Наприклад так:

LabelSelect
SelectEDLegend

Textarea — створення текстового поля у формі

Залишився ще один елемент вебформ, який ми не розглянули — Textarea (поле з можливістю введення багаторядкового тексту). Складається воно з допомогою парного Html тегу Textarea. Причому, в ньому можна перенесення тексту на новий рядок і він буде передаватися на сервер з урахуванням зроблених переносів.

Отже, для створення багаторядкового текстового поля потрібно прописати відкриваючий і закриваючий Textarea, а між ними ви можете додати текст, який буде видно при завантаженні сторінки вебформой. Користувач потім зможе стерти цей текст і написати свій.

Що ви можете повідомити про себе?
Що ви можете повідомити про себе?

Разом з Textarea можна використовувати наступні атрибути:

Name — ви задаєте ім’я для цього елемента вебформы. Воно буде передано на сервер в програму обробника даних

Cols — ви можете задати за допомогою нього ширину створюваного багаторядкового поля в символах.

Rows — задаємо висоту створюваного багаторядкового поля (в рядках). Якщо рядків тексту, введеного користувачем, виявиться більше, ніж висота багаторядкового поля для тексту, то праворуч від поля у вебформе з’являється смуга прокрутки.

Readonly — заборона на зміну або додавання свого тексту в полі (тільки для читання).

Disabled — користувач, так само як у випадку з атрибутом Readonly, не зможе змінити вміст текстового поля в вебформе, але воно змінить свій колір на сірий, позначає його відсутність.

Неактивний поле (Disabled)

Багаторядкове поле тільки для читання (Readonly)

Label — для чого потрібен цей Html тег у формі

Html тег Label дозволяє реалізувати одну дуже цікаву можливість у формах, що є в операційних системах. Там, якщо ви пам’ятаєте, для того щоб активувати який-небудь елемент, не обов’язково клацати саме по ньому, можна клацнути і з назви цього елемента — все одно відбудеться його активація.

У веб-форми за замовчуванням цього не відбувається — треба клацати саме по самому елементу Html форми для його активації. Наприклад, потрібно клацати по прапорцю, для того щоб поставити в ньому галочку. Клацання ж за текстом поруч із прапорцем результату не принесе. Спробуйте самі:

Label
Select
SelectED

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

Але як зв’язати елемент Html форми і текст? Для цього потрібно дописати в атрибут ID з унікальним параметром, а текст потрібно оточити відкриваючим і закриваючим тегами Label. І це ще не все. В початковому тегу Label потрібно прописати атрибут For, параметр якого повинен бути точно таким же, як і у атрибута ID Html тегу елемента форми. Виходить приблизно так:

Label
Select
SelectED

Як ви можете бачити, тепер, завдяки використанню Label, елементи вебформы можна активувати не тільки клацанням по ньому самому, але і клацанням по тексту, розташованого поруч.

Fieldset і Legend — розбиваємо форму на частини

Ви, напевно, часто бачили, що великі форми в Html бувають розбиті на групи (Fieldset), які обведені в рамочку і у кожної групи є свій заголовок (Legend). Реалізується це за допомогою всього двох тегів: Fieldset і Legend. Вони парні, тобто у них повинні бути в обов’язковому порядку відкриває та закриває.

Так от, для створення групи з складових частин вам потрібно укласти всі ці частини в відкриваючий і закриваючий теги Fieldset. А для того, щоб задати для даної групи заголовок (Legend), вам потрібно відразу ж після відкриваючого Fieldset прописати конструкцію з відкриває і закриває Legend, між якими необхідно вставити текст заголовка групи.

Ось приклад створення груп з допомогою Fieldset і Legend:

Удачі вам! До зустрічей на сторінках блогу