Тег <TABLE>. Описание таблицы

Параметры:

width=640 | 45%____________ширина таблицы

height=330 | 30%____________высота таблицы

align=center | left | right_______выравнивание таблицы относительно текста

background=”1.jpg”_________фоновый узор

bgcolor=”gray”______________цвет фона

border=3___________________толщина рамки

bordercolor=”black”__________цвет рамки

cellPadding=5_______________втяжка внутрь ячейки

cellSpacing=10______________расстояние между ячейками

border=5

Описание строки. Параметры тега <TR>.

align=center | left | right_______выравнивание содержимого ячеек строки

valign=bottom | middle | top____вертикальное выравнивание содержимого

bgcolor=”gray”______________цвет фона ячеек строки

nowrap_____________________запрет переноса строк(как <nobr>)

height_________________________высота ряда

Заголовок таблицы (тег <TH> ) и описание ячейки. (тег <TD>)

Ячейка заголовка таблицы имеет ширину колонки; текст в данной ячейке имеет начертание Bold и выравнивание ALIGN=center. Параметры тегов <TH> и <TD> следующие:

width=150 | 45%_____________ширина ячейки

height=180 | 30%_____________высота ячейки

align=center | left | right________выравнивание содержимого ячейки

valign=bottom | middle | top_____вертикальное выравнивание содержимого

background=”1.jpg”__________фоновый узор

bgcolor=”gray”_______________цвет фона

bordercolor=”black”__________цвет рамки (только IE)

colspan=2___________________объединение ячеек по горизонтали

rowspan=3__________________объединение ячеек по вертикали

nowrap_____________________запрет переноса строк (как <nobr>)

Подпись таблицы. Параметры тега <CAPTION>.

Данный тег описывает название таблицы (подпись).<CAPTION> должен присутствовать внутри <TABLE>…</TABLE >, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top (расположить сверху), но может быть явно установлен в нижнее положение (ALIGN=bottom). ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы. Параметры элемента <CAPTION>:

align=bottom | top | left | right_____выравнивание подписи по горизонтали

valign=bottom | top _____________вертикальное выравнивание подписи

Пример:

Таблица 1

6.3Вложенные таблицы

Таблицы могут быть вложены одна в другую. Уровень вложенности не ограничен. Для создания вложенной таблицы необходимо описать ее тегом <table> как содержимое ячейки <td>.

Пример:<table border=1 width=50% cellspacing=0>

<tr>

<td> <table border=0 cellspacing=3 width=”100%”>

<tr>

<td bgcolor=“Black”><font color=”White”>ссылка1</font></td>

<td bgcolor=“Black”><font color=”White”>ссылка2</font></td>

<td bgcolor=“Black”><font color=”White”>ссылка3</font></td>

</tr> </table> </td> </tr>

<tr height=50>

<td> содержимое ячейки </td>

</tr>

</table>

7. ФОРМЫ И ФРЕЙМЫ

7.1Правила работы с формами и элементы форм

Формы используются в Web для многих целей. Наиболее часто они применяются как бланки писем для написания отзывов, как бланки для оформления заказов, подписки, для проведения регистрации и настройки параметров. Одним словом, формы нужны, когда от пользователя требуется ввод какой-либо информации. Пользователь вводит информацию в специально отведенных для этого полях формы, затем нажимает нужную кнопку и посылает заполненную форму на сервер. Сервер принимает данные формы, обрабатывает их и генерирует ответ в виде HTM-файла (например, “введен неправильный пароль”). Этот файл и получает пользователь в ответ на отправку формы.

Форма в HTML-документе размещается между тегами <FORM> и </FORM>. Внутри формы может располагаться обычный текст, другие HTML-элементы, например таблицы, а также элементы форм. Формы нельзя вкладывать одну в другую (это Вам не таблицы)!!! Чтобы форма заработала, необходимо указать три вещи - адрес программы, которая будет обрабатывать форму (ACTION), метод передачи данных из формы (METHOD) и способ шифрования данных из формы (ENCTYPE).

Структура формы такова:

<FORM METHOD=”getpost” ACTION=”URL” ENCTYPE=”MIME”>

Элементы _формы _и _другие _элементы _HTML

</FORM>

Атрибут METHOD. Метод посылки сообщения с данными из формы. Можно посылать результаты ввода данных в форму двумя путями:

1) GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы (в атрибуте ACTION). В результате получается URL из пары сотен символов, в котором находятся и данные для обработки и адрес CGI-программы, которая будет их обрабатывать на сервере. Метод GET используется по умолчанию в большинстве броузеров для передачи информации из формы. Использование метода GET не рекомендуется по следующим причинам:

ограниченная длина (URL имеет длину <256символов)

после отправки формы с паролем, его затем может узнать каждый достаточно посмотреть поле URL.

2) POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. CGI-программа получает данные из формы в стандартный поток ввода. Данный метод рекомендуется к использованию.

Атрибут ENCTYPE. Указание типа передаваемой информации. Когда данные передаются из формы на Web-сервер, они, как правило, кодируются по умолчанию MIME-форматом application/x-www-form-urlencoded. В данном методе кодирования пробелы заменяются на знак “+”, а нестандартные символы на комбинацию “%nn”, где nn соответствует коду символа в таблице ASCII. С помощью атрибута ENCTYPE можно изменить метод кодирования информации, принятый по умолчанию. Например, при использовании протокола mailto в URL в атрибуте ACTION более приемлемым является MIME-формат text/plain.

Одним из важных методов кодирования является multipart / formdata. Он используется при передаче файлов с помощью формы, когда необходимо указать, где файл начинается и кончается. В данном методе кодирования пробелы и нестандартные символы сохраняются, элементы данных отделяются друг от друга специальными строками.

Таким образом, согласно MIME-формату в атрибуте ENCTYPE передаваемая информация будет рассматриваться соответствующим образом.

Атрибут ACTION. Ему присваивается URL программы, которая будет работать с данными, полученными от формы. Данный URL почти всегда указывает на CGI-программу, обрабатывающую данную форму.

Пример: <FORM METHOD=”post' ACTION=”http://www.mysite.com/cgi-bin/process.pl”>

Если же Вы хотите принять данные формы по электронной почте, то используйте один из вариантов:

Стандартный.

Action=”mailto:xxx@xxx.xx” enctype=”application/x-www-form-urlencoded”

Упрощенный.

Action=”mailto:xxx@xxx.xx” enctype=”text/plain”

(сравните принимаемые данные далее в примере с формой)

ЭЛЕМЕНТЫ ФОРМЫ

В число элементов форм входят текстовые поля, поля для паролей, многострочные текстовые поля, раскрывающиеся меню, прокручиваемые списки, переключатели и метки, а также кнопки. Также возможно использование невидимых элементов формы. Все элементы формы должны иметь имя (Name).

Наиболее часто используемым элементом формы является элемент INPUT.

Непарный тег <INPUT> используется для ввода одной строки текста и одного слова. Также, в зависимости от атрибута TYPE, он позволяет осуществить одиночный (radio), множественный (checkbox) выбор, создать кнопку и т.д.

Типы полей ввода (возможные значения атрибута TYPE):

TEXT: однострочное текстовое поле ввода.

Параметры: SIZE=20 ___размер отображаемого поля ввода на экране (по умолчанию=20)

MAXLENGTH=15____максимальная длина вводимого значения в символах. Если пользователь попытается набрать символов больше указанного количества, броузер не разрешит ему этого сделать. О своем запрете броузер сообщит сигналом или просто будет зачеркивать лишние вводимые символы.

Нижеприведенный пример создает два однострочных поля с именами CustName и Cod:

введите имя: <input name=”СustName” type=”TEXT” size=”40”> <br>

введите код: <input name=”Cod” type=”TEXT” size=”20” maxlength=”10”>

введите имя:

введите код:

PASSWORD: поле для пароля.

Параметры: SIZE=20 ___размер отображаемого поля ввода на экране (по умолчанию=20)

MAXLENGTH=15____максимальная длина вводимого значения в символах.

Вводимые в поле данные на экран не выводятся. В большинстве случаев на экран выводятся «звездочки» или точки. Ограничение количества вводимых символов атрибутом MAXLENGTH может оказаться крайне полезным.

Пример:

введите имя: <input name=”СustName” type=”TEXT” size=”40”> <br>

введите пароль: <input name=”Cod” type=”PASSWORD” size=”20” maxlength=”10”>

введите имя:

введите пароль:

RADIO: одиночный выбор значения из нескольких (переключатель).

Параметры: NAME=”name” ______ имя возвращаемой переменной

VALUE=”yes”_______ значение возвращаемой переменной (т.е. поля)

CHECKED _________ выбрано изначально

Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE=”RADIO” с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). Выбор одного из полей ввода автоматически отменит выбор всех остальных полей данного типа с тем же именем (атрибут NAME).

Пример:

<b>Цвет материала:</b><br>

<Input Type=”RADIO” Name=”Color” Value=”Зеленый” CHECKED> Зеленый

<Input Type =”RADIO” Name=”Color” Value =”Красный”> Красный

<Input Type=RADIO Name=”Color” Value=”Коричневый”> Коричневый

CHECKBOX: множественный выбор (поле «флажка»).

Параметры те же, что и для RADIO. Возможен выбор множества вариантов из числа предложенных. По умолчанию значение атрибута VALIO равно on. Можно создать в форме несколько полей для флажка с одним и тем же именем, но разными значениями атрибута VALIO. Например, данный фрагмент кода:

Пункт 1: INPUT type=”CHECKBOX” name=”Chbox” value=”Да”>

Пункт 2: INPUT type=”CHECKBOX” name=”Chbox”>

отправит на сервер несколько пар значений, если в обоих полях будут поставлены флажки: Chbox=Да&Chbox=on.

Можно вывести на страницу поле с уже поставленным «флажком», для этого поместите атрибут CHECKED в нужный элемент INPUT. Чтобы получить множество отдельных полей флажков, следует создать поля с разными именами (NAME), но одинаковыми значениями атрибута VALUE. Например: