Створення та робота з формами в html. Вибір зі списку в HTML Випадаючий список html виводиться тільки один

У деяких прикладах ви можете побачити незвичайні атрибути типу data-classабо data-link. Тут нічого бояться, вони потрібні для правильного функціонування відповідного списку, бо може зберігатися додаткова інформація.

Пройдемося трохи за стилями.

Основні стилі знаходяться у файлі cs-select.css. Тут знаходяться стилі, які надають списку звичайний вигляд, який ми звикли бачити.

А для того, щоб зробити стиль незвичайним та оригінальним, потрібно використовувати додаткові властивості. Наприклад, для першого прикладу () використовуються такі стилі:

А знаходяться ці стилі в окремому файлі (для зручності) cs-skin-border.css.

Висновок

Що тільки не зробиш заради неповторного дизайну свого сайту! І головне – не бійтеся експериментувати з дизайном, постійно покращуйте його. Раптом ви створите (шляхом експериментів) саме той, який сподобається вашим користувачам і вони скажуть «Вау, мені подобається цей дизайн, що ще цікавого є на цьому сайті!» 😉 .

Найпростіший список, що випадає в HTML, легко створити, використовуючи тег select. Це тег-контейнер, у нього вкладаються теги option – саме вони задають елементи списку.

Є кілька варіантів списків, які можна зробити за допомогою тега select: список, що розкривається (варіанти випадають після кліка на основному полі або наведення на нього курсора) і список множинного вибору - в ньому користувач може вибрати кілька пунктів. Перші найпоширеніші, є значним елементом навігації сучасних сайтів. Список множинного вибору, що випадає, можна застосувати, наприклад, у каталогах, де потрібно вибрати кілька характеристик товару.

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

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

1. Multiple – задає множинний вибір.

2. Size – задає кількість видимих ​​рядків у списку, тобто висоту. І тут все залежить від того, є атрибут multiple чи ні. Якщо так, і ви не вказуєте size, то за наявності multiple користувач побачить усі можливі варіанти вибору, якщо ж multiple відсутня, то показаний буде лише один рядок, а решта відвідувач зможе прочитати, коли натисне на значок ліфта з правого боку. Якщо ж висота size задана і вона менша за кількість варіантів, то справа з'явиться смуга прокручування.

3. Name – ім'я. Список, що випадає, може обійтися і без нього, але воно може бути необхідним для взаємодії з програмою-обробником на сервері. Як правило, ім'я таки вказують.

Тег select не має обов'язкових атрибутів, на відміну від тега option.

Атрибути вкладеного тега option

1. Selected - призначений виділення пункту списку. Користувач зможе виділяти більше одного пункту, якщо задано атрибут multiple (див. вище).
2. Value – значення. Цей атрибут є обов'язковим. Веб-сервер повинен розуміти, які пункти списку вибрав користувач.
3. Label. За допомогою цього атрибута можна скорочувати надто довгі елементи списків. Наприклад, на екран виводитиметься «Мілан», замість вказаного в тезі option «Мілан – адміністративний центр Ломбардії. Північна Італія». Цей атрибут також використовується для групування пунктів у списку.

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

Список, що випадає, іншими способами

Його можна зробити за допомогою CSS, наприклад, список з'являтиметься при наведенні курсору на елемент сторінки. Відмінні можливості для створення списків надає JavaScript, роботу якого спрощує бібліотека Jquery. Список, підключений за допомогою цієї бібліотеки, може бути дуже складним, наприклад, каскадним. Тобто при виборі елемента в одному списку з'являється наступний список, наприклад, існує пункт меню «Жіночий одяг» (при наведенні випадають при виборі одного з видів, наприклад, «Верхній одяг», випадає список з елементами: куртки, парки, пальто, напівпальто, шуби тощо.

Ми поверхово перерахували основні способи, за допомогою яких можна створити список, що випадає. Зрозуміло, є маса нюансів в JavaScript, які дозволяють змінювати функціональність і зовнішній вигляд списків.

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

Сьогодні ми розберемо, як створювати списки, що випадають (розкриваються), у тому числі з множинним вибором, за допомогою select та option, яким чином сконструювати текстове полеза допомогою текстарея, а також поговоримо про можливість розширення функціональності форм шляхом застосування тегів fieldset, label і legend.

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

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

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

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

2. Multiple— цей атрибут, що не має параметрів, дає можливість множинного вибору на відміну від наведеного вище прикладу, де можна вибрати тільки один елемент (рядок). Спробуйте виділити в даному списку мишкою відразу кілька рядків (по одному в будь-яких місцях, утримуючи клавішу Ctrl, або за допомогою Shift наступних один за одним):

3. Size— встановлює висоту списку, що випадає, тобто кількість рядків, що відображаються. Якщо є атрибут multiple, а значення size не вказано (як у прикладі вище), то за промовчанням відображається чотири рядки, а, наприклад, при size="5" буде видно вже п'ять:

4. Required(Параметрів не має) - визначає, що обов'язково потрібно зробити вибір перед відправкою даних обробнику. Якщо елемент зі списку не вибраний, дані форми відправлені не будуть:

5. Autofocus(не має значення) — встановлює фокус на список відразу після завантаження сторінки. Крім того, якщо користувач звик основну частину дій робити клавішами, то саме таке попередньо налаштоване фокусування допоможе робити вибір зі списку за допомогою стрілок на клавіатурі без будь-якого використання мишки:

6. Disabled(Параметрів немає) — блокує доступ до списку (відключає його). На практиці зазвичай використовується разом зі скриптами в тих випадках, коли потрібно включати список, що розкривається, тільки при виконанні певних умов:

7. Formздійснює зв'язок списку з однією або декількома формами, до яких він належить, але знаходиться поза контейнером

Не плутайте атрибут тега select та основний тег для створення форми. У прикладі вище до тега form доданий атрибут id="data", а до select - form="data", що дозволило зв'язати список, що випадає, з конкретною формою.

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

1. Value— визначає те значення зі списку, яке буде відправлено на сервер (обробнику форми). Власне, обробнику відправляється ім'я, яке задається атрибутом name тега select, та значення value(для даного прикладу - 1, 2, 3, 4, 5), що відповідає обраному рядку випадаючого списку:

2. Disabled— блокує для вибору елемент списку, що випадає.

Як видно з прикладу, рядок «Option» неактивний і вибрати його неможливо.

3. Label— відображає текстовий зміст (що є його значенням) того чи іншого списку. Якщо label присутній, то виводиться рядок, тотожний значенню цього атрибуту і ігнорується текстове зміст, що знаходиться всередині тега option. Те саме відбувається, якщо вміст між ізовсім відсутня.

Дивіться. У наведеному вище прикладі перший рядок для option у коді порожній (у лівій частині таблиці), але прописаний параметр label="Тег Option", в результаті саме цей текст з'явився в списку (у правій частині). Другий рядок коду як вміст тега option містить текст «Тег Textarea», але в списку справа відображається слово «Textarea», що співпадає зі значенням label="Textarea".

4. Selected— виділяє поточний пункт списку:

Якщо є атрибут multiple, тобто можливість виділення більше одного елемента:

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

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

1. Label— встановлює назву кожної групи як параметр:

Те ж саме, але з multiple та size="7" тега select:

2. Disabled(немає значень) — блокує вибір елементів тієї групи, стосовно якої він встановлений, причому неактивні пункти зазвичай виділені сірим кольором:

Невеликий відеоролик буде тут дуже доречним:

Текстове поле у ​​формі за допомогою тексту

Ще один елемент форми для сайту, який ми розглянемо - поле з можливістю введення до нього багаторядкового тексту. Його можна створити за допомогою тегаtextrea. Без атрибутів за замовчуванням застосування цього тегу дасть такий результат:

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

Спробуємо тепер додати до початкового коду кілька атрибутів із параметрами:

1. Name— визначає ім'я текстової області як значення для її ідентифікації після надсилання даних форми під час їх обробки на сервері.

2. Cols— ширина поля, яка в ролі параметра задається числом однакових символів, що стоять поруч, розміщених по горизонталі. Значення за замовчуванням – 20.

3. Rows- Висота текстового поля, що визначається кількістю рядків. Якщо кількість рядків тексту, що вводиться користувачем, виявиться більшою за значення, задане цим атрибутом, то праворуч з'явиться вертикальна смуга прокручування.

4. Maxlength— Вказує максимальну кількість символів, які можна помістити у текстове поле. При перевищенні ліміту подальше введення буде неможливим.

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

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

7. Readonly(без параметрів) — якщо до textarea прикрутити цей атрибут, то текстове поле виявиться недоступним зміни користувачами і буде призначено лише читання. Але на нього можна навести фокус (підведіть курсор до поля і клацніть лівою кнопкою мишки), а також виділити та скопіювати (частково або повністю) текст:

Ще кілька атрибутів, що реалізують додатковий функціонал під час заповнення полів:

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

Має все два параметри: on(включено) та off(Вимкнено). Ось приклад коду:

Цей атрибут зі значенням «on» працює лише тоді, коли у веб-браузері конкретного користувача увімкнено автозаповнення полів форми.

9. Wrap- Встановлює для браузера правила перенесення рядків у текстовій області за допомогою трьох значень:

Soft— набір символів, який не міститься в полі за шириною, автоматично переноситься на новий рядок. При цьому обробнику текст буде передано у вигляді одного рядка. У тому випадку, якщо користувач здійснить перенесення тексту в будь-якому потрібному місці за допомогою клавіші «Enter», то таке перенесення зберігається під час надсилання вебформи.

Hard— переноси здійснюються автоматично, якщо текст не влазить у поле по ширині, причому, при надсиланні обробнику місця таких переносів буде збережено. Цей параметр використовується тільки в зв'язуванні з атрибутом cols:

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

10. Autofocus(не має параметрів) — ініціює фокусування на текстовому полі під час завантаження сторінки з формою.

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