HTML, XHTML и CSS на 100%
Шрифт:
Для создания таких полей применяется элемент TEXTAREA, который обязательно должен иметь закрывающий тег. Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами этого элемента. Размеры поля устанавливаются с помощью атрибутов cols и rows. Первый задает размеры по горизонтали, второй – по вертикали. Помните, что все размеры в формах считаются исходя из размера одного символа моноширинного шрифта.
Можно запретить пользователю изменять текст в текстовом поле, что пригодится, если поле используется, например, для представления договора.
Еще один атрибут элемента TEXTAREA – wrap, указывающий браузеру, как осуществляется перенос текста и в каком виде текст отправляется на сервер. Этот атрибут может принимать три значения:
• hard – автоматически переносит строку, когда она доходит до границы окна ввода, и передает на сервер с такой расстановкой переносов;
• soft – переносит строку автоматически, но на сервер знак переноса передает только в том месте, где была нажата клавиша Enter;
• off – переносит слова только при нажатии клавиши Enter, и, если строка превышает горизонтальный размер окна, появляется полоса прокрутки.
В листинге 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.
<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>
<input name="Reg_Age" type="radio" value="2535" id="a2535"/><label for="a2535">25-35</label><br />
<input name="Reg_Age" type="radio" value="3550" id="a3530"/><label for="a3530">35-50</label>
<input name="Reg_Age" type="radio" value="after50" id="aa50"/><label for="aa50">старше 50</label><br />
</form>
</body>
</html>
Как видно, использование элемента LABEL может сильно упростить работу посетителей сайта.
Осталось совсем немного: для большей наглядности сгруппируем вопросы из нашей формы по темам и составим наконец общую форму. В этом нам поможет элемент FIELDSET, который объединит поля формы, находящиеся внутри его контейнера, рамкой. У этого элемента есть атрибут title, который задает всплывающую подсказку для группы.