Контакти
Головна › ›

Елементи HTML форм - список, що випадає (теги select, option, optgroup), текстове поле (textarea), а також застосування label, fieldset і legend. Вибір зі списку, що випадає в HTML Як зробити вибір сторінки в html

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

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

Атрибути тега , за допомогою яких можна змінювати подання списку.

multiple

Наявність multiple повідомляє браузеру відображати вміст елемента



name

Визначає унікальне ім'я елемента доданий атрибут multiple , можна виділяти більше одного пункту.

value

Визначає значення списку, який буде надіслано на сервер. На сервер відправляється пара «ім'я/значення», де ім'я задається атрибутом name тега



Групування елементів списку

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

Приклад 3. Групування елементів списку

HTML5 IE Cr Op Sa Fx

перелік



Результат прикладу показано на рис. 1.

Мал. 1. Групований список

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

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

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

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

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

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

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

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

Option Textarea Label Fieldset Legend

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

Option Textarea Label Fieldset Legend

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

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

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

. При цьому в ролі значення атрибута form прописується параметр глобального атрибуту id, який додано до тега form:

Виберіть із списку Option Textarea Label Fieldset Legend

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

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

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

Option Textarea Label Fieldset Legend

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

Option Textarea Label Fieldset Legend

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

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

Тег Textarea Тег Label Тег Fieldset Тег Legend

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

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

Option Textarea Label Fieldset Legend

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

Option Textarea Label Fieldset Legend

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

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

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

Option Textarea Label Fieldset Legend

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

Option Textarea Label Fieldset Legend

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

Option Textarea Label Fieldset Legend

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

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

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

Введіть текст:

Введіть текст:

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

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

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 (який також забороняє редагувати вміст поля, але дає можливість навести на нього фокус), повністю блокує доступ до текстової області, яка фарбується зазвичай у сірий колір:

Опис

Тег , що встановлює висоту списку.

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

Синтаксис

Дозволяє перейти до списку за допомогою певних клавіш.

Встановлює, що список отримує фокус після завантаження сторінки.

Блокує доступ та зміну елемента.

HTML5 IE Cr Op Sa Fx

Пов'язує список із формою.



Ім'я елемента для надсилання на сервер або звернення через скрипти.

).

Список обов'язковий для вибору перед надсиланням форми.

Кількість рядків списку, що відображаються.

Визначає послідовність переходу між елементами при натисканні клавіші Tab

</span>Закриваючий тег <select><span>

Приклад використання елемента

) допускається вимикати певний пункт меню (параметр). Атрибут може використовуватися спільно зі скриптами, наприклад, поки яка умова не виконано параметр неактивний.

у списку, що розкривається

A Option A Option C , який використовується для групування пов'язаних даних у списку, що розкривається

Приклад використання HTML тегу . Атрибут 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 = "надіслати" > !}

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