Типы элементов формы
TYPE="TEXT"
Представляет собой одностроковое текстовое поле, физический размер которого можно
установить с использованием атрибута SIZE, а первоначально введенную в него символьную последовательность — с помощью атрибута VALUE.
Примером использования данного элемента в коде HTML может служить
следующая строка:
<INPUT TYPE='TEXT" SIZE="40" NAME="user_name" VALUE-''Введите ваше имя">TYPE="PASSWORD"
Тип, полностью аналогичный предыдущему,
за исключением того, что вводимая пользователем в текстовое поле информация будет отображаться на экране символами *, чтобы скрыть текст от постороннего зрителя.
TYPE="CHECKBOX"
Элемент, представляющий собой простую форму выбора, принимающую одно из двух устойчивых состояний: отмечено — не отмечено (рис. 6.2).
Данный элемент оперирует так называемыми булевыми переменными,
то есть переменными, каждая из которых может принимать значение ИСТИНА или ЛОЖЬ. Каждый элемент формы CHECKBOX создает логическую пару значений вида имя_элемента—состояние и передает их на сервер. Для установки
первоначального состояния элемента (отмечен, либо нет) используют атрибут CHECKED.
Пример использования:
<INPUT TYPE="CHECKBOX" CHECKED NAME="C01" VALUE="yes">
TYPE="RADIO"
Так называемая радиокнопка применяется в случае, когда какая-либо логическая переменная может принимать только одно значение из множества возможных.
Все элементы
RADIO одной формы обозначаются одним и тем же значением атрибута NAME. Использование радиокнопок требует явного указания значений атрибута VALUE, одна из кнопок должна быть обязательно выделена атрибутом
CHECKED.
Пример использования:
<Р АLIGN="СЕМТЕR">Пожалуйста, укажите ваш возраст</Р>
<CENTER>
<INPUT TYPE="RADIO" NAME= "user-age"
VALUE="0-12">
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="13-17">
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="18-25">
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="26-35" CHECKED>
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="36-">
</CENTER>
TYPE="BUTTON"
Отображает обыкновенную кнопку (рис. 6.4), нажатие на которую приводит к какому-либо действию сервера.
С помощью атрибута NAME данному
элементу присваивается уникальное имя, атрибут VALUE позволяет изменять надпись, отображаемую на кнопке.
Пример использования:
<INPUT TYPE="BUTTON" VALUE="Button"
NAME="B1">TYPE="SUBMIT"
Определяет кнопку, по нажатии которой данные из формы передаются серверу.Так же как и в предыдущем случае, надпись, отображаемая на кнопке, задаетсяатрибутом
VALUE.
Пример использования:
<INPUT TYPE="SUBMIT" VALUE="Отправить!">
TYPE="RESET"
Создает кнопку, которая очищает неправильно заполненную
текстовую форму. Параметры и значения этой кнопки не передаются на сервер вместе с другими данными формы. Пример использования:
<INPUT TYPE="RESET" VALUE="Очистить форму">TYPE="FILE"
Генерирует на экране кнопку, по нажатии на которую на экране появляется Проводник Windows, позволяющий присоединить к отсылаемым на сервер данным любой файл с локального компьютера пользователя.
Данный элемент применяется в основном в формах отправки с сервера сообщений электронной почты для организации вложений, а также для загрузки изображений на сервер. Обычно рядом с кнопкой отображается небольшое
текстовое поле, куда автоматически заносится имя отсылаемого файла и путь к нему на локальном диске.
Пример использования:
<INPUT TYPE="FILE" NAME="picture">TYPE="IMAGE"
Создает кнопку отсылки, аналогичную элементу SUBMIT, но с использованием графического изображения, созданного пользователем. Обычно применяется вслучаях, когда стандартная серая прямоугольная кнопка
не вписывается в дизайн сайта. URL к изображению, играющему роль кнопки, указывается атрибутом SRC, причем сам элемент может содержать собственные атрибуты, аналогичные применяемым в теге <IMG>, в
том числе ALIGN, ALT и др. Атрибуты NAME и VALUE трактуются так же, как аналогичные атрибуты элемента SUBMIT.
Пример использования:
<INPUT TYPE="IMAGE" SRC="/images/button.giГ
ALIGN="BOTTOM" NAME="submit" VALUE="Отправить!">
TYPE="HIDDEN"
Данный элемент является скрытым и не отображается на экране монитора пользователя.
Применяется он для хранения и передачи на сервер информации о текущем состоянии формы: при нажатии кнопки SUBMIT элемент HIDDEN сформирует логическую пару переменных типа имя—значение, которые будут отосланы
серверу с помощью протокола HTTP. Элементы HIDDEN служат доступной альтернативой файлам cookies — специальным файлам, в которых сохраняются индивидуальные настройки пользователя и позволяющим, например,
восстановить последнее состояние формы при повторном посещении пользователем содержащей эту форму страницы.
Пример использования:
<INPUT TYPE="HIDDEN" NAME="forml"
VALUE="c3576-236-2113">
Однако с помощью тега <INPUT> можно передать далеко не все доступные web-дизайнеру элементы форм. Например, текстовые поля, задаваемые атрибутами TEXT
и PASSWORD, весьма ограничены по количеству символов, которые можно ввести в эти поля. Если перед web-мастером встала задача создать такие текстовое поля, чтобы пользователь мог вводить большое количество
символов, используется самостоятельный тег <TEXTAREA>, формирующий на экране одноименный элемент формы
Синтаксис записи данного тега выглядит следующим образом:
<TEXTAREA МАМЕ="имя
элемента" ROWS-''целое число" СOLS="целое число">
Текст, выводимый в текстовом поле по умолчанию</TEXTAREA>
С атрибутом NAME, определяющим индивидуальное
имя каждого элемента формы, вы уже знакомы. Атрибуты ROWS и COLS указывают соответственно максимально допустимое количество строк вводимого текста и символов в строке. В случае если набираемый пользователем
текст не умещается в видимую часть текстового контейнера, по краям поля появляются вертикальные и горизонтальные полосы прокрутки для скроллинга содержимого элемента TEXTAREA.
Пример использования:
<TEXTAREA NAME="message" ROWS="25" COLS="40">
Введите сюда текст сообщения
</TEXTAREA>
Для создания меню выбора в форме web-мастер
может воспользоваться тегом <SELECT>.
Синтаксис записи данного тега в общем виде выглядит так:
<SELECT NAME="имя" MULTIPLE SIZE="целое число">
<OPTION
VALUE="Пункт 1">Пункт 1</OPTION>
<OPTION VALUE-''Пункт 2">Пункт 2</OPTION>
<OPTION VALUE="Пункт 3">Пункт 3</OPTION>
OPTION
VALUE="Пункт N">Пункт N</OPTION>
</SELECT>
Атрибут MULTIPLE определяет для пользователя возможность отметить не одну, а сразу несколько позиций из предложенного списка.
Если данный атрибут задан, можно воспользоваться атрибутом SIZE, определяющим количество позиций, видимых на экране одновременно.
Пример использования:
<Р АLIGN ="CENTER">Пожалуйста,
укажите ваш город</Р>
<CENTER>
<SELECT NAME="City" MULTIPLE SIZE="3">
OPTION VALUE="a">Санкт-Петербург</OPTION>
OPTION
VALUE="b">Mocква</OPTION>
<OPTION VALUE="c">Екатеринбург</OPTION>
</SELECT>
</CENTER>
Таблицы
Структура представления таблиц в языке разметки гипертекста в целом такая же, как, скажем, в текстовых редакторах класса Microsoft Word, то есть включает в себя столбцы и ячейки, дополненные
рядом специфических параметров, определяющих, например, толщину границ таблицы или позиционирование элементов в ячейках.
Для создания таблиц в HTML 3.2 применяется тег <TABLE>, структура записи
которого в общем виде следующая:
<TABLE ALIGN="значение" WIDTH="значение" BORDER=''целое число"
CELLSPACING="qenoe число" CELLPADDING=''целое число">
<TR ALIGN="значение" VALIGN="значение">
<TD ALIGN="значение" VALIGN="значение" COLSPAN="целое число"
ROWSPAN="целое
число" НЕIGНТ="целое число" NOWRAP> Содержимое ячеек</ТD>
</TR>
</TABLE>
Рассмотрим эту структуру более подробно. Как видите, основополагающим тегом
в блоке описания таблицы является директива <TABLE>, в нее вкладываются все остальные команды блока. Данный тег может использовать следующие атрибуты: ALIGN — задает горизонтальное позиционирование
всей таблицы в целом, может принимать значения LEFT, RIGHT или CENTER. Атрибут WIDTH определяет ширину всей таблицы и может принимать значение целого числа,если ширина таблицы указывается в пикселах, либо
числа от 1 до 100 с символом % (например, 60 %), если ширина таблицы задается в процентах отширины экрана пользователя. Атрибут BORDER указывает на толщину обрамления столбцов и ячеек таблицы в пикселах.
Если значение данного атрибута равно нулю, таблица становится невидимой. Атрибут CELLSPACING позволяет задать промежуток между ячейками в пикселах, a CELLPADDING — промежуток между содержимым ячейки и рамкой
вокруг ячейки в пикселах.
В теги <TABLE> </TABLE> вкладываются теги <TR> и </TR>, определяющие строки таблицы. Количество данных тегов зависит от реального количества строк.
Команда <TR> может использовать атрибут ALIGN, определяющий горизонтальное
позиционирование содержимого ячейки внутри самой ячейки, а также атрибутVALIGN, задающий вертикальное выравнивание
содержимого ячейки. Первый из них может принимать традиционные значения LEFT, RIGHT и CENTER, второй значения TOP, MIDDLE, BOTTOM и BASELINE.
В своеобразный контейнер, образуемый тегами <TR>
и </TR>, вкладываются команды <TD>, описывающие сами ячейки. Тег <TD> оперирует атрибутами ALIGN и VALIGN, действие и параметры которых аналогичны таковым для тега <TR>.Они применяются
в ситуации, когда горизонтальное или вертикальное выравнивание в какой-либо одной ячейке отличается от выравнивания, заданного для всей строки. Кроме того, тег <TD> оперирует следующими необязательными
атрибутами: COLSPAN — число столбцов, перекрываемых ячейкой; ROWSPAN —число строк, перекрываемых ячейкой, HEIGHT — высота ячейки в пикселах и NO WRAP — запрет переноса слов внутри ячейки.
В силу
того что тег <TABLE> использует достаточно большое количество вложенных директив, структура данной команды может быть интуитивно непонятна пользователю. Попытаемся освоить принципы создания таблиц
на ряде несложных примеров.
Простые таблицы
Предположим, поставленная перед web-мастером задача требует использования таблицы, состоящей из четырех значений
одинакового формата.
Такая таблица содержит две строки по две ячейки в каждой, или, другими словами, два элемента <TR>, каждый из которых содержит по два элемента <TD>. Отрывок html-кода,
описывающего такую таблицу, можно представить следующим образом:
<TABLE>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
А теперь несколько усложним задачу. Положим, ваша таблица включает всего три значения,
два — в двух верхних ячейках и одно — в нижней.
В представлении такой таблицы в виде кода HTML также ничего сложного нет. Таблица по-прежнему содержит две строки, однако первая из них включает две
ячейки, а нижняя — всего одну. Иными словами при описании второй строки мы должны использовать лишь один элемент <TD>:
<TABLE>
<TR>
<TD>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>C</TD>
</TR>
</TABLE>
Стандартная таблица с текстовыми
ячейками
Таблица с ячейками, заполненными текстом, подразумевает использование ряда специфических элементов, таких как заголовок столбца, определяемый тегом <ТН>, или заголовок всей таблицы,
задаваемый тегом <CAPTION>.
Директива <ТН> определяет выделенный жирным шрифтом заголовок каждого столбца таблицы, поясняя его содержимое. В общем виде данный тег записывается следующим
образом:
<ТН ALIGN="заначение" VALUE="значение" WIDTH="значение" НЕIGНТ="значение" COLSPAN="целое число" ROWSPAN="целое число" NOWRA>содержимое
заголовка</ТН>
Все атрибуты этой команды записываются аналогично атрибутам других тегов, определяющих внутреннее наполнение таблиц, их значения идентичны таковым для атрибутов тега <ТО>.
Напомню, лишь, что атрибут ALIGN в данном случае определяет горизонтальное выравнивание заголовка столбца в ячейке, атрибут VALIGN — вертикальное выравнивание, WIDTH — ширину ячейки в пикселах, HEIGHT —
ее высоту, COLSPAN указывает на число столбцов, охваченных ячейкой, ROWSPAN — на число охваченных ячейкой строк и, наконец, параметр NOWRAP запрещает перенос слов внутри ячейки. По умолчанию значения атрибутов
COLSPAN и ROWSPAN равны 1, для заголовка столбцов задается выравнивание по центру ячейки, в отличие от содержимого самих ячеек, определяемых тегом <TD>, оно выравнивается по левому краю столбца. Директива
<CAPTION> задает заголовок таблицы в целом. Синтаксис ее записи в общем виде таков:
<CAPTION ALIGN="значение">текст. заголовка</САРТION>
Заголовок таблицы всегда
позиционируется относительно ее центра, поэтому в качестве значения атрибута ALIGN в данном случае может быть указан параметр ТОР или BOTTOM, с помощью которого вы можете разместить заголовок либо над таблицей,
либо под ней.
Использование заголовков таблиц считается хорошим тоном и принято для представления соответствующей информации в html-дакументах. Заголовок
таблицы должен быть по возможности
кратким и содержательным, не следует включать в него развернутое описание представленных в таблице данных. При использовании директивы <CAPTION> следует помнить простое правило: в заголовке надо указывать
лишь что показывает данная таблица, а все объяснения, рассказывающие, почему данная таблица включена в документ, лучше приводить отдельным текстом, предваряющим таблицу.
В качестве простого примера,
демонстрирующего механизм применения команд<ТН> и <CAPTION>, приведу небольшой отрывок кода HTML:
<TABLE BORDER="1">
<CAPTION А!Л6М="ТОР">Пример
перевода ряда английских слов на русский язык</САРТЮМ><TR>
<ТН>Английское написание</ТН>
<ТН>Русское написание</ТН>
<ТН>Часть речи</ТН>
</TR>
<TR>
<TD>To go</TD>
<ТD>Идти</ТD>
<ТD><ЕМ>Глагол</ЕМ></ТD>
</TR>
<TR>
<TD>The table</TD>
<ТD>Стол</ТD>
<ТD><ЕМ>Существительное</ЕМ></TD>
</TR>
<TR>
<TD>To
sleep</TD>
<TD>Cnaib</TD>
<ТD><ЕМ>Гла гол</ЕМ></ТD>
</TR>
</TABLE>
Таблица с параллельными
текстами
Иногда web-мастеру приходится представлять на странице текст в виде нескольких разделенных небольшим расстоянием колонок, например, если дизайн сайта как бы копирует размещение текста
на газетной полосе или если необходимо показать перевод текста на двух и более языках. В принципе для решения такого рода задач можно применить тег <PRE>, позволяющий выводить на экран предварительно
отформатированный текст, однако в некоторых броузерах такое представление данных может быть нарушено в силу неадекватности обработки кода HTML их интерпретаторами. В подобных ситуациях рекомендуется использовать
невидимые таблицы, в которых для каждого отрывка текста отводится отдельная строка. Безусловно, web-дизайнеру придется изрядно повозиться, чтобы текст размещался в ячейках таблицы корректно, однако игра,
безусловно, стоит свеч, поскольку при подобном представлении информация гарантирована от искажений в броузерах разных версий и при разном экранном разрешении пользовательского монитора. Примером реализации
такой таблицы может служить следующий отрывок кода HTML:
