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

Найпростіший випадає в 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, які дозволяють змінювати функціональність і зовнішній вигляд списків.

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

Тег select і створення списку

Отже, що випадає список в html створюється за допомогою парного тега select, в який поміщаються парні теги option. Саме в них записуються всі варіанти, які будуть запропоновані при кліці на список. приклад:

Виберіть тварину Бик корова вівця кінь

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

Список в html може бути звичайним, і з множинним вибором. Щоб зробити можливість вибирати кілька пунктів, потрібно додати в select порожній атрибут multiple. Щоб вибрати кілька значень, утримуйте ctrlі тисніть ліву кнопку миші.

Інший корисний атрибут - size. Він дозволяє вибирати, скільки рядків буде показувати в списку.

Ще один атрибут - disabled. Він робить список недоступним для натискання і перегляду пунктів, але при цьому його видно на сторінці.

Required - html5-атрибут. Якщо він заданий, форма не буде відправлена ​​без вибору значення із списку. Загалом, він стає обов'язковим для вибору. Поки атрибут працює далеко не у всіх браузерах.

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

Власне, select служить лише контейнером для пунктів списку, самі вони задаються за допомогою тега option. У нього є параметр value, як ми вже з'ясували, але крім цього ще є й інші. наприклад:
Disabled - робить пункт списку недоступним для вибору. Відображається він буде, але клікнути на нього не можна.

Selected - елемент буде обраним за замовчуванням. У звичайному списку цей атрибут без значення можна задати тільки одним пунктом, у множині - кільком.

Важливе уточнення для правильної роботи

Якщо результат вибору потрібно буде відправити на сервер або обробити через скрипти, то пишіть select в форму, щоб не виникало ніяких помилок. Справа в тому, що список, що розкривається спочатку створювався саме як один з елементів форми.

Для чого потрібен select

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

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

Select: focus (
outline: 1px solid orange;
}

Тепер рамка буде помаранчевою.

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

Option (
color: brown;
background: aqua;
}

До речі, може хтось із вас знає, як змінити фоновий колір при наведенні на пункт через css?

Ось, власне, поки і все по тегу select і його застосування. Ніяких додаткових можливостей в html для нього не передбачено. Всі інші операції з ним можна робити за допомогою javascript і php. Наприклад, якщо вам потрібно створити список для вибору року народження і там може бути 80-100 різних варіантів, не будете ж ви вручну їх писати?

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

Як ви думаєте, сучасний чи у вас дизайн сайту? Чи використовуєте ви найостанніші технології або боїтеся їх? Можливо, ви думаєте що це занадто складно і навіть лізти не хочете в ці нетрі. Але насправді все йде куди інакше. Адже нові технології (я маю на увазі зараз CSS3) прийшли для того, щоб зробити життя веб-дизайнера легше і привнести свої додаткові можливостіпри створенні зовнішнього виглядусайту. Сьогодні поговоримо про те кілька видів дизайну для списку.

Список, що випадає для сайту

Чи не найпростіше рішення я розглядав в січні цього року 🙂:

завантажити

Що хочу сказати відразу з приводу демо: кожен окремий вид списку знаходиться в окремому файлі HTML, що дозволяє без праці взяти код, який вам потрібен. Також в окремих файлах розташовані стилі для кожного дизайну списку. Вам лише залишилося вибрати той, який вам найбільше подобається і знайти його файл стилів 🙂.

У розмітці списку нічого незвичайного:

Як то кажуть: він і в Африці . Усередині нього є теги , В яких знаходяться елементи списку.

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

@ Font-face (font-family: "icomoon"; src: url ( "../Fonts/icomoon/icomoon.eot?-rdnm34"); src: url ( "../Fonts/icomoon/icomoon.eot?#iefix-rdnm34") Format ( "embedded-opentype"), url ( "../Fonts/icomoon/icomoon.woff?-rdnm34") Format ( "woff"), url ( "../Fonts/icomoon/icomoon.ttf?-rdnm34") Format ( "truetype"), url ( "../Fonts/icomoon/icomoon.svg?-rdnm34#icomoon") Format ( "svg"); font-weight: normal; font-style: normal; ) Div.cs-skin-border (background: transparent; font-size: 2em; font-weight: 700; max-width: 600px;) @media screen and (max-width: 30em) (.cs-skin-border (font-size: 1em;)) .cs-skin-border> span (border: 5px solid # 000; border-color: inherit; transition: background 0.2s, border-color 0.2s;) .cs-skin-border> span:: after, .cs-skin-border .cs-selected span:: after (font-family: "icomoon"; content: " \ E000 "; ) .Cs-skin-border ul span:: after (content: ""; opacity: 0;) .cs-skin-border .cs-selected span:: after (content: " \ E00e "; color: # ddd9c9; font-size: 1.5em; opacity: 1; transition: opacity 0.2s; ) .Cs-skin-border .cs-active> span (background: #fff; border-color: #fff; color: # 2980b9;) .cs-skin-border .cs-options (color: # 2980b9; font- size: 0.75em; opacity: 0; transition: opacity 0.2s, visibility 0s 0.2s;) .cs-skin-border .cs-active .cs-options (opacity: 1; transition: opacity 0.2s;) .cs- skin-border ul span (padding: 1em 2em; backface-visibility: hidden;) .cs-skin-border .cs-options li span: hover, .cs-skin-border li.cs-focus span (background: # f5f3ec ;)

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

висновок

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

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

атрибути тега autofocus автоматичне отриманняфокуса при завантаженні сторінки. Значення можна задати трьома способами: ... ... ... disabled Блокує вибір зі списку. Значення можна задати трьома способами: ... ... ... multiple Дозволяє вибрати кілька пунктів списку одночасно. Слід звернути увагу, що при множині виборі в потоці даних від однієї форми може бути присутнім кілька змінних з одним і тим же ім'ям. Ваша програма обробки повинна передбачати подібні ситуації і коректно їх обробляти. name Ім'я списку. Обов'язковий атрибут. required Обов'язково повинен бути обраний пункт на непустому значенням. Якщо це не виконано, то браузер виведе повідомлення, а форма на сервер відправлена ​​не буде. Вид і зміст повідомлення залежить від браузера і змінюватися користувачем не може (не працює в IE і Safari). size Вертикальний розмір вікна списку. Якщо атрибут опущений або має значення 1, виводиться спливає список пунктів. Якщо вказано число більше 1, то пункти списку виводяться у вікні зі смугою прокрутки. Якщо значення атрибута більше, ніж фактична кількість пунктів списку, то додаються порожні пункти. При їх виборі користувачем повертаються порожні поля.

пункт списку

Кожен пункт списку обмежується тегами .... Закриває тег необов'язковий.

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

disabled Блокує вибір пункту списку. label Мітка пункту списку. Якщо зазначений атрибут label, то в списку виводиться його значення замість тексту всередині тега (В Firefox не працює). selected Пункт списку, обраний за замовчуванням. value Значення, передане сценарієм в разі вибору користувачем певного пункту. Якщо цей атрибут відсутній, то в сценарій буде відісланий текст, розташований відразу після тега .

Будь-які теги, поміщені усередині тега option, будуть проігноровані.

Приклад списку

чай Кава молоко шинка сир

РЕЗУЛЬТАТ:

Приклад списку з множинним вибором

чай Кава молоко шинка сир

РЕЗУЛЬТАТ:

Чай Кава Молоко Шинка Сир

Група пунктів списку

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

для тега доступні загальні атрибути та атрибути обробки подій.

Приклад угруповання пунктів списку

HTML3.2 HTML4.0 HTML5 CSS1 CSS2 CSS3 JavaScript DHTML

РЕЗУЛЬТАТ:

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

Приклад виділення кольором груп пунктів списку

HTML3.2 HTML4.0 HTML5 CSS1 CSS2 CSS3 JavaScript DHTML

РЕЗУЛЬТАТ:

HTML3.2 HTML4.0 HTML5 CSS1 CSS2 CSS3 JavaScript DHTML

... вміст форми ...

Якраз всередині елемента form повинні розташовуватися елементи управління, яких може бути як завгодно багато.

Атрибути форми:

• В атрибуті action вказується серверний файл зі скриптом, відповідальним за основний обробіток даних, що пересилаються з форми. Зазвичай код цього файлу пишеться на серверній мові програмування, наприклад, на мові phpабо perl.
• Атрибут enctype вказує на тип переданої на сервер інформації, якщо це просто текстові дані - text / plain, якщо з формою відсилаються файли, то слід вказати multipart / form-data.
• Атрибут method вказує і визначає форму передачі даних. Детально ми на цьому зупинятися не будемо, однак слід сказати, що для більш надійної передачі слід вказати метод post.

Елементи форми html

<input type = "text" name = "login" size = "20" value = "(! LANG: Логін" maxlength = "25" > !}

результат:

• Значення атрибута type - text - вказує на те, що це саме текстове поле
• size - розмір текстового поля в символах
• maxlength - максимальна к-ть вміщаються в поле символів
• value - початковий текст в текстовому полі
• name - ім'я елемента, необхідно для обробки даних в файлі-обробнику

результат:


Замість тексту в поле відображається маска - зірочки або кружечки

<input type = "submit" value = "Відправити дані">

результат:

Кнопка submit збирає всі дані з форми, введені користувачем і відправляє їх за адресою, вказаною в атрибуті action форми.

<input type = "reset" value = "(! LANG: Очистити форму" > !}

результат:

Кнопка повертає стан всіх елементів управління до первісного (очищає форму)

<input type = "checkbox" name = "asp" value = "(! LANG: yes" > !} ASP<br> <input type = "checkbox" name = "js" value = "(! LANG: yes" checked = "checked" > !} javascript<br> <input type = "checkbox" name = "php" value = "(! LANG: yes" > !} PHP<br> <input type = "checkbox" name = "html" value = "(! LANG: yes" checked = "checked" > !} HTML<br>

ASP
javascript
PHP
HTML



результат:

ASP
javascript
PHP
HTML

В html прапорець служить для організації множинного вибору, тобто коли необхідно і можливо вибрати кілька варіантів відповіді

<input type = "radio" name = "book" value = "(! LANG: asp" > !} ASP<br> <input type = "radio" name = "book" value = "(! LANG: js" > !} Javascript<br> <input type = "radio" name = "book" value = "(! LANG: php" > !} PHP<br> <input type = "radio" name = "book" value = "(! LANG: html" checked = "checked" > !} HTML<br>

ASP
Javascript
PHP
HTML




результат:

ASP
Javascript
PHP
HTML

radio кнопка html служить для єдиного вибору з декількох варіантів

Атрибут checked встановлює відразу елемент зазначеним

важливо:для елементів radioнеобхідно, щоб значення атрибуту nameу всіх елементів в групі було однаковим: в такому випадку елементи будуть працювати взаємопов'язане, при включенні одного елемента, інші буду відключатися

Список, що випадає HTML

Розглянемо приклад додавання списку:

1 2 3 4 5 6

<select name = "book" size = "1"> <option value = "(! LANG: asp" > !} ASP</ Option> <option value = "(! LANG: js" > !} JavaScript</ Option> <option value = "(! LANG: php" > !} PHP</ Option> <option value = "(! LANG: html" selected = "selected" > !} HTML</ Option> </ Select>

ASP JavaScript PHP HTML

результат:

• Список, що випадає складається з головного тега - select - який має закриває пару, а кожен пункт списку - це тег option, всередині якого відображається текст пункту
• Атрибут size зі значенням «1»вказує на те, що список в згорнутому вигляді відображає один пункт, інші відкриваються при натисканні на стрілочки меню
• Атрибут selected у пункту (option) вказує на те, що саме цей пункт буде спочатку видно, а інші пункти «згорнуті»

Для великих і складних списків є можливість додати підзаголовки- тег optgroup з атрибутом label (напис):

1 2 3 4 5 6 7 8 9 10 11 12

<select name = "book" size = "1"> <optgroup label = "Англійські"> <option value = "(! LANG: asp" > !} ASP</ Option> <option value = "(! LANG: js" > !} JavaScript</ Option> <option value = "(! LANG: php" > !} PHP</ Option> <option value = "(! LANG: html" selected = "selected" > !} HTML</ Option> </ Optgroup> <optgroup label = "Російські"> <option value = "(! LANG: asp_rus" > !} ASP по-російськи</ Option> <option value = "(! LANG: js_rus" > !} JavaScript по-російськи</ Option> </ Optgroup> </ Select>

ASP JavaScript PHP HTML ASP по-російськи JavaScript по-російськи

Для надання можливості вибору кількох пунктів одночаснонеобхідно додати атрибут multiple. Але в такому випадку і атрибут size слід встановити в значення, більше, ніж 1:

текст

результат:

• Ширина елемента залежить від атрибута cols, який вказує скільки символів міститься по горизонталі
• Атрибут rows визначає кількість рядків в елементі

інші елементи

Додаткові елементи і атрибути

• Для елементів управління radioі checkboxзручно використовувати додаткові елементи, Які, по-перше, роблять прив'язку тексту до самого елементу radio або checkbox, по-друге, додають обведення при кліці:

<input type = "checkbox" id = "book1"> <label for = "book1"> ASP</ Label>

ASP

У прикладі створена напис (тег label) для елемента checkbox. Прив'язка здійснюється через атрибут id, значення якого вказано в атрибуті for написи.

результат:



• Атрибут disabled дозволяє блокувати елемент, роблячи його недоступним для зміни користувачем:

<input type = "text" name = "login" size = "20" value = "(! LANG: Логін" maxlength = "25" disabled = "disabled" >!} <input type = "checkbox" name = "asp" value = "(! LANG: yes" > !} ASP<br> <input type = "checkbox" name = "js" value = "(! LANG: yes" checked = "checked" disabled = "disabled" > !} javascript<br>


ASP
javascript