Преглед на урок

Създаване на менюта

Създаване на менюта




Създаване на менюта, време e да ви науча как да си правите лесни менюта. :) Това става с елемента <select> , който може да бъде използван за създаване на различни видове менюта. Той е направен за хора, които ще трябва само да избира от менюто, без да въвежда никъде текст. Елементът <select> изисква атрибут name и size ако искате да покажете менютата. Този елемент е контейнер( <select></select> ). Опциите(използвайки елемента <option> ) се поставят между отварящия и затварящия таг, всяка с определена стойност. Когато една от тези опции бъде избрана, нейната стойност се присвоява на името, указано в отварящия таг <select>. Атрибутът selected="selected" задава подразбиращата се стойност в даден списък.Ето пример за всичко това:

Колко често посещавате този сайт:
<select name="анкета">
<option selected="selected" value="първи">За първи път</option>
<option value="месец">Всеки месец </option>
<option value="седмица">Всяка седмица </option>
<option value="ден">Всеки ден </option>
</select>


Можете също така да използвате атрибута size, за да покажете цялото мяню.Просто променете първия ред отпримера със следното:

<select name="анкета" size="4">

При първия пример избирането с мишката на опция от менютоводидо изкачане на менюто от страницата, а при втория пример само трябва да маркирате. :) Има и вариант потребителят да може да избира повече от една опция. Това става с атрибута multiple="multiple", който ще показва опциитес превъртащо се мяню, дори и да има атрибут size! Ето един пример:

За какви теми ви е приятно да четете онлайн(изберете колкото искате) :
<select name="topics" multiple="multiple">
<option value="upgrade">Ъпгрейд на компютри</option>
<option value="repair">Ремонт на компютри </option>
<option value="apps">Приложение от типа Как-Да </option>
<option value="tricks">Съвети и трикове </option>
<option value="news">Индустриални новини </option>
<option value="rumor">Нови продукти </option>
<option value="none">Нищо от изброените </option>
</select>

Тук потребителят ще може да избере няколко варианта или нито един. Последното нещо което ще ви покажа е как да групирате опциите. Това става с еламента <optgroup> , който приема атрибута label="ИМЕ", където ИМЕ е името на основния раздел. Ето един пример какво представлява този елемент:

Коя марка и вид превозно средство предпоитате:
<select name="drive" size="10" multiple="multiple">
<option selected="selected" value="none">Нищо от изброените </option>
<optgroup label="Коли">
<option value="audi">Ауди</option>
<option value="mercedes">Мерцедес</option>
<option value="BMW">БМВ</option>
</optgroup>
<optgroup label="Мотори">
<option value="Kawazaki">Кавазаки</option>
<option value="Honda">Хонда</option>
<option value="Aprilia">Априлия</option>
</optgroup>
</select>


Така ще имате подреден списък, без да се чувства разбъркване. :)

Ето ви и кода за една готова страница с трите примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Studia-bg.com - Уроци на български език</title>
</head>

<body>
Колко есто посещавате този сайт:
<select name="анкета">
<option selected="selected" value="първи">За първи път</option>
<option value="месец">Всеки месец </option>
<option value="седмица">Всяка седмица </option>
<option value="ден">Всеки ден </option>
</select>
<br />
За какви теми ви е приятно да четете онлайн(изберете колкото искате) :<br />
<select name="topics" multiple="multiple">
<option value="upgrade">Ъпгрейд на компютри</option>
<option value="repair">Ремонт на компютри </option>
<option value="apps">Приложение от типа Как-Да </option>
<option value="tricks">Съвети и трикове </option>
<option value="news">Индустриални новини </option>
<option value="rumor">Нови продукти </option>
<option value="none">Нищо от изброените </option>
</select>
<br />
Коя марка и вид превозно средство предпоитате:<br />
<select name="drive" size="10" multiple="multiple">
<option selected="selected" value="none">Нищо от изброените </option>
<optgroup label="Коли">
<option value="audi">Ауди</option>
<option value="mercedes">Мерцедес</option>
<option value="BMW">БМВ</option>
</optgroup>
<optgroup label="Мотори">
<option value="Kawazaki">Кавазаки</option>
<option value="Honda">Хонда</option>
<option value="Aprilia">Априлия</option>
</optgroup>
</select>

</body>
</html>


Надявам се съм бил полезен!

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: CPU

Коментари

megatronm

За начинаещи в html това е полезен урок, само една грешка имаш в кода на страницата който си дал: charset=utf-8. Т.к съдържанието на станицата е на кирилица трябва да се използва charset=windows-1251 иначе текстовете няма да се четат..

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.