• off - перенос слов не происходит (значение по умолчанию)

• Virtual - перенос слов только отображается, на сервер же поступает неделимая строка.

• physical - перенос слов будет происходить во всех точках переноса.

Тэг SELECT

Элемент SELECT создает в заполняемой форме меню типа "Выбор одного пункта из многих" или "Выбор нескольких пунктов из многих". Должен располагаться внутри элемента FORM и иметь как начальный, так и конечный тэги. Содержит несколько элементов OPTION.

Атрибуты тэга SELECT:

• MULTIPLE - дает возможность выбора нескольких пунктов меню. По умолчанию можно выбрать только один пункт меню.

• NAME - определяет имя меню, уникальное для данной формы, которое будет использоваться при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом OPTION.

• SIZE - определяет количество видимых пунктов в меню. Если значение этого параметра больше единицы, то результатом будет список пунктов.

Тэг OPTION

Используется только с элементом SELECT. Элемент OPTION описывает отдельные пункты меню. Не имеет конечного тэга.

Атрибуты тега OPTION:

• SELECTED - Определяет пункт меню, который будет выбран изначально при загрузке документа. Если меню имеет тип "один из многих", то флагом SELECTED может быть помечен лишь один пунктов меню.

• VALUE - Задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением параметра NAME в элементе SELECT.

Тэг INPUT

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

Атрибуты тэга INPUT:

• NAME - определяет имя, используемое при передаче содержания данной формы на сервер. Этот параметр необходим для большинства типов (параметр TYPE - cм. ниже) элемента INPUT и обычно используется для идентификации поля или для группы полей, связанных логически.

• TYPE - определяет тип поля для ввода данных. По умолчанию - это "text". Возможные значения:

• text - создает поле ввода под одну строку текста. Как правило используется совместно с параметрами SIZE и MAXLENGTH.

• textarea - создает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент TEXTAREA

• file - дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с параметром ACCEPT.

• password - создает поле ввода под одну строку, однако текст, вводимый пользователем, отображается в виде значков "*", скрывая тем самым его содержание от любопытных глаз.

• checkbox - создает поле ввода для атрибутов типа Boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей CHECKBOX, которые могут иметь одинаковые имена. Каждое выбранное поле CHECKBOX создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле типа CHECKBOX обязательно должно иметь параметры NAME и VALUE, а также необязательный атрибут CHECKED, который указывает на то, что поле активизировано.

• radio - создает поле ввода для атрибутов, которые принимают одно значение из нескольких возможных. Все кнопки (radio buttons) в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает пару name/value, которая будет послана на сервер. Как и для полей CHECKBOX, атрибут CHECKED необязателен; он может быть использован для определения выделенной кнопки в группе кнопок (radio button).

• submit - создает кнопку, при нажатии которой заполненная форма посылается на сервер. Параметр VALUE в данном случае изменяет надпись на кнопке, содержание которой, заданное по умолчанию, зависит от браузера. Если параметр NAME указан, то при нажатии данной кнопки к информации, посылаемой на сервер, добавляется пара name/value, указанная для для параметра SUBMIT, в противном случае пара не добавляется.

• image - создает графический образ для кнопки, инициализирующей передачу данных на сервер. Местонахождение графического изображения можно задать с помощью параметра SRC. При передаче данных серверу сообщаются координаты x и y той точки на изображении, где был произведен щелчок клавишей мыши. Координаты измеряются из верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name/value. Значение name получается посредством добавления к названию соответствующего поля IMAGE суффиксов ".x" в случае абсциссы, и ".y" в случае ординаты.

• reset - создает кнопку, перезагружающую поля формы к их первоначальным значениям. Надпись на кнопке может быть изменена с помощью параметра VALUE. По умолчанию надпись на кнопке зависит от браузера.

• hidden - поля этого типа не отображаются на экране монитора, что позволяет разместить "секретную" информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип может быть использован для передачи информации о взаимодействии клиент/сервер.

• button - позволяет создать кнопку в HTML документе, что добавляет функции при использовании Visual Basic Script или Java Script. Параметр NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Параметр VALUE позволяет задать текст, который будет отображен на кнопке в документе.

• ACCEPT - конкретизирует тип файла. Используется только совместно с параметром TYPE="file". Значение задается в виде MIME.

• VALUE - задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для типов, имеющих значение вида Boolean (отмеченный или неотмеченный), таких как checkbox или radio, будет возвращено значение, заданное в параметре VALUE.

• CHECKED - указывает, что поля типов checkbox и/или radio (см. выше параметр TYPE) активизированы.

• SIZE - определяет размер поля в символах. Например, чтобы определить поле с видимой шириной в 24 символа, надо указать SIZE="24".

• MAXLENGTH - определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в параметре SIZE, в этом случае поле будет прокручиваться (scroll). По умолчанию количество символов не ограничено.

• SRC - задает URL-адрес картинки, используемой при создании графической кнопки, инициирующей передачу данных. Используется совместно с параметром TYPE="image".

• ALIGN - определяет способ вертикального выравнивания для изображений. Используется совместно с параметром TYPE="image". Полностью аналогичен параметру ALIGN элемента IMG. По умолчанию имеет значение bottom.

Примеры форм

Пример 1: Простая форма для сохранения на сервере короткого текстового сообщения

<FORM NAME=”formmessage” ACTION=”savemessage.php”>

<TEXTAREA NAME=”textmessage”>Текст сообщения</TEXTAREA><BR>

<INPUT TYPE=”submit” VALUE=”отправить”>

</FORM>

Получим документ показанный на рисунке 1.

Пример 2: Форма с выпадающим списком, радио кнопками, чекбоксом и обычной кнопкой.

<FORM NAME=”formname” ACTION=”action.php”>

<SELECT NAME=”selectname”>

<OPTION VALUE=”yes”>да

<OPTION VALUE=”no”>нет

</SELECT><BR>

<INPUT TYPE=”radio” NAME=”r1” VALUE=”yes”>да<BR>

<INPUT TYPE=”radio” NAME=”r1” VALUE=”no”>нет<BR>

<INPUT TYPE=”checkbox” NAME=”h1” VALUE=”yes”>да<BR>

<INPUT TYPE=”checkbox” NAME=”h2” VALUE=”no”>нет

</FORM>

Получим документ показанный на рисунке 2.

Рис 1. Текстовое поле и кнопка Рис 2. Список, радиокнопка и чекбокс

Вопросы к теме

• Каким тэгом создается элемент формы – кнопка при нажатии, на которую очищаются все поля формы?

• Чем кнопка SUBMIT отличается от BUTTON?

• Какой тэг используется в паре с тэгом SELECT?

• Какой параметр TYPE по умолчанию использует тэг INPUT?

• Какие элементы формы вы знаете?

• Что указывается в параметре ACTION тэга FORM?

Практическое задание

Создайте анкету следующего вида:

Лекция №9 (6 часов)

Тема: Каскадные таблицы стилей

• Введение в каскадные таблицы стилей

• Основные понятия и определения

• Селекторы тэгов

• Селекторы элементов

• Селекторы классов

• Селекторы псевдоклассов

• Комплексные селекторы

• Контекстные селекторы

• Каскадирование

• Группирование

• Декларации

• Единицы измерения

• Добавление таблиц стилей к документу

• Вопросы к теме

• Практическое задание

Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.

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

Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц, а также изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.

Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.