Урок 22. Create a Set of Radio Buttons връзка>>
Можете да използвате radio buttons бутоните за въпроси, кoгaто искате потребителят да ви даде само един отговор. radio buttons са вид input.
Всеки от вашите радио бутони трябва да бъде вложен в собствен label елемент.
Всички свързани радио бутони трябва да имат атрибут c еднo и също име:
name attribute (name = "indoor-outdoor").
Ето един пример за бутон за избор:
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>Счита се за добра практика да се зададе атрибут на label елемента със стойност, която съответства на стойността на атрибута id на input елемента. Това позволява на помощните технологии да създават добра връзка между label и свързания input елемент. Например:
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>Можем също да вмъкнем input елемент в label tag:
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
Задачата ви е: Добавете двойка радио бутони към формуляра си. 1 радио бутон трябва да има възможност да бъде indoor, а другият да има възможност за outdoor.
- Страницата ви трябва да има два елемента с радио бутони.
- Дайте на вашите радио бутони name атрибута
indoor-outdoor.
- Всеки от двата елемента на радио бутоните трябва да бъде вложен в собствен
label елемент.
- Уверете се, че всеки
label елемент има затварящ маркер/tag.
- Един от radio бутоните трябва да има етикет на indoor.
- другият от radio бутоните трябва да има етикет outdoor.
Урок 23. Create a Set of Checkboxes
Формите обикновено използват checkboxes /квадратчета за отметка/ за въпроси, които могат да имат повече от един отговор. checkboxes са oт тип input.
Всeки checkboxes трябва да бъде вложен в собствен label елемент.
Всички свързани входове c checkboxes трябва да имат атрибут c еднo и също име:
name attribute./name = "personality"/
Ето един пример за checkboxe :
<label>
<input type="checkbox" name="personality"> Loving</label>
Задачата ви е: Добавете към формуляра си набор от три отметки. Всeки checkboxes трябва да бъде поставен в негов собствен label елемент. И трите трябва да споделят атрибута c името personality.
- Страницата ви трябва да има три checkbox елемента /за отметка/.
- Всеки от трите checkbox елемента трябва да бъде вложен в собствения label елемент.
- Уверете се, че всеки label елемент има затварящ маркер.
- Поставете в checkboxes name-атрибут personality .
Урок 24. Use the value attribute with Radio Buttons and Checkboxes
Когато формулярът бъде изпратен, данните се изпращат на сървъра и включват записи за избраните опции. Входовете от тип радио и квадратче за отметка съобщават своите стойности от value атрибута.
Пример:
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
Тук имате два радио input. Когато потребителят изпрати формуляра с избрана опция за Indoor, данните от формуляра ще включват реда: indoor-outdoor=indoor. Това е от атрибутите на name и value на "indoor" indoor.
Ако пропуснете атрибута value, изпратените данни от формуляр използват стойността по подразбиране, която е включена. В този сценарий, ако потребителят щракне върху опцията "Indoor" и изпрати формуляра, получените данни от формуляра ще бъдат indoor-outdoor=on, което не е полезно. Така че атрибутът value трябва да бъде настроен на нещо, за да идентифицира опцията.
Задачата:
Дайте на всяко от съществуващите радио бутони и квадратчетата за отметка (checkboxes) value атрибут. Не създавайте нови елементи radio и checkboxes. Използвайте текста на етикета за въвеждане с малки букви като стойност за атрибута.
Урок 25. Check Radio Buttons and Checkboxes by Default
Можете да зададете radio buttons и checkboxes да бъдат с отметки по подразбиране, като използвате атрибута checked.
За да направите това, просто добавете checked думата във вътрешността на входния елемент.
Например:
<input type="radio" name="test-name" checked>Задачата: Задайте първия от вашите радио бутони и първото от вашите квадратчета за отметка да бъдат с отметки по подразбиране.
Продължете с:Nest Many Elements within a Single Div Element
Към съдържанието на Responsive Web Design>>