Події в списку, що розкривається html php css. Створюємо стильні списки, що випадають. Звичайний HTML, CSS dropdown

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

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

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

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

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

Так, ще хочу нагадати, що ми вже встигли розглянути багато матеріалів на тему мови гіпертекстової розмітки, наприклад, трьох ) і .

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

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

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

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

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

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

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

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

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

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

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

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

  1. однорядкові текстові поля (Type="Text")
  2. поля для введення пароля (Type="Password")
  3. чекбокси (Type="Checkbox")
  4. радіокнопки (Type="Radio")
  5. приховані поля (Type="Hidden")
  6. звичайні кнопки (Type="Button")
  7. кнопки для надсилання даних до оброблювача (Type="Submit")
  8. кнопки для приведення веб-форми до початкового стану (Type="Reset")
  9. поля для завантаження файлів на сервер (Type="File")
  10. кнопки із зображенням (Type="Image")

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

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

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

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

  1. Name – у випадку, якщо дані мають бути надіслані в скрипт програми оброблювача, то ви повинні обов'язково вказати параметр атрибута Name. Під цим ім'ям дані, надіслані з форми, фігуруватимуть у програмі обробника інформації.
  2. Size - за допомогою нього задається розмір поля створюваної вебформи. Значення вказується в кількості символів, які можуть поміститися в даному полі. Якщо Size не вказано, то ширина буде прийнята за умовчанням, що дорівнює 24 символам.
  3. Maxlength — за промовчанням кількість символів, яку можна буде ввести в Html форму, не обмежена, але за допомогою Maxlength можна встановити це обмеження. Більше символів, ніж у ньому буде вказано, ввести в поле не вдасться
  4. Value — за допомогою нього можна задати, що саме буде написано за замовчуванням у полі або на кнопці відправки даних
  5. Checked - це атрибут-прапор, який можна вставити в Input для радіокнопок (radio) або для чекбоксів (checkbox). У цьому випадку ця радіокнопка або чекбокс будуть активними при завантаженні сторінки з вебформою (у них вже стоятиме галочка)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Select і Option — теги списків, що випадають

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

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

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

  1. Name — Ви повинні встановити унікальне ім'я для даного елемента вебформи, створюваного за допомогою Select. Це ім'я буде передано на сервер у програму обробник даних як ім'я для змінної. Як значення цієї змінної буде передано значення атрибута Value (задається в Option для кожного пункту) того пункту списку, який вибере користувач.
  2. Size — за допомогою нього можна задати кількість пунктів, що відображаються. Інакше кажучи, за допомогою Size можна задати висоту списку, що вимірюється в кількості рядків, що відображаються. Якщо ви не вказуєте в явному вигляді значення Size у тегу Select, то буде використовуватися значення висоти списку, що випадає за замовчуванням, при цьому вона буде різною у разі відсутності або присутності в Select атрибута Multiple:
    1. Якщо Multiple в Select присутній, то висота списку, що випадає, у вебформі буде за умовчанням дорівнює кількості його елементів. Тобто. будуть показані всі елементи списку з множинним вибором. Див. приклад множини нижче. Якщо атрибут Size в Select встановити менше кількості пунктів, то праворуч з'явиться смуга прокручування.
    2. Якщо Multiple в Select відсутня, то висота списку, що випадає, у вебформі буде за умовчанням дорівнює одному рядку. Тобто. буде видно лише один рядок, а інші пункти будуть доступні тільки при натисканні на кнопку ліфта (праворуч). Див. приклад наведений нижче
  3. Multiple - приписування даного атрибуту в тегу Select дозволить вам створити список, що випадає, з можливість одночасного вибору декількох пунктів. Докладніше про цей атрибут читайте нижче.

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

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

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

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

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

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

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

Label Select SelectED сайт Legend

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


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

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

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

Label Select
SelectED сайт Legend

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

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

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

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

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

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

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

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

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

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



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

Вам може бути цікаво

Select, Option, Textarea, Label, Fieldset, Legend - теги Html форми списків, що випадають, і текстового поля
Списки в Html коді - теги UL, OL, LI та DL
MailTo - що це і як у Html створити посилання для відправки Емейла
Як задаються кольори в Html та CSS коді, підбір RGB відтінків у таблицях, видачі Яндекса та інших програмах
Що таке мова гіпертекстової розмітки Html і як переглянути список усіх тегів у валідаторе W3C
Як вставити в HTML посилання та картинку (фото) - теги IMG та A
Таблиці в Html - теги Table, Tr і Td, а також Colspan, Cellpadding, Cellspacing і Rowspan для їх створення
Теги Font (Face, Size та Color), Blockquote та Pre - застаріле форматування тексту в чистому HTML (без використання CSS)
Як створити гіперпосилання (А, Href, Target blank), як відкривати її в новому вікні на сайті, а також зробити картинку посиланням у Html коді

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

Раніше, щоб створити список, що випадає в html ( на англ. - dropdown), ми просто використовували

У цьому прикладі ми тегом

У браузері це виглядає так:

Угруповання пунктів меню

Давайте розглянемо наступний тег , який використовується для групування пов'язаних даних у списку, що розкривається name = "black&white" > label = "Whitelist" >

У цьому прикладі ми виділили 2 групи тегом . Атрибут label елемента задає найменування виділеної групи, виконане напівжирним зображенням:

У наступному прикладі з використанням логічного атрибуту disabled ми відключимо одну групу (" Group B"):

</span>Приклад використання атрибуту disabled HTML тега <optgroup><span>

Результат нашого прикладу:

Вимкнення списку та мультивибір

</span>Атрибути disabled та multiple тега <select><span>

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

Для другого списку ми використовували атрибут multiple , який вказує, що дозволяється вибрати кілька варіантів у списку відразу (через Ctrlу Windows та через Commandв Mac).

У браузері це виглядає так:

Текстова область

Результат нашого прикладу:

Вимкнення текстової області

За аналогією з раніше розглянутими елементами тег



type = "submit" name = "submitInfo" value = "надіслати" > !}

У цьому прикладі ми створили дві текстові області (елемент