День 17. Появилась идея.
Сегодня я продолжал работать с формами, а если точнее, то со списками. Такие, знаете списки, на которые кликаешь, они выпадают,
ты выбираешь. Благо, что ничего сложного в их создании не оказалось.
Итак.
Для создания списков используется элемент SELECT. Он имеет два атрибута : size и multiple. Первый отвечает за количество элементов, видимых на экране по умолчанию. Если size равен 1, а элементов больше, чем 1, то появится раскрывающийся список.
Если size больше 1, а количество элементов больше, чем size, то появится окно с полосой прокрутки, если меньше - то в окне будет пустое поле.
Атрибут же multiple позволяет выбрать в одном списке несколько элементов при нажатой клавише Ctrl.
Сами элементы списка указываются внутри элемента OPTION.
Вот пример:
Если size больше 1, а количество элементов больше, чем size, то появится окно с полосой прокрутки, если меньше - то в окне будет пустое поле.
Атрибут же multiple позволяет выбрать в одном списке несколько элементов при нажатой клавише Ctrl.
Сами элементы списка указываются внутри элемента OPTION.
Вот пример:
<html>
<head>
<title>Списки</title>
</head>
<body>
<form>
Место проживание:
<head>
<title>Списки</title>
</head>
<body>
<form>
Место проживание:
<select type="radio" name="Reg_place" size="1"><br/>
<option value="SPb">Санкт-Петербург</option>
<option value="Mos">Москва</option>
<option value="Ekb">Екатеринбург</option>
<option value="Nsk">Новосибирск</option>
</select></br>
Профессия:<br/>
<select name="Reg_job[]" size="4" multiple="multiple">
<option value="Journ">Журналистика</option>
<option value="Progr">Программирование</option>
<option value="Sport">Спорт</option>
<option value="Issk">Исскуство</option>
<option value="Med">Медицина</option>
</form>
</body>
</html>
<option value="SPb">Санкт-Петербург</option>
<option value="Mos">Москва</option>
<option value="Ekb">Екатеринбург</option>
<option value="Nsk">Новосибирск</option>
</select></br>
Профессия:<br/>
<select name="Reg_job[]" size="4" multiple="multiple">
<option value="Journ">Журналистика</option>
<option value="Progr">Программирование</option>
<option value="Sport">Спорт</option>
<option value="Issk">Исскуство</option>
<option value="Med">Медицина</option>
</form>
</body>
</html>
А еще можно систематизировать элементы в списке.
Для этого используется элемент OPTGROUP, у него всего один атрибут label, в нем собственно и указывается имя заголовка группы.
Пример позволит вам разобраться с этим подробнее:
Пример позволит вам разобраться с этим подробнее:
<html>
<head>
<title>Списки с заголовками</title>
</head>
<body>
<form>
Место проживания:
<select name="Reg_place" size="1">
<optgroup label="Россия">
<option value="SPb">Санкт-Петербург</option>
<option value="Mos">Москва</option>
<option value="Ekb">Екатеринбург</option>
<option value="Nsk">Новосибирск</option>
<optgroup label="Франция">
<option value="Par">Париж</option>
<option value="Lion">Лион</option>
<option value="Mars">Марсель</option>
<option value="Tul">Тулуза</option>
<optgroup label="США">
<option value="Wash">Вашингтон</option>
<option value="New">Нью-Йорк</option>
<option value="Orl">Орландо</option>
<option value="Det">Детройт</option>
</select><br/>
</form>
</body>
</html>
<head>
<title>Списки с заголовками</title>
</head>
<body>
<form>
Место проживания:
<select name="Reg_place" size="1">
<optgroup label="Россия">
<option value="SPb">Санкт-Петербург</option>
<option value="Mos">Москва</option>
<option value="Ekb">Екатеринбург</option>
<option value="Nsk">Новосибирск</option>
<optgroup label="Франция">
<option value="Par">Париж</option>
<option value="Lion">Лион</option>
<option value="Mars">Марсель</option>
<option value="Tul">Тулуза</option>
<optgroup label="США">
<option value="Wash">Вашингтон</option>
<option value="New">Нью-Йорк</option>
<option value="Orl">Орландо</option>
<option value="Det">Детройт</option>
</select><br/>
</form>
</body>
</html>
И, наконец, сегодня я изучил элемент LABEL, который позволил улучшить мне мои вчерашние флажки. Для того, чтобы им воспользоваться необходимо установить атрибут id элемента INPUT, в качестве значения которого может быть все, что угодно, но лучше какое нибудь кодовое сочетание букв, а затем установить это же самое значение для атрибута for элемента LABEL. Для тех, кто не понял - пример:
<html>
<head>
<title>Флажки</title>
</head>
<body>
<form>
Любимые фильмы:</br>
<input name="Films[]" type="checkbox" id="Mol"/><label for="Mol">Молчание ягнят</label><br/>
<input name="Films[]" type="checkbox" id="Bur"/><label for="Bur">Приключения Буратино</label><br/>
<input name="Films[]" type="checkbox" id="Vlast"/><label for="Vlast">Властелин колец</label><br/>
<input name="Films[]" type="checkbox" id="Gar"/><label for="Gar">Гарри Поттер</label><br/>
<input name="Films[]" type="checkbox" id="Vod"/><label for="Vod">Воды слонам</label><br/>
<input name="Films[]" type="checkbox" id="Opust"/><label for="Opust">Опустевший город</label><br/>
<input name="Films[]" type="checkbox" id="Avst"/><label for="Avst">Австралия</label><br/>
<input name="Films[]" type="checkbox" id="ohota"/><label for="ohota">Охота на уток</label><br/>
</form>
</body>
</html>
<head>
<title>Флажки</title>
</head>
<body>
<form>
Любимые фильмы:</br>
<input name="Films[]" type="checkbox" id="Mol"/><label for="Mol">Молчание ягнят</label><br/>
<input name="Films[]" type="checkbox" id="Bur"/><label for="Bur">Приключения Буратино</label><br/>
<input name="Films[]" type="checkbox" id="Vlast"/><label for="Vlast">Властелин колец</label><br/>
<input name="Films[]" type="checkbox" id="Gar"/><label for="Gar">Гарри Поттер</label><br/>
<input name="Films[]" type="checkbox" id="Vod"/><label for="Vod">Воды слонам</label><br/>
<input name="Films[]" type="checkbox" id="Opust"/><label for="Opust">Опустевший город</label><br/>
<input name="Films[]" type="checkbox" id="Avst"/><label for="Avst">Австралия</label><br/>
<input name="Films[]" type="checkbox" id="ohota"/><label for="ohota">Охота на уток</label><br/>
</form>
</body>
</html>
Я не скажу вам, что делает этот элемент. Попробуйте догадаться сами, друзья)))
Итог.
Развиваемся, однако.До завтра, друзья.
Комментариев нет:
Отправить комментарий