Типы элементов формы

TYPE="TEXT" 

Представляет собой одностроковое текстовое поле физический размер которого можно установить с использованием атрибута SIZE, а первоначально введенную в него символьную последовательность — с помощью атрибута VALUE. 

Примером использования данного элемента в коде HTML может служить следующая строка:  <INPUT TYPE='TEXT" SIZE="40" NAME="user_name" VALUE-''Введите ваше имя">TYPE="PASSWORD"

Тип, полностью аналогичный предыдущему, за исключением того, что вводимая пользователем в текстовое поле информация будет отображаться на экране символами «*», чтобы скрыть текст от постороннего зрителя.  TYPE="CHECKBOX" 

Элемент, представляющий собой простую форму выбора, принимающую одно из двух устойчивых состояний: «отмечено» — «не отмечено»  Данный элемент оперирует так называемыми булевыми переменными, то есть переменными, каждая из которых может принимать значение «ИСТИНА» или «ЛОЖЬ». Каждый элемент формы 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" 

Отображает обыкновенную кнопку нажатие на которую приводит к какому-либо действию сервера.  С помощью атрибута 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> (см. урок 5), в том числе 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> использует достаточно большое количество вложенных директив, структура данной команды может быть интуитивно непонятна пользователю. Попытаемся освоить принципы создания таблиц на ряде несложных примеров.