Принципы функционирования сетей Интернет

Курсовая
Контрольная
Типовики
Карта

Интерактивные Web-страницы

Интерактивной называется Web-страница, позволяющая пользователю вводить данные разного типа.

Формы

HTML-формой называют конструкцию языка HTML, позволяющую размещать на WWW-странице стандартные диалоговые элементы Windows, такие как кнопки, поля для ввода данных, флажки, списки, а также указывать процедуру обработки данных этих полей (Рис. 7.1). При помощи формы можно организовать, например, отправку email прямо из браузера или передать введенные данные для дальнейшей обработки (скажем, программой на JavaScript).

Рис. 7.1. Интерактивная форма.

В форме можно выделить следующие функциональные части:

- заголовок формы;

- отображаемые поля для ввода данных;

- скрытые (управляющие) поля.

Заголовок формы. Определение любой HTML-формы должно начинаться с заголовка <form ..>, в которой указывается процедура, выполняемая при обработке данных формы.

Заголовок формы для отправки ее содержимого по email должен иметь вид:

<form method="post"
action="mailto: адрес электронной почты">

Здесь значение post указывает метод взаимодействия с сервером.

Для собственно отправки сообщения на форме, как правило, помещается кнопка, описываемая следующим образом:

<input type="submit" value="Отправить">

Здесь параметр value указывает на текст, выводимый на кнопке.

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

Для каждого поля необходимо задать имя (значение параметра name), которое, вообще говоря, может быть любым. Однако относительно наименования полей приняты дополнительные соглашения, позволяющие накладывать определенные требования к вводимым данным. Так, имя поля может начинаться с набора управляющих букв, называемых ключами программы, которые отделяются от остальной части имени знаком "_". Каждый ключ задает то или иное требование к полю.

Допускается использовать ключи, предписывающие полям следующие свойства:

r (required): данное поле обязательно к заполнению;

d (digits): в данное поле можно вводить только цифры и десятичную точку (.);

e (email): вводимые значения должны иметь форму электронного почтового адреса;

w (word): в данное поле можно вводить только текст, латинские буквы и цифры (A-Z,a-z,0-9);

c (currency): в данное поле можно вводить только цифры, десятичную точку и знак "$";

m (multiple): данное поле может иметь несколько значений (для радио-кнопок с одним и тем же именем);

n (\n): в данное поле можно вводить символы перехода на следующую строку (вводятся при нажатии клавиши Enter), которые следует удалять при отправке;

s (space): символы пробелов в начале и в конце значения поля следует удалять.

Например:

<input type="text" name="rd_количество">

Данное поле обязательно для заполнения, можно вводить только цифры и точку.

<input type="text" name="res_email">

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

<input type="text" name="_address">

Данное поле может содержать любой текст, его заполнять необязательно.

Помимо тех полей, которые отображаются на WWW-страничке, в форме можно определить скрытые, не показываемые поля, необходимые для управления режимом работы программы обработки формы. Все управляющие поля имеют тип hidden (значения параметра type).

Дизайн форм

Важно обеспечить удобный для пользователя дизайн форм. Для этих целей можно взять на вооружение теги fieldset, legend и label и атрибуты tabindex и acceskey.

FIELDSET - очень полезный тег, позволяющий группировать (в том числе, визуально) элементы формы.

LEGEND - тег, который задает заголовок группе элементов (fieldset).

LABEL - способен связывать описания элементов формы с самими элементами. Для этого задается атрибут for, содержащий id соответствующего элемента. Позволяет «кликом» передать фокус связанному элементу.

tabindex - данный атрибут определяет порядок перебора элементов формы при нажатии на клавишу Tab.

accesskey - Задает так называемую «горячую клавишу» (Alt+буква). Буквы, к сожалению, визуально не выделяются.

Ниже приведен пример формы "с украшениями":

<form …>

<fieldset>

<legend>Отгрузка апельсинов</legend>

<div style="padding:20px">

<label for="oranges" accesskey="а">Количество <u>а</u>пельсинов:</label>

<br />

<input type="text" id="oranges" tabindex="1" />

<br />

<label for="barrels" accesskey="б">Количество <u>б</u>очек:</label>

<br />

<input type="text" id="barrels" tabindex="2" />

<br /><br />

<input type="submit" value="Грузите!" tabindex="3" />

</div>

</fieldset>

</form>

Каскадные таблицы стилей (СSS)

Как видно из приведенных выше тегов, оформление HTML-документа – занятие довольно трудоемкое. Особенно если на сайте повторяются одинаково оформленные участки (скажем, заголовки, ссылки, "подвалы" страниц). Для того, чтобы каждый раз не задавать кучу тегов, описывающих форматирование того или иного куска страницы, была предложения концепция таблиц стилей  (CSS - Cascading Style Sheets).

Фактически СSS - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер майта имеет полный контроль над внешним видом каждого элемента страницы, что проще и гораздо функциональнее использования обычного набора тегов HTML. Например, нам нужно создать жирный красный подчеркнутый текст:

<font color="red"><strong><u>

Какой-то текст

</u></strong></font>

А если подобный стиль нужно использовать несколько раз? Хорошо если раз 5, а если 100..200? Вот тут нам и поможет СSS. В нем правила оформления (стили) выносятся в отдельную таблицу.

На главную