belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

6.6. Создание раскрывающихся списков внутри форм.
Теги <select>, <option>, <optgroup>. Элемент 'datalist'.

Для создания раскрывающихся списков с выбором предопределенных варинтов в HTML используется элемент 'select', который формируется парным тегом <select> и является контейнером для пунктов списка. В свою очередь, пункты раскрывающегося списка представлены элементами 'option', которые формируются парным тегом <option>.

Элемент 'select' также, как и элемент 'input', обладает атрибутами: autofocus, disabled, form, required, name, имеющими аналогичное назначение. Их можно посмотреть здесь. Кроме того, для указания изначально видимого количества вариантов списка используется атрибут size, который в качестве значения принимает натуральные числа, и логический атрибут multiple, позволяющий выбирать сразу несколько вариантов. Если значение атрибута size больше единицы, но меньше общего количества имеющихся вариантов в списке, то браузер автоматически добавит полосу прокрутки, чтобы было ясно, что имеются еще варианты для выбора.

Использование элемента 'select' показано в примере 6.7.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Раскрывающиеся списки</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		Укажите спортивный разряд: &nbsp; 		
		<!-- Создаем раскрывающийся список -->
		<select name="category">
			<option value="0">отсутствует</option>
			<option value="3" label="3-й">3-й взрослый</option>
			<option value="2" label="2-й">2-й взрослый</option>
			<option value="1" label="1-й">1-й взрослый</option>
			<option value="kms">КМС</option>
			<option value="ms">МС</option>
			<option value="msmk">МСМК</option>
		</select> <br><br> 
		
		Выберите виды спорта: <br><br>
		<!-- Изначально будет видно три пункта, но выбирать можно -->
		<!-- сразу несколько пунктов при нажатой клавише 'ctrl' -->
		<select name="sport[]" size="3" multiple>
			<option value="0" selected>Бокс</option>
			<option value="1">Вольная борьба</option>
			<option value="2">Дзюдо</option>
			<option value="3">Каратэ</option>
			<option value="4">Таэквондо</option>
		</select> <br><br> 
		
		<button type="submit" name="s_b" disabled>Отправить</button>
	</form>
</body>
</html>

Пример 6.7. Использование элемента 'select'

Элемент 'option' также имеет несколько своих атрибутов:

В случае необходимости группировки некоторых пунктов раскрывающегося списка применяется элемент 'optgroup', который формируется парным тегом <optgroup> и является контейнером для элементов 'option', объединяемых в группу. Элемент имеет два собственных атрибута: disable и label. Первый атрибут является логическим и блокирует доступ к своей группе пунктов списка, а второй – принимает в качестве значения текст, который будет выводиться, как заголовок группы.

Использование элемента 'optgroup' показано в примере 6.8.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Элемент 'optgroup'</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		Укажите любимые фрукты и овощи: &nbsp; 		
		
		<select name="fruits_vegetables" multiple size="3">
			
			<optgroup label="Фрукты">	
				<option value="apple">Яблоки</option>
				<option value="pear">Груши</option>
				<option value="orange">Апельсины</option>
			</optgroup>	
			
			<optgroup label="Овощи">
				<option value="carrot">Морковь</option>
				<option value="beet">Свекла</option>
				<option value="potato">Картофель</option>
			</optgroup>	
			
		</select>     <br><br> 
		
		<button type="submit" name="s_b" disabled>Отправить</button>
	</form>
</body>
</html>

Пример 6.8. Использование элемента 'optgroup'

Отметим, что элемент 'optgroup' не может быть выделен пользователем, по умолчанию отображается полужирным шрифтом, а все пункты списка, расположенные внутри, смещаются вправо относительно своего исходного положения.

Еще одним дополнительным элементом, напоминающим раскрывающийся список и введенным в пятой версии HTML, является элемент 'datalist', формирующийся парным тегом <datalist> и представляющий собой контейнер для хранения элементов 'option'. Данный элемент создает список вариантов, которые можно выбирать при вводе текста, т.е. используется для автозаполнения. Изначально список скрыт, но после получения текстовым полем фокуса и наборе текста, становится доступным для использования. Элемент имеет только глобальные атрибуты, а используется совместно с элементом 'input', у которого имеется для этого атрибут list, принимающий в качестве значения 'id' элемента 'datalist'.

Использование элемента 'datalist' показано в примере 6.9.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Элемент 'datalist'</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		<label> Вид единоборства: &nbsp; 
			<!-- Связываем данное поле с элементом 'datalist' -->
			<!-- при помощи атрибута 'list' -->
			<input type="text" name="box" list="sport"> 
		</label>
		
		<!-- Обязательно задаем атрибут 'id' -->
		<datalist id="sport">
			<option value="box">
			<option value="karate">
			<option value="judo">
		</datalist>
				
	</form>
</body>
</html>

Пример 6.9. Использование элемента 'datalist'

Как видно из примера, как только была введена буква 'b', сразу же появилась подсказка. Если бы слов, начинающихся на букву 'b' было больше, то все они появились бы в качестве вариантов автозаполнения. При вводе второго и последующих символов, в списке останутся только те варианты, которые начинаются на введенную последовательность символов.

Контрольные вопросы и задания

  1. Опишите конструкцию раскрывающегося списка, включая его пункты.
  2. Для чего используется элемент 'datalist'? Как он привязывается к элементу 'input'?

Словарь новых английских слов

form [ˈfɔːm] – форма, фигура.
action [ˈakʃ(ə)n] – действие, акция.
validate [ˈvalɪdeɪt] – подтверждать, проверять.
accept [əkˈsɛpt] – принимать.
input [ˈɪnpʊt] – вводить данные, ввод.
value [ˈvaljuː] – значение, ценность.
hidden [ˈhɪdn] – скрытый, спрятанный.
password [ˈpɑːswəːd] – пароль.
reset [riːˈsɛt] – возврат в начальное положение.
submit [səbˈmɪt] – представить на рассмотрение .
multiple [ˈmʌltɪp(ə)l] – множественный.
required [rɪˈkwʌɪəd] – обязательный.
read [riːd] – читать.
only [ˈəʊnli] – только.
length [leŋθ] – длина.
list [lɪst] – список, каталог.
check [tʃɛk] – проверять, проверка, птичка.
label [ˈleɪb(ə)l] – ярлык, бирка.
area [ˈeəriə] – район, область, зона.
row [raʊ] – ряд, последовательность.
hard [hɑːd] – твердо, крепко.
soft [sɔːft] – мягко, нежно.
select [sɪˈlɛkt] – выбирать, отбирать.
button [ˈbʌt(ə)n] – кнопка, пуговица.
group [ɡruːp] – группа, кучка.
option [ˈɒpʃ(ə)n] – предмет выбора.
field [fiːld] – площадка, участок, поле.
set [set] – устанавливать.
legend [ˈlɛdʒ(ə)nd] – легенда, надпись.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх