Категории
Меню
Лучшие книги » Компьютеры и Интернет » Интернет » HTML, XHTML и CSS на 100% - Игорь Квинт

HTML, XHTML и CSS на 100% - Игорь Квинт

Читать онлайн HTML, XHTML и CSS на 100% - Игорь Квинт

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 21 22 23 24 25 26 27 28 29 ... 59
Перейти на страницу:

Если же добавить на страницу элемент <SELECT> просто так, то вы увидите пустой список. Для добавления в список пунктов используются элементы OPTION, которые располагаются внутри элемента SELECT. Атрибут value задает значение, которое будет передано обработчику в случае выбора соответствующего пункта. Атрибут selected задает пункт, выбранный по умолчанию. Название элемента списка находится внутри элемента OPTION. Закрывающий тег не обязателен, но советую его использовать для обеспечения корректной работы.

В листинге 6.15 представлены примеры раскрывающегося списка и списка с полосой прокрутки. Для списка с полосой прокрутки установлена возможность множественного выбора.

Листинг 6.15. Создание списков

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post" name="test" target="_blank">

Место проживания:

<select name="Reg_Place" size="1" >

<option value="SPb">Санкт-Петербург</option>

<option value="Mos" selected >Москва</option>

<option value="Ebr">Екатеринбург</option>

</select><br />

Области работы (можно выбрать несколько):<br />

<select name="Reg_Work[]" size="4" multiple="multiple" >

<option value="journ">Журналистика</option>

<option value="progr">Программирование</option>

<option value="site">Создание сайтов</option>

<option value="HR">Управление персоналом</option>

<option value="sale">Продажи</option>

<option value="admin">Администрирование</option>

<option value="trans">Перевод</option>

<option value="PR">Реклама</option>

</select><br />

</form>

</body>

</html>

Результат обработки листинга 6.15 представлен на рис. 6.8.

Рис. 6.8. Списки

Теперь попробуем систематизировать и уточнить наши списки, чтобы посетителю было проще найти нужный пункт. В этом нам поможет элемент OPTGROUP, который создает заголовки в списках. У него есть единственный атрибут label, в котором указывается текст заголовка.

В листинге 6.16 показан пример создания списка с заголовками.

Листинг 6.16. Использование элемента OPTGROUP

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post" name="test" target="_blank">

Место проживания:

<select name="R_Place" size="1" >

<optgroup label="Россия">

<option value="SPb">Санкт-Петербург</option>

<option value="Mos" selected >Москва</option>

<option value="Ebr">Екатеринбург</option>

<optgroup label="Америка">

<option value="LA">Лос-Анджелес</option>

<option value="Va">Вашингтон</option>

<option value="NY">Нью-Йорк</option>

<optgroup label="Франция">

<option value="Par">Париж</option>

<option value="Lion">Лион</option>

</select><br />

Области работы (можно выбрать несколько):<br />

<select name="R_Job" size="8" multiple="multiple" >

<optgroup label="Журналистика">

<option value="biz">Бизнес</option>

<option value="ecol">Экология</option>

<option value="tur">Туризм</option>

<optgroup label="Программирование">

<option value="web">Web-программирование</option>

<option value="CPP">С/С++</option>

<option value="Del">Delphi</option>

<optgroup label="Создание сайтов">

<option value="Diz">Дизайн</option>

<option value="Html">Верстка</option>

<optgroup label="Перевод">

<option value="Eng">Английский</option>

<option value="Fr">Французский</option>

<option value="Ger">Немецкий</option>

<optgroup label="Другое">

<option value="HR">Управление персоналом</option>

<option value="sale">Продажи</option>

<option value="admin">Администрирование</option>

<option value="PR">Реклама</option>

</select><br />

</form>

</body>

</html>

Результат обработки браузером кода из листинга 6.16 представлен на рис. 6.9.

Рис. 6.9. Группы в списках

На рис. 6.9 видно, что списки стали гораздо удобнее, теперь посетителю проще найти нужный пункт.

Подобные элементы, конечно, не являются обязательными, но надо заботиться о тех, кто заполняет форму. Деление списков на группы поможет пользователям сэкономить время и с легкостью найти нужный пункт.

Есть только один недостаток – все эти списки и маленькие поля ограничивают простор фантазии посетителя, но это можно исправить.

Большие текстовые поля

Большие текстовые поля дадут посетителю возможность проявить свое творческое начало. В них можно писать что угодно в любых количествах. Такая конструкция совершенно необходима, размеров обычного текстового поля не хватит для ввода текста большого объема. В больших полях можно вводить комментарии, сообщения и многое другое.

Для создания таких полей применяется элемент TEXTAREA, который обязательно должен иметь закрывающий тег. Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами этого элемента. Размеры поля устанавливаются с помощью атрибутов cols и rows. Первый задает размеры по горизонтали, второй – по вертикали. Помните, что все размеры в формах считаются исходя из размера одного символа моноширинного шрифта.

Можно запретить пользователю изменять текст в текстовом поле, что пригодится, если поле используется, например, для представления договора. Запрет вводится путем установки атрибута readonly.

Еще один атрибут элемента TEXTAREA – wrap, указывающий браузеру, как осуществляется перенос текста и в каком виде текст отправляется на сервер. Этот атрибут может принимать три значения:

• hard – автоматически переносит строку, когда она доходит до границы окна ввода, и передает на сервер с такой расстановкой переносов;

• soft – переносит строку автоматически, но на сервер знак переноса передает только в том месте, где была нажата клавиша Enter;

• off – переносит слова только при нажатии клавиши Enter, и, если строка превышает горизонтальный размер окна, появляется полоса прокрутки.

В листинге 6.17 представлен пример создания больших текстовых полей. Первое поле с горизонтальной полосой прокрутки, второе – только для чтения.

Листинг 6.17. Создание больших текстовых полей

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post" name= "test" target="_blank">

Расскажите немного о себе:<br />

<textarea cols="24" rows="10" name="about" wrap="off" >Я самый лучший, лучше меня нет никого.</textarea><br />

Соглашение:<br />

<textarea cols="24" rows="3" name="about" readonly >Условия нашего соглашения</textarea><br />

</form></body>

</html>

Результат обработки кода из листинга 6.17 приведен на рис. 6.10.

Рис. 6.10. Большие текстовые поля

Очевидно, что такие поля – единственная возможность для ввода больших объемов текста, поэтому от их использования в форме никуда не деться.

Все возможные поля для формы готовы, осталось добавить несколько мелочей. Возможности, которые мы рассмотрим дальше, необязательно использовать, но с ними формы становятся намного удобнее.

Дополнительные удобства

Есть элементы, которые не очень сильно влияют на вид формы, но при этом делают работу с ней намного удобнее. Примером может служить элемент LABEL, который применяется при реализации выбора с помощью переключателей и флажков. Он необходим, чтобы вы могли выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Без использования этого элемента посетителю приходится щелкать кнопкой мыши на кружочке или квадратике, хотя просто щелкнуть кнопкой мыши на тексте намного удобнее. Тем более становится неважно, где находится текст – при щелчке на нем кнопкой мыши будет выбран связанный с ним пункт меню.

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

Связывание текста с элементом формы осуществляется просто: вы устанавливаете атрибут id элемента INPUT, а затем берете в элемент LABEL нужный текст и присваиваете атрибуту for этого элемента значение, совпадающее со значением id для элемента INPUT того поля, с которым хотите связать текст.

У элемента LABEL есть еще один замечательный атрибут – accesskey. Его значение устанавливает горячую клавишу для соответствующего элемента формы. Надо нажимать эту клавишу вместе с клавишей Alt, и фокус автоматически переместится на нужное поле.

В листинге 6.18 показан пример использования элемента LABEL.

Листинг 6.18. Использование элемента LABEL

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post" name="test" target="_blank">

Ваш пол: <input name="Reg_Gender" type="radio" value="man" />Мужской

<input name="Reg_Gender" type="radio" value="woman" />Женский

<input name="Reg_Gender" type="radio" value="dontanswer" checked />Не хочу отвечать<br />

Ваш возраст: <input name="Reg_Age" type="radio" value="before18" id="ab18"/><label for="ab18">до 18</label>

<input name="Reg_Age" type="radio" value="1825" id="a1825" /><label for="a1825">18-25</label>

1 ... 21 22 23 24 25 26 27 28 29 ... 59
Перейти на страницу:
Пожаловаться на ошибку
Похожие материалы
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов
27.12.2023 - 21:25
Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий
26.05.2024 - 09:00
Комментарии

Copyright @ bibliotekaonline.com 2024 - 2026. Все права защищены.


Почта для связи: [email protected]