1

2 1. Формы в HTML-документах 2.1. Тег 3. ТЕГ 4. Тег 5. Тег

3 1. Формы в HTML-документах Формы HTML позволяют получать информацию от читателей. До сих пор мы обсуждали только способы вывода данных, теперь речь пойдет об обратном действии. Формы дают возможность запрашивать информацию в виде свободного текста, получать ответы типа "да/ нет" или делать выбор из нескольких опциий. Вы можете использовать формы с различными целями. Простейшим примером является размещение формы, куда читатели, посетившие сайт, смогут записать свои отзывы.

4 1. Тег Все формы начинаются тегом и свершаются тегом. Существует три тега для создания различного типа полей в форме:, и. Любое их количество может быть размещено в контейнере между тегами и. Ниже дано их краткое описание, а подробнее они будут рассмотрены чуть позже.

5 Тег Назначение Определяет поле, в которое вводится многострочная текстовая информация Позволяет пользователю сделать выбор в окне с полосой прокрутки, либо в раскрывающемся меню Обеспечивает некоторые другие виды ввода информации: ввод одной строки текста, установку и сброс флажков (check boxes), выбор переключателя (radio buttons) и нажатие кнопки для отправки данных или очистки формы

6 2. ТЕГ Этот тег предназначен для построения поля с целью ввода многострочный текстовой информации. В контейнере TEXTAREA допускается размещать любой текст, который будет выведен в поле ввода по умолчанию. Перечислим атрибуты этого тега. NAME Определяет название поля; обязателен ROWS Устанавливает высоту поля, т. е. число строк в нем COLS Устанавливает ширину поля, т. е. длину строки

7 Пример 1: Какой-то текст

8 При помощи атрибутов ROWS и COLS можно задать поле любого размера. Хотя эти атрибуты не являются обязательными, они не имеют определенных значений по умолчанию (для каждого браузера эти значения различны), поэтому лучше их всегда указывать явно.

9 Пример 2: <TEXTAREA COLS="40" NAME="txtData" ROWS="5"> Это текст появится в элементе управления TextArea

10 3. Тег Этот тег используется для создания всплывающего меню или списка опциий с полосой прокрутки. Список опциий и пункты меню рас - полагаются внутри контейнера SELECT. Аналогично тегу, требует обязательного определения имени в атрибуте NAME. Количество опциий указывает - ся в атрибуте SIZE. Ниже перечислены атрибуты тега.

11 NAME Определяет название информации SIZE Определяет вертикальный размер окна для опциий выбора. Если атрибут опущен или его значение равно 1, выводится всплывающий список опциий. Если указано число больше единицы, то опциии выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество элементов списка, добавляются пустые строки. При их выборе пользователем возвращаются пустые поля MULTIPLE Позволяет выбирать сразу нескольких опции

12 Список опциий включается в контейнер при помощи тега. Этот тег имеет два атрибута, которые описаны в таблице 20. VALUE Указывает значение, возвращаемое программе обработки (скрипту), в случае выбора опциии пользователем SELECTED Указывает на опциию, выбранную по умолчанию Пример: Ниже приведено содержимое двух HTML-документов, содержащих похожие формы. Во втором документе предварительно выбран один элемент из списка (добавлен атрибут SELECTED).

13 Выберите время года: зима весна лето осень

14 Выберите время года: зима весна лето осень

15 Тег Тег в отличие от и является одиночным тегом. Он предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных (Submit) и для очистки формы (Reset, Clear). NAMESIZE Указывает размер поля ввода в символах. MAXLENGTH Определяет максимально возможное число символов, вводимых в поле. VALUE Для текстового поля определяет текст, выводимый по умолчанию. Для флажков и переключателей указывает значение, возвращаемое программе обработки. Для кнопок отправки и очистки формы определяет надпись на кнопке.

16 CHECKED Устанавливает флажок или переключатель во включенное состояние по умолчанию. С други- ми типами тегов не употребляется. TYPE Устанавливает тип поля ввода. Тип поля ввода, атрибут TYPE Атрибут TYPE тега может принимать следующие значения. TEXT Является значением по умолчанию и предполагает создание одной строки для ввода данных. Для этого типа поля ввода употребляются атрибуты NAME (обязательный), SIZE, VALUE и MAXLENGTH PASSWORD Позволяет заменять вводимые символы пароля звездочками. Для этого типа поля ввода используются атрибуты NAME (обязательный), SIZE, MAXLENGTH и VALUE.

17 CHECKBOX Позволяет вывести поле для установки флажка в виде маленького квадратика, в котором может быть произведена отметка опциии "галочкой". Может использоваться совместно с атрибутами NAME (обязательный), VALUE и CHECKED (определяет установленный по умолчанию флажок). Флажки обычно употребляются, когда можно выбрать сразу несколько опциий из числа предложенных. Нужно быть очень осторожным в использовании флажков и переключателей, если цвет фона страницы определяется не документом, а пользователем при помощи установок программы просмотра. Нельзя допускать, чтобы опциии сливались с фоном страницы. RADIO Позволяет выбрать только одну из представленного числа опциий. Переключатели можно группировать, задавая одно и то же значение атрибута NAME (обязательный). Так же используются атрибуты VALUE и CHECKED.

18 RESET Позволяет создать кнопку для очистки формы. Атрибут VALUE может быть использован здесь для наименования этой кнопки (по умолчанию кнопка имеет надпись Reset). SUBMIT Используется для создания кнопки, по нажатию которой введенные данные отправляются на сервер для обработки программой-скриптом. В атрибуте VALUE может быть указано название для этой кнопки (по умолчанию – Submit Query).

19 Пример: В следующей форме используется значение TEXT. Введите номер телефона:

20 Пример: Использование значения PASSWORD. Введите секретное слово: <INPUT TYPE="password" NAME="secret_word" SIZE="30 MAXLENGTH="30">

21 Пример: Использование значения CHECKBOX. <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1"> Вариант <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2" CHECKED> Предварительно выбранный вариант

22 Пример: В этом примере две формы расположены в соседних ячейках таблицы. Форма 1: <INPUT TYPE="radio" NAME="choice" VALUE="choice1"> yes. <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> no. Форма 2: <INPUT TYPE="radio" NAME="choice" VALUE="choice1" CHECKED> yes. <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> no.

23

24 Пример: В следующей форме используется значение RESET. <INPUT TYPE="reset" VALUE="Очистить форму!">

25 Пример: Использование значения SUBMIT. Какой-то текст

26 Нестандартное использование элементов форм Многие теги HTML используются в целях, для которых они изначально не предназначались, например, таблицы – для разметки страниц. Поэтому смело эксп- ериментируйте и с элементами форм. Наиболее гибкими являются меню выбора. Всплываю- щее меню может выполнять функцию информационной полосы, включенной в текстовый поток. Например, можно использовать меню выбора для размещения небольших рассказов (помещая фрагменты текста в элементы OPTION). Применение этих возможностей заставляет пользователя активнее взаимодействовать с содержимым вашей страницы.

27 Ниже приведен HTML-документ, в котором раскрывающийся список используется для размещения небольшого рассказа об авторе. Немного о себе: <OPTION SELECTED VALUE="line0"> Автобиография ––––––––––––––– Меня зовут Ербол. Я студент первого курса КБТУ. Мои увлечения: футбол, теннис. Я жду от вас писем по адресу:

28

29