Методические указания1_2 (1084715), страница 11

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 11)

<P>Строка для ввода критерия поиска <BR>

<INPUT type="text">

<
/form>

Рис. 4.3_1. Пример использования элементов FORM и INPUT

<LABEL></label>

Этот элемент является контейнером для других элементов формы. Например, можно объединить надпись и поле ввода:

<LABEL>Ваш адрес: <INPUT type="text" id=" адрес "></label>

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

<LABEL for="adress"> Ваш адрес: </label>

<INPUT type="text" id="adress">

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

Стандартные атрибуты: accesskey, id„class, lang, dir, title, style, атрибуты событий.

4.6. Пример формы

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

<TABLE border=3>

<FORM action="mailto:Имя@сервер.домен" method="post">

<TR>

<TD><LABEL for="imya">Имя: </label>

<TD><INPUT type="text" id="imya">

<TR>

<td><labeL for="familiya">Фамилия: </label>

<TD><INPUT type="text" id="familiya">

<TR>

<td><label for="telefon">Телефон: </label>

<TD><INPUT type="text" id="telefon">

<TR>

<ТD>Пол:&nbsp; &nbsp;

<INPUT type="radio" name="pol" value="Male"> M&nbsp;

<INPUT type="radio" name="pol" value="Female"> Ж

<TD align="bottom">

<INPUT align="bottom" type="submit" value ="0тослать">

<INPUT type="reset">

</form>

</table>

В
этом примере использована таблица для выравнивания элементов формы. В форме есть несколько полей ввода и группа из двух переключателей (рис. 4.5). Для тренировки вы можете заполнить форму информацией, и отослать ее по электронной почте (например, себе). Для этого надо ввести в код страницы реальный электронный адрес. Заполнив форму, следует щелкнуть на кнопке Отослать. Обратите внимание, что подпись этой кнопки задается в элементе на Web-странице. Подпись кнопки Сброс не задана, поэтому она выбирается из настроек операционной системы. Иными словами, в нерусифицированной версии операционной системы эта кнопка может называться, к примеру, Reset.

Рис.4.5. Пример формы

После того как форма будет заполнена и отправлена щелчком на кнопке Отослать, она будет помещена в папку Исходящие почтовой программы. Чтобы действительно отослать форму, надо отправить это новое электронное послание. Если вы отправляете форму самому себе, то через несколько минут можете проверить свой электронный почтовый ящик: форма в виде письма появится в нем.

<SELECT> <OPTION> </select>

Элемент SELECT предназначен для создания списка или меню на гипертекстовой странице, а элемент OPTION — для создания пункта списка. Пояснить действие этих элементов поможет простой фрагмент, приведенный ниже:

<SELECT>

<OPTION value =а>Первый

<OPTION value =Ь>Второй

<OPTION value =с>Третий

<OPTION value=d>Четвертый

</select>

В результате мы получим список, показанный на рис. 4.6. Оба элемента, создающие список, имеют собственные атрибуты.

Рис. 4.6. Меню на Web-странице

Атрибуты элемента SELECT могут быть следующими. Атрибут name определяет имя меню (см. выше раздел «Общие атрибуты форм»). При помощи атрибута multiple (который не имеет значений) пользователю разрешается выбрать сразу несколько пунктов списка. Атрибут size определяет количество видимых на экране пунктов списка. Когда атрибут size отсутствует, список выглядит обычным образом: вначале видна только первая строка, а щелчок на кнопке со стрелкой раскрывает список. Если значение атрибута задано, то список не раскрывается, а прокручивается, причем пользователь видит только указанное количество строк.

Стандартные атрибуты: disabled, tabindex, id, class, lang, dir, title, style, атрибуты событий.

Элемент OPTION имеет другие атрибуты. Selected (без значений) определяет, какой из пунктов списка должен быть выбран по умолчанию, то есть при загрузке страницы. В списке только один из элементов OPTION может быть помечен таким способом. Атрибут value необходим для обработки данных на стороне сервера. Выбранный в списке пункт характеризуется значениями возвращенных атрибутов name и value.

Стандартные атрибуты элемента OPTION: disabled, id, class, lang, dir, title, style, атрибуты событий.

<TEXTAREA> </textarea>

При помощи этого элемента создается область для ввода или просмотра текста. На рис. 4.7 показан пример такой области, созданный при помощи следующей конструкции:

<Н2>Элемент TEXTAREA

<TEXTAREA name="text001" rows=5 cols=30>

Область для ввода текста

</textarea></h2>

Размеры области задаются атрибутами rows (количество строк) и cols (количество столбцов). Назначение атрибута name такое же, как и в предыдущих случаях. Подобно элементу INPUT, элемент TEXTAREA может иметь атрибут readonly. Это позволяет создать элемент, недоступный для редактирования.

С
тандартные атрибуты: disabled, tabindex, id, class, lang, di r, title, style, атрибуты событий.

Рис. 4.7. Область для ввода или просмотра текста

Элементы SELECT и TEXTAREA могут быть использованы не в составе формы, а как самостоятельные детали Web-страницы. Их применение оправдано в тех случаях, когда надо увеличить плотность размещения данных. При помощи элемента SELECT можно создавать списки, которые получаются более компактными, нежели стандартные списки, рассмотренные в разделе «3.5. Списки». Область ввода текста также поможет сэкономить место на странице за счет того, что сколь угод­но большой текст будет прокручиваться в окне фиксированного размера.

<BUTTON> </button>

Этот элемент позволяет создавать кнопки так же, как и элемент INPUT. Но, в отличие от последнего, он является контейнером (имеет конечный тег). Это означает, что содержимое элемента может быть достаточно сложным, например, комбинацией текста и графики (рис. 4.8):

<BUTTON name="Имя" value="submit" type="submit">

Текст<IMG src="gif1.gif" alt="Комментарий">

</button>

Рис. 4.8. Кнопка с надписью и изображением

Атрибут type может принимать следующие значения:

• button — кнопка, щелчок на которой вызывает запрограммированную разработчиком реакцию;

• submit — кнопка, подтверждающая, что форма заполнена;

• reset — кнопка для очистки формы.

Стандартные атрибуты: accesskey, disabled, tabindex, name, value, id, class, lang, dir, title, style, атрибуты событий.

<FIELDSET> <LEGEND> </legend> </fieldset>

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

<FIELDSET>

<LEGEND>Заголовок группы</legend>

Имя: <INPUT. name="imya2" type="text">

Фамилия; <INPUT name="familiya2" type="text"><BR>

Телефон: <INPUT name="telefon2" type="text"><BR>

Текст подсказки

</fieldset>

С
помощью элемента FIELDSET несколько элементов объединяются: пользователь видит их заключенными в рамку (рис. 4.9). Внутри группы элементы формы используются обычным способом.

Рис. 4.9. Группа элементов формы

Элемент LEGEND позволяет создать заголовок группы. Поскольку этот элемент является контейнером, в нем можно размещать другие элементы HTML. Например, заголовок группы можно составить из двух строк, если использовать тег <BR>. В этом случае размер шрифта заголовка целесообразно уменьшить.

С помощью атрибута align можно регулировать положение заголовка:

• top — заголовок сверху (как показано на рис. 4.9);

• bottom — заголовок внизу (что не всегда удается, реализовать);

• left — заголовок вверху и слева (значение по умолчанию);

• right — заголовок вверху и справа.

Стандартные атрибуты элемента LEGEND: accesskey, id, class, lang, dir, style, title, атрибуты событий.

ПРИМЕЧАНИЕ ———————————————————————————————————————

Примеры элементов форм можно найти в файле Form.ntm на прилагаемой дискете.

Библиографический список

1. Гончаров А.Г. Самоучитель HTML — СПб: Питер, 2000. — 240 с.

2. Шапошников И.В. Интернет-программирование. — СПб.: БХВ — Санкт-Петербург, 2000. - 224 с.

Содержание

1. Вводная часть 1

1.1. Просмотр Web-страниц 1

1.2. Браузер Microsoft Internet Explorer 1

2. Синтаксис HTML 4 3

2.1. Структура Web-страницы 3

2.2. Правила синтаксиса 8

2.3. Кодирование символов 9

3. Основные элементы HTML версии 4 10

3.1. Заголовок страницы 10

3.2. Стандартные атрибуты 11

3.3. Форматирование текста 11

3.4. Таблицы стилей 15

3.5. Списки 19

3.6. Гиперссылки 22

3.7. Таблицы 25

3.8. Фреймы 32

4. Объекты и формы 39

4.1. Общие атрибуты объектов 39

4.2. Рисунки и карты 40

4.3. Элементы объектов 44

4.4 Общие атрибуты форм 46

4.5. Элементы форм 46

4.6. Пример формы 50

Библиографический список 53

Характеристики

Список файлов книги