Многострочные текстовые поля

Элемент textarea (< textarea> ... < /textarea> ) создает многострочное поле для ввода текста с возможностью прокрутки, которое позволяет пользователю вводить большие текстовые записи. По умолчанию количество символов, которое можно ввести в поле, не ограничено, а введенный текст отображается моноширинным начертанием.

Размер текстового поля может быть задан с помощью атрибутов rows и cols. Также ширину и высоту можно изменить с помощью CSS.

В тег < textarea> и < /textarea> можно разместить любой текст, который будет отображаться внутри текстового поля сразу при загрузке страницы. Если пользователь при заполнении поля не удалит этот текст, то он будет отправлен на сервер вместе с введенными данными.

Полосы прокрутки появляются, если пользователь вводит больше текста, чем помещается в выделенном месте.

Пример.

< textarea name=" dream" rows=" 4" cols=" 45" > Tell us your dream in 100 words or less< /textarea>

Создание выпадающего списка при помощи select

Элемент < select> (< select> ... < /select> )создает поле, отображающееся либо как раскрывающееся меню, если размер не указан (по умолчанию, т.е. атрибут size=" l" ), либо как прокручиваемый список вариантов, если size больше единицы. Элемент < select> служит контейнером для любого числа элементов < option>. Добавление атрибута multiple превращает меню в прокручиваемый список. Он также может содержать один или несколько элементов optgroup, которые используются для создания логической группы элементов option.

Тег < select> позволяет посетителю сайта выбрать один из предопределенных вариантов (см. рисунок 19). Ширина списка будет определяться самым длинным текстом, указанным в теге < option>.

Пример.

< p> Какое мороженое - ваше любимое? < /p> < select name=" ice-cream" > < option> Золотой стандарт< /option> < option> Бодрая корова< /option> < option> Рожок " Топтыжка" фисташковый< /option> < option selected=" selected" > Рожок " ГОСТ" шоколадный< /option> < option> Эскимо " Забава" двухслойное (молоко/шоколад) < /option>

Рисунок 19 - Выпадающий список в браузере

< option value=" swirl" > Рожок " Йогуртовый" < /option>

< option> Praline Pecan < /option>

< option> МаксиБон< /option>

< option> Баунти < /option>

< /select>

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

Текст внутри каждого элемента option представляет собой значение, которое посылается на сервер. Если вы хотите посылать значение, отличное от отображаемого, укажите его в атрибуте value элемента option. В приведенном примере для шестого элемента option пользователи видят текст «Рожок " Йогуртовый" », но на сервер будет посылаться значение «swirl».

Группы вариантов< optgroup> ... < /optgroup>

Тег < optgroup> представляет собой контейнер, внутри которого располагаются теги < option> и используется для группировки логически связанных вариантов в выпадающем списке.

Тег < optgroup> нельзя выбрать, как обычный элемент списка, а выглядит он как заголовок жирного начертания. Все элементы < option>, входящие в этот контейнер, смещаются немного вправо от своего исходного положения. Значение обязательного атрибута label отображается в качестве заголовка для последующих вариантов, как это видно на рисунке 20.

Пример.

< p> Какое мороженое - ваше любимое? < /p> < select name=" ice-cream" > < optgroup label=" Традиционное" > < option> Золотой стандарт< /option> < option> Бодрая корова< /option> < option selected=" selected" > Рожок " ГОСТ" шоколадный< /option> < /optgroup> < optgroup label=" Необычное" >

Рисунок 20 – Группы вариантов

< option value=" swirl" > Рожок " Йогуртовый" < /option>

< option> МаксиБон< /option>

< option> Баунти < /option>

< /optgroup>

< /select>

Когда пользователь выбирает вариант из списка (например, «Pistachio»), содержимое соответствующего элемента option передается вместе с именем переменной, указанным в элементе select: ice cream=”Pistachio”.

Надписи

Элемент label (надпись) используется для связывания с полем формы какого-либо описывающего его текста. Каждый элемент label связывается только с одним элементом управления формы.

Существует два способа связывания надписи с элементом управления формы. Один из них – вложение элемента управления и связанного с ним описания внутрь элемента label.

Пример.

< form action=" /cgi-bin/guestbook.pl" method=" GET" >

< lаbеl> Учетная запись: < input type=" text" name=" login" /> < /label>

< lаbеl> Пароль: < input type=" password" name=" my_pass" /> < /label>

< input type=" submit" />

< /form>

Другой метод – это связывание элемента label со значением id поля формы. Атрибут for указывает, для какого элемента управления предназначена данная надпись. Данный метод полезен для тех полей формы, которые находятся не рядом с их описаниями, например, когда они охватывают несколько разных ячеек таблицы.

Пример.

< form action=" /cgi-bin/guestbook.pl" method=" GET" >

< label for=" log" > Login account: < /label>

< input type=" text" name=" login" id=" log" />

< label for=" pswd" > Password: < /label>

< input type=" password" name=" password" id=" pswd" />

< input type=" submit" />

< /form>

Группа элементов

Тег < fieldset> (< fieldset> ... < /fieldset> ) является контейнером для других элементов, при отображении в браузере по умолчанию он выделяется рамкой и имеет небольшой внутренний отступ со всех сторон. Обычно его используют для визуального выделения группы логически связанных между собой элементов формы.

Элемент < fieldset> часто используется совместно с элементом < legend>, который определяет для него заголовок.

Пример: Результат выполнения можно видеть на рисунке 21.

< form> < fieldset>

< legend> Информация о покупателе < /legend >

< lаbеl> Полное имя < input type=" text" name=" name" /> < /label> < br>

< lаbеl> Адрес email < input type=" text" name=" email" /> < /label> < br>

< lаbеl> Штат < input type=" text" name=" state" /> < /label>

< /fieldset>

< fieldset> < legend> Подписка на список рассылки < /legend >

< lаbеl> Добавьте меня в ваш список рассылки

< input type=" radio" name=" list" value=" yes" checked=" checked" /> < /label> < br>

< lаbеl> Нет, спасибо < input type=" radio" name=" list" value=" no" /> < /label>

< /fieldset> < /form>

Рисунок 21 – Группы элементов с надписями

 

⇐ Предыдущая234567891011Следующая ⇒

Поделиться:

Популярное:

1. II. ОПРЕДЕЛЕНИЕ ВЕРТИКАЛЬНЫХ ГРАНИЦ МОРФОЛОГИЧЕСКОГО ПОЛЯ ЧЕЛОВЕКА
2. Антенны с круговой поляризацией
3. Б. Напряженность и потенциал электростатического поля и связь между ними. Принцип суперпозиции
4. Биполярное аффективное расстройство. Рекуррентное депрессивное расстройство. Этиология, клиника, диагностика, типы течения.
5. В курсовой и выпускной и выпускной работе применяются только затекстовые и подстрочные ссылки. В затекстовых ссылках – полное библиографическое описание книги, в подстрочных – краткое.
6. Ввод и вывод информации: текстовые файлы
7. Взаимодействие токов вызывается их магнитными полями: магнитное поле одного тока действует силой Ампера на другой ток и наоборот.
8. Визуализация для раскрытия чакр (4-й уровень аурического поля)
9. Внимание как ограничение поля восприятия
10. Внимание как ограничение поля восприятия, его функции и виды.
11. Воздействие гравитационного поля Земли
12. Вопрос 4 Электромагнитные поля и излучения