Спадний список - один з найбільш використовуваних елементів html-форм. Його застосовують при розмітці сторінок інтернет-сайтів для того, щоб більш зрозуміло для відвідувача згрупувати можливості вибору однотипних значень і при цьому ще й заощадити простір сторінки. Нижче описані основні властивості цього елемента і дані варіанти коду для вставки у вихідники сторінок.
Вам знадобиться
- Базові знання мови HTML
Інструкція
1. Спадний список, як і всі інші елементи, відтворюються браузером з інформації про сторінку, надіслану йому сервером за запитом. Ця інформація - інструкції мовою HTML (HyperText Markup Language - "мова розмітки гіпертексту"), що містять інформацію про те, що і де саме на цій сторінці браузер повинен розмістити. Інструкції називають "тегами", а тег, що створює стандартний спадний список, складається з двох частин - відкриває і закриває і виглядає так:< select name = "ListOne" > </select > B тег, що відкриває, розміщено інформацію про назву цього спадного списку. Така інформація називається "атрибутом" теґу. Тут атрибут "" name "" містить значення "ListOne" ". Кожен з спадних списків на сторінці повинен мати власне ім 'я. Окрім імен у відкритому тегу, можна вказувати інші атрибути - наприклад, інформацію про колір тла та тексту розміщено в атрибуті style:<select name=""ListOne"" style=""background-color: Navy; color: "> Вміст кожного списку (його рядки) перераховуються в окремих тегах - option:< option value = "" 1 "" > перший рядок </option > Цей теґ має бути атрибутом value - саме його значення буде передано на сервер, коли відвідувач зробить вибір і відправить заповнену форму на сервер. Зверніть увагу - те, що бачить відвідувач у рядку ("перший рядок") нікуди не буде надіслано, а отримає сервер саме значення, яке ви вкажете в атрибуті value. І теґу option модно вказувати додаткові атрибути. Наприклад, атрибут selected вказує переглядачу, що саме цей рядок спадного списку потрібно вибрати за замовчуванням - саме його буде видно при закритому списку:< option selected = "" selected "" value = "" 2 "" > рядок другий </option > Кожен рядок цього списку розміщується в окремому тегу option всередині контейнера, обмеженого відкриваючим і закриваючим тегами select:< select name = "ListOne" > < option value = "" 1 "" > перший рядок </option > < option value = "" 2 "" selected = "" selected "" > рядок другий </option &< form name = "" FormOne "" < select name = "" ListOne "" > < option value = "" 1 "" > перший рядок </option > < option value = "" 2 "" selected = "" sel
2. У спадному списку і в згорнутому стані не обов 'язково повинен бути видимий тільки один елемент - можна додати атрибут size з зазначенням необхідної кількості видимих рядків:< select name = "ListOne" "size =" "2" "> < option value =" "1" "> перший рядок </option > < option value =" "2" "selected =" "selected" ">
3. Найдовший рядок спадного списку визначає його ширину, але цю обставину можна змінювати, задаючи стиль відображення елемента:<select name=""ListOne"" size=""2"" style=""width: 500px;""> < option value = "" 1 "" > перший рядок </option > < option value = "" 2 "" selected = "" selected "" > рядок другий </option > < option value = "" 3 "" > це третій рядок
4. Існує і атрибут, який робить можливим множинний вибір рядків у списку - multiple:< select name = "" ListOne "" multiple = "" multiple "" > < option value = "" 1 "" > перший рядок </option > < option value = "" 2 "" selected = "" selected