Заголовки: элементы H1, H2, H3, H4, H5, H6

Описание: описывают шесть уровней заголовков: от H1 (самый верхний) до H6 (самый нижний).

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

align = left|center|right|justify – выравнивание текста: left – выравнивание по левому краю, center – по центру (по умолчанию), right – по правому краю, justify – выравнивание по правому и левому краям.

Примеры:

<h1>Заголовок первого уровня</h1>	Печатается заголовок первого уровня.
<h2 align=”center”>Заголовок второго уровня</h2>	Печатается заголовок второго уровня, выровненный по центру.

Параграфы: элемент P

Описание: представляет параграф

Начальный тег: необходим

Конечный тег: не обязателен

Определения атрибутов:

align = left|center|right|justify – выравнивание текста

Примеры:

<p> Первый абзац.	Печатается первый абзац.
<p align=”left”>второй абзац.	Печатается второй абзац, выровненный по левому краю.

Форсирование обрыва строки: элемент BR

Описание: принудительно обрывает (оканчивает) текущую строку текста, но абзац не заканчивается.

Начальный тег: необходим

Конечный тег: запрещён

Пример:

<p> Первая строка абзаца<br>	Печатает абзац такого вида:Первая строка абзацаВторая строка абзаца.
Вторая строка абзаца.

Изменение шрифта текста: элемент FONT

Описание: определяет вид, размер и цвет шрифта для текста.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

size = number – устанавливает размер шрифта. Возможные значения:

· Целое число от 1 до 7. Устанавливает шрифт в определённый фиксированный размер, представление которого зависит от браузера пользователя.

· Относительное увеличение размера шрифта. "+1" означает: на один размер больше. "-3" означает: на три размера меньше. Все размеры находятся в пределах шкалы от 1 до 7

color = color – устанавливает цвет текста

face = string – задает имя шрифта

Пример:

<font size=’1’ color=’black’ face=’Tahoma’> Строка</font>

Печатает слово «Строка» черным цветом, шрифт «Tahoma» размером 1.

Элементы стиля шрифта : TT, I, B, BIG, SMALL, STRIKE, S и U

Описание:

TT: моноширинный текст, телетайп.

I: курсив.

B: полужирный.

BIG: "большой" шрифт.

SMALL: "малый" шрифт.

STRIKE и S: зачёркнутый текст.

U: подчёркнутый.

Начальный тег: необходим

Конечный тег: необходим

Примеры:

<b>bold</b>	полужирный
<i>italic</i>	курсив
<b><i>bold italic</i></b>	полужирный курсив
<tt>teletype text</tt>	телетайп
<big>big</big>	"большой" шрифт
<small>small</small>	"малый" шрифт

Подиндекс и надиндекс: элементы SUB и SUP

Описание: переводит текст в нижний и верхний регистр

Начальный тег: необходим

Конечный тег: необходим

Примеры:

H<sub>2</sub>O	H₂O
E = mc<sup>2</sup>	E=mc²

Бегущая строка: элемент MARQUEE

Описание: создания бегущей строки

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

bgcolor = color –цвет фона бегущей строки

loop = number – число повторов анимации бегущей строки (значение может быть целым или infinite – текст будет продолжать бегать пока читатель не перейдет на новую страницу)

direction = left|right|up|down – определяет направление: left (по умолчанию) – справа налево, right – слева направо, up – снизу вверх, down – сверху вниз.

scrollamount = number – скорость движения строки. (Рекомендуется ставить скорость "1", в этом случае строка выглядит более удобочитаемо и не дёргается).

scrolldelay = number – задаёт временной интервал между шагами бегущей строки.

width = number – ширина бегущей строки в пикселях.

height = number – высота бегущей строки. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).

Примеры:

<marquee>Бегущая строка</marquee>	Надпись «Бегущая строка» двигается влево
<marquee direction=”right” scrollamount=1 scrolldelay=20>Бегущая строка</marquee>	Надпись «Бегущая строка» двигается вправо со скоростью равной 1 и с временным интервалом 20.

Горизонтальные линии: элемент HR

Описание: описывает горизонтальную линию

Начальный тег: необходим

Конечный тег: запрещён

Определения атрибутов:

align = left|center|right – определяет горизонтальное выравнивание линии.

size = number – определяет высоту линии.

width = number – определяет ширину линии. Значение может быть числовым и в процентах от ширины окна браузера.

color = color – устанавливает цвет линии.

Примеры:

<HR align="center">	Линия, расположенная по центру и шириной 50% от размера окна.
<HR size="5" align="left" color=”#ff0000”>	Красная линия, расположенная слева, высотой 5 точек и шириной 100 точек.

Работа со списками»

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

Ненумерованные списки: <UL> ... </UL>.

Описание: описывают ненумерованный список.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

type = disc|circle|square – задает стиль меток для данного списка: circle (кружок), disc (закрашенный кружок, по умолчанию) или square (квадрат).

Нумерованные списки: < OL> ... </ OL>.

Описание: описывают нумерованный список.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

type = 1 | a| A| i| I – задает стиль меток для данного списка: 1(арабские цифры, по умолчанию), a (латинский алфавит, нижний регистр) или A (латинский алфавит, верхний регистр), i (римский алфавит, нижний регистр), I (римский алфавит, верхний регистр).

start = number – устанавливает номер первого элемента упорядоченного списка. По умолчанию это "1". Заметьте, что, хотя значением этого атрибута является целое число, соответствующие метки могут быть нечисловыми.
Так, если стиль элемента списка это латинские буквы в верхнем регистре (A, B, C, ...), start=3 означает "C". Если стиль – это римские цифры в нижнем регистре, start=3 означает "iii" и т.д.

Каждый элемент обоих списков должен быть определен тэгом <LI>.

Элемент нумерованного и ненумерованного списков: <L I>.

Описание: описывают элемент списка.

Начальный тег: необходим

Конечный тег: не обязателен

Определения атрибутов:

value = число – устанавливает номер текущего элемента списка. Заметьте, что, хотя значением этого атрибута является целое число, соответствующие метки могут быть нечисловыми (см. атрибут start).

Примеры:

<UL type=”disc”> <LI> первый элемент списка...</LI> <LI> второй элемент списка...</UL>	· первый элемент списка...· второй элемент списка...
<OL type=”1”> <LI value=10> первый элемент списка... <LI> второй элемент списка...</OL>	10. первый элемент списка...11. второй элемент списка...
<OL type=”i” start=”5”> <LI> первый элемент списка...</LI> <LI value=”10”> второй элемент списка... <LI> третий элемент списка...</OL>	V. первый элемент списка... X. второй элемент списка...третий элемент списка... XI. третий элемент списка...

Работа со ссылками»

Основные сведения. Существует три типа ссылок: внутристраничные – они задают переходы в пределах одной страницы; внутрисистемные – ссылки между страницами в пределах одного и того же сервера; и межсистемные – ссылки на страницы, расположенные на удаленных узлах Web. Для определения ссылок предназначен специальный тег, который называется Anchor (якорь).

Элемент А.

Описание: определяет ссылку или якорь.

Начальный тег: необходим

Конечный тег: необходим

Определения атрибутов:

name = “строка” – именует текущий якорь, который может стать якорем назначения для другой гиперссылки. Значением этого атрибута должно быть уникальное имя якоря. Областью видимости этого имени является текущий документ.

href = “строка” – определяет размещение ресурса Web, определяя таким образом ссылку с текущего элемента на якорь назначения, определённый этим атрибутом.

Примеры:

<a name=”info”>Информация</a>	Создается метка с именем info.
<a href=”http://www.cspu.ru”>ЧГПУ</a>	Создается ссылка на сайт ЧГПУ.

Цвет ссылки можно задать при помощи атрибутов тэга BODY:

link = “color” – устанавливает цвет непосещённых гиперссылок.

vlink = “color” – устанавливает цвет посещённых гиперссылок.

alink = “color” – устанавливает цвет гиперссылок при выборе пользователем.

Пример:

Цвет непосещенных гиперссылок – красный, посещенных – синий.

Для указания ссылки на электронный ящик в значение атрибута href должно быть “mailto:имя_электронного_ящика”.

Пример:

<a href=”mailto:roman@cspi.urc.ac.ru”>Напишите мне</a>

Создается ссылка «Напишите мне», щелкнув по которой, можно написать и отправить письмо.

1.1. Внутристраничные ссылки:

1.1.1. Создать имя (метку) для точки назначения, в которую должен осуществляться переход. Метка создается с помощью тега якоря, используя его атрибут NAME (например, <A NAME=”info”> Дополнительная информация </A>). Фраза "Дополнительная информация" при этом никак не будут выделены в тексте документа.

1.1.2. Для создания гиперссылки на эту точку документа используется тег <A> с атрибутом HREF=, при этом к имени якоря присоединяется знак #: <A HREF=”#info”> Просмотр дополнительной информации </A>. Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента (в нашем случае фразы Просмотр дополнительной информации), при нажатии на который произойдет переход к строчке Дополнительна информация.

1.2. Внутрисистемные ссылки:

1.2.1. В файле, в который мы хотим перейти необходимо создать метку аналогично п. 1.1.1.

1.2.2. Создать гиперссылку аналогично п. 1.1.2, только имя якоря присоединяется к имени файла через знак # (Кратко о моих увлечениях и хобби можно посмотреть <A HREF=”obomne.html#info”> здесь </A>). При нажатии на выделенный фрагмент произойдет переход строчке #info в файле с именем obomne.html.

«Графика и мультимедиа»

1. Изображения в HTML-документе.

Вставка изображения в HTML-страницу осуществляется с помощью тэга <IMG>.

Тэг < IMG >.

Описание: внедряет изображение в текущий документ в месте определения элемента.

Начальный тег: необходим.

Конечный тег: запрещен.

Определения атрибутов:

src = “строка” – задающая путь в структуре каталогов до файла с изображением (наиболее распространённые форматы изображений: GIF, JPEG и PNG);

alt = “строка” – определяет альтернативный текст (который появляется при наведении курсора мыши на изображение);

width = “число” – определяет ширину объекта (изображения);

height = “число” – определяет высоту объекта. Для уменьшения времени загрузки страницы с графикой полезно указывать размер изображения. Если он известен еще до загрузки страницы, то браузер может отвести рамку для картинки, а затем загружать текст на страницу. Пока загружается графика, посетитель страницы может начать читать текст.

border = “число” – определяет ширину рамки вокруг объекта;

align = “bottom|middle|top|left|right” – определяет позицию объекта по отношению к окружающему тексту (bottom – низ объекта должен быть выровнен вертикально по текущей базовой линии (по умолчанию), middle – центр объекта должен быть выровнен вертикально по текущей базовой линии, top - верх объекта должен быть выровнен вертикально по верхней границе текущей строки, left – прижимает объект к левому краю, right – прижимает объект к правому краю).

Примеры:

<img src=”pic1.jpg” ProductID="100”" w:st="on">100” height=”100” align=”right”>	Вставить картинку pic1.jpg размером 100х100 и обтеканием текстом слева
<img src=”pic1.jpg” border=”2”>	Вставить картинку с рамкой шириной 2 пикселя.

Фреймы и формы в HTML

Фреймы

Один из способов выдать сразу несколько файлов HTML на экран пользователя - это открыть несколько окон браузера. Другой путь состоит в том, чтобы разбить окно на несколько разделов. Эти разделы называются фреймами или кадрами. В каждом фрейме показывается свой HTML-документ. Каждый фрейм может иметь свои полосы прокрутки, ссылки, графические изображения и т. д. Фреймы могут функционировать независимо или влиять друг на друга, используя ссылки, указывающие на другие фреймы.

Контейнер <FRAMESET>. Web-страница, которая разделена на фреймы, называется документом группы фреймов. Документы группы фреймов содержат стандартный заголовок, задаваемый тегом HEAD, но в отличии от стандартных HTML-документов, они не содержат тега BODY. Вместо него используется контейнер (т. е. парный тег) <FRAMESET>, который применяется для определения строк и столбцов отдельных фреймов, каждый из которых обозначается тегом <FRAME>.

Если включить контейнер BODY в документ, где используется контейнер FRAMESET, то кадры будут проигнорированы программой просмотра, и информация, содержащаяся в документах, задаваемых тегами<FRAME>, не будет выведена. Будет показана только информация, содержащаяся в контейнере BODY.

Внутри контейнера <FRAMESET> ... </FRAMESET> могут располагаться только теги <FRAME> или другие контейнеры FRAMESET.

Определение параметров кадров. Тег <FRAMESET> имеет два главных атрибута: ROWS и COLS, задающих разбиение на строки и столбцы соответственно. Ниже приведен вид контейнераFRAMESET:

Можно определить любое число рядов и столбцов; необходимым условием является указание хотя бы одного из атрибутов ROWS или COLS.

Кадр не может быть единственным: если вы определили единственный ряд и единственный столбец, то программа просмотра проигнорирует контейнер FRAMESET, и экран останется пустым.

Значение атрибута ROWS или COLS представляет собой строку, содержащую список значений в пикселах, процентах или относительных единицах, разделенных запятыми. Количество рядов или столбцов кадров определяется числом этих значений.

Пример

Для задания сетки кадров из трех рядов, высота которых 100, 240 и 140 пикселов соответственно, используйте тег

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

Пример

Тег <FRAMESET ROWS="25%, 50%, 25%>" задаст три кадра, размером по 25%, 50% и 25% от высоты окна браузера.

Относительно точности указания размеров фреймов в процентах можно не беспокоиться: если сумма значений не равна 100%, то масштаб кадров будет пропорционально изменен.

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

Символ * обозначает пропорциональное деление окна программы просмотра. В данном примере окно будет разделено на три вертикальных кадра, первый из которых будет иметь ширину в 1/6, второй - в 2/6 (или 1/3) и третий - в 3/6 (или 1/2) от ширины окна браузера. Единица при указании относительных значений может быть опущена.

Указание значений атрибутов ROWS и COLS может быть и смешанным, включающим любое сочетание абсолютных размеров, процентных отношений и относительных значений, например,

Здесь первому кадру присвоено абсолютное значение в 100 пикселов по ширине, второму - 25% от ширины окна. Оставшееся пространство делится между третьим и четвертым кадрами в пропорции 1 к 2.

Приоритеты в указаниях значений атрибутов таковы: в первую очередь (слева направо) отводится место для кадра с абсолютным значением, затем - для кадра со значением в процентах, и в последнюю очередь - для кадров с относительными величинами.

Если вы пользуетесь абсолютными величинами в атрибутах ROWS и COLS, не делайте такие кадры большими - ведь они должны поместиться в окно браузера любого размера. Совместно с такими кадрами для лучшей балансировки рекомендуется использовать хотя бы один кадр, определенный в процентах или в относительных величинах.

При определении обоих атрибутов получается сетка кадров, например, тег

задает сетку из трех рядов и двух столбцов. В данном примере первый и последний ряды занимают по 1/4, второй ряд - половину от высоты окна. Первый столбец занимает 2/3, а второй - 1/3 ширины окна браузера.

Тег <FRAME>. Тег <FRAME> определяет отдельный кадр. Он должен располагаться внутри контейнера FRAMESET.

Пример

Заметьте, что этот тег не является контейнером и, в отличие от тега <FRAMESET>, не имеет закрывающего тега.

Число тегов <FRAME> обязательно должно быть равно числу кадров, определенных в теге <FRAMESET>. В нашем примере определено два кадра, поэтому контейнер содержит соответственное количество тегов <FRAME>. Пока кадры ничем не заполнены.

Использовать все атрибуты необязательно. Чаще всего вы будете пользоваться только одним атрибутом - SRC. Строка

определяет URL-адрес содержимого кадра. Это обычно файл HTML-документа, расположенный в том же каталоге, что и документ, содержащий контейнер FRAMESET, например,

Этот документ должен быть полноценным HTML-документом, т. е. содержать все обязательные части (контейнеры HTML, HEAD, BODY и т. д.).

Текст, заголовки, графика и другие элементы не могут напрямую включаться в документ с кадрами. Все они должны вводиться только с помощью указания URL-адреса элемента. Если контейнер FRAMESET содержит "инородное тело", оно будет выведено, а кадры полностью проигнорированы.

Атрибут MARGINразмещение слева и справа от содержимого кадра областей свободного пространства высотой по n пикселов, а MARGINHEIGHT=n, соответственно, сверху и снизу.

Значения этих атрибутов всегда должны указываться в абсолютных значениях (пикселах). Так, тег

создаст внутреннюю рамку на верхней и нижней границах кадра шириной в 5 пикселов, а на левой и правой границе - шириной в 7 пикселов.

К построенным вами кадрам автоматически добавляются полосы прокрутки, если содержание кадра больше его размера. Иногда это может нарушить эстетику страницы, поэтому в HTML предусмотрен атрибут SCROLLING тега <FRAME>, имеющий следующий формат:

Этот атрибут может принимать одно из трех значений: yes, no и auto. Последнее значение подразумевается по умолчанию, т. е. когда атрибут не определен.

По умолчанию размеры кадров могут легко изменяться читателями, однако понятно, что это может сильно нарушить авторский замысел. Поэтому вы, скорее всего, захотите использовать атрибут NORESIZE тега <FRAME>, запрещающий возможность "перекраивания" вашей страницы: <FRAME NORESIZE>. Этот атрибут не имеет значений.

Для определения рамки кадра в HTML существуют три атрибута: BORDER, FRAMEBORDER и BORDERCOLOR. Первый из этих атрибутов используется только с тегом <FRAMESET> и устанавливает ширину всех рамок для всех кадров контейнера FRAMESET. Эта величина указывается в пикселах, например,

Если этот атрибут нулевой, то все кадры контейнера будут без рамок. По умолчанию атрибут BORDER имеет значение 5.

Атрибут FRAMEBORDER используется с тегами <FRAMESET> и <FRAME> и может принимать два значения: yes или no. В случае yes рамка имеет трехмерную форму. Если FRAMEBORDER="no", рамка невидима, т. е. она имеет цвет фона окна браузера, устанавливаемого по умолчанию.

По умолчанию атрибут FRAMEBORDER имеет значение yes, т. е. предусматривает наличие трехмерной рамки. Рамка кадра будет невидимой, если значение FRAMEBORDER="no" установлено для всех кадров, смежных с ним.

Атрибут BORDERCOLOR может использоваться с тегами <FRAMESET> и <FRAME>. Ему может быть присвоено стандартное имя цвета или RGB-значение.

Пример

FRAMESET BORDERCOLOR="red" ROWS="*,*"> <FRAME SRC="first.html" BORDERCOLOR="#FF00FF"> <FRAME SRC="first.html"> </FRAMESET>

Здесь атрибут BORDERCOLOR тега <FRAMESET> ; устанавливает красный цвет рамок ("red"), однако такой же атрибут тега <FRAME> отменяет это значение и определяет цвет рамки первого кадра как фиолетовый. В результате второй кадр, в котором цветовой атрибут не определен, будет иметь часть рамки фиолетовой (на стороне, смежной с первым кадром), а остальную часть рамки - красной.

Если же в двух смежных кадрах определены свои собственные атрибуты BORDERCOLOR, то ни один из них не будет иметь силы. Цвет их рамок будет определяться соответствующим атрибутом контейнера FRAMESET.

Организация ссылок

Теперь, когда мы разобрались с методами создания кадров, познакомимся с их главным предназначением - управлением навигацией по сайту.

Для определения имени кадра служит атрибут NAME. Например, строка <FRAME NAME="frame1"> создает кадр с именем "frame1", на который можно сделать гипертекстовую ссылку следующим образом:

<A HREF="putfirst.html" TARGET="frame1">Нажмите сюда,</A>чтобы перейти на первую страницу

Атрибут TARGET гипертекстовой ссылки содержит имя кадра. При активизации этой ссылки содержимое кадра frame1, т. е. файл first.html, размещенный в нем при создании, будет заменен файлом putfirst.html.

Заметьте, что если атрибут TARGET отсутствует, файл putfirst.html будет выведен в том же окне или кадре, где находится указатель ссылки. АтрибутTARGET как раз и предназначен для указания "цели" - кадра, в котором должен быть размещен файл, определенный атрибутом HREF. Этот принцип замены файлов в одном кадре при управлении этим процессом из другого кадра и лежит в основе навигации по сайту.

Имя	Назначение
blank	Загружает указанный файл в новое окно без названия
self	Загружает указанный файл в кадр, откуда делается вызов
parent	Загружает указанный файл в старший (родительский) кадр сетки кадров; если такой кадр не определен, результат аналогичен действию _self
top	Загружает указанный файл в полное окно, разрушая всю структуру кадров

Кадру обязательно нужно присвоить имя, иначе на него нельзя будет ссылаться. Поэтому всем кадрам, содержание которых планируется менять, должны быть даны правильные имена. Имена кадров должны начинаться с алфавитно-цифрового символа. Ваши имена не должны начинаться с символа подчеркивания, так как он является первым символом зарезервированных имен кадров, перечисленных в таблице.

Пример

Создайте файл frames.html в директории public_html и запишите в нем следующие теги:

После этого, создайте файлы frame1.html, frame2.html, frame3.html и заполните их следующим образом:

frame1.html:

<HTML><BODY BGCOLOR=white><H1>Frame1</H1><A HREF=frame2.html TARGET="fr3">Ссылка на 2 кадр</A></BODY></HTML>

frame2.html:

<HTML><BODY BGCOLOR=red TEXT=yellow><H1>Frame2</H1><A HREF=frame3.html TARGET=_top>Frame3 во все окно</A></BODY></HTML>

frame3.html:

<HTML><BODY BGCOLOR=purple><H1>Frame3</H1><A HREF=frame1.html TARGET=_self>Frame1 в это окно</A></BODY></HTML>

Формы в HTML-документах

Формы HTML позволяют получать информацию от читателей. До сих пор мы обсуждали только способы вывода данных, теперь речь пойдет об обратном действии. Формы дают возможность запрашивать информацию в виде свободного текста, получать ответы типа "да/нет" или делать выбор из нескольких опций.

Тегом <FORM> начинается каждая форма. В нем нужно определить два атрибута, указывающих используемый скрипт и метод посылки данных.

Атрибут	Назначение
ACTION	Определяет URL, который примет и обработает данные формы. Если этот атрибут не определен, данные отправляются по адресу страницы, на которой помещена форма
METHOD	Указывает форме, как послать информацию соответствующей программе обработки (скрипту). Обычно он получает значение post, тогда информация формы посылается отдельно от URL. Значению get соответствует посылка вместе с URL

Пример

В этом примере дано указание браузеру отправить заполненную форму для обработки скриптом comment_script, расположенным в каталоге cgi-bin вашего сервера, и использовать метод посылки post.

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

Работа с тегами форм

В HTML существует три тега для создания различного типа полей в форме: <TEXTAREA>, <SELECT> и <INPUT>. Любое их количество может быть размещено в контейнере между тегами <FORM> и </FORM>. Ниже дано их краткое описание, а подробнее они будут рассмотрены чуть позже.

Тег	Назначение
<TEXTAREA>	Определяет поле, в которое пользователь вводит многострочную текстовую информацию
<SEECT>	Позволяет пользователю сделать выбор в окне с полосой прокрутки, либо в раскрывающемся меню
<INPUT>	Обеспечивает некоторые другие виды ввода информации: ввод одной строки текста, установку и сброс флажков (check boxes), выбор переключателя (radio buttons) и нажатие кнопки для отправки данных или очистки формы

Тег <TEXTAREA>

Этот тег предназначен для построения поля с целью ввода многострочный текстовой информации. В контейнере TEXTAREA допускается размещать любой текст, который будет выведен в поле ввода по умолчанию. Перечислим атрибуты этого тега.

Атрибут	Назначение
NAME	Определяет название поля
ROWS	Устанавливает высоту поля, т. е. число строк в нем
COLS	Устанавливает ширину поля, т. е. длину строки

Пример

<HTML><BODY> <FORM> <TEXTAREA> Какой-то текст </TEXTAREA></FORM> </BODY></HTML>

При помощи атрибутов ROWS и COLS можно задать поле любого размера. Хотя эти атрибуты не являются обязательными, они не имеют определенных значений по умолчанию (для каждого браузера эти значения различны), поэтому лучше их всегда указывать явно.

Тег <SELECT>

Этот тег используется для создания всплывающего меню или списка опций с полосой прокрутки. Список опций и пункты меню располагаются внутри контейнера SELECT. Аналогично тегу <TEXTAREA>, <SELECT> требует обязательного определения имени в атрибуте NAME. Количество опций указывается в атрибуте SIZE. Ниже перечислены атрибуты тега <SELECT>.

Атрибут	Назначение
NAME	Определяет название информации
SIZE	Определяет вертикальный размер окна для опций выбора. Если атрибут опущен или его значение равно 1, выводится всплывающий список опций. Если указано число больше единицы, то опции выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество элементов списка, добавляются пустые строки. При их выборе пользователем возвращаются пустые поля
MULTIPLE	Позволяет выбирать сразу нескольких опций

Список опций включается в контейнер <SELECT> ; при помощи тега <OPTION>. Этот тег имеет два атрибута.

Атрибут	Назначение
VALUE	Указывает значение, возвращаемое программе обработки (скрипту), в случае выбора опции пользователем
SELECTED	Указывает на опцию, выбранную по умолчанию

Пример

Ниже приведено содержимое двух HTML-документов, содержащих похожие формы. Во втором документе предварительно выбран один элемент из списка (добавлен атрибут SELECTED ).

<HTML> <BODY> Выберите время года: <FORM><SELECT NAME=year><OPTION SELECTED VALUE="winter"> зима <OPTION VALUE="spring"> весна <OPTION VALUE="summer"> лето<OPTION VALUE="autumn"> осень</SELECT></FORM></BODY></HTML>

<HTML>

<BODY><FORM> Выберите время года: <SELECT MULTIPLE NAME="year"><OPTION SELECTED VALUE="winter"> зима<OPTION VALUE="spring"> весна<OPTION VALUE="summer"> лето<OPTION VALUE="autumn"> осень</SELECT></FORM></BODY></HTML>

Тег <INPUT>

Тег <INPUT>, в отличие от <TEXTAREA> и <SELECT>, является одиночным тегом. Он предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных (Submit) и для очистки формы (Reset, Clear).

Тег <INPUT> располагает следующими атрибутами.

Атрибут	Назначение
SIZE	Указывает размер поля ввода в символах
MAXLENGTH	Определяет максимально возможное число символов, вводимых в поле
VALUE	Для текстового поля определяет текст, выводимый по умолчанию. Для флажков и переключателей указывает значение, возвращаемое программе обработки. Для кнопок отправки и очистки формы определяет надпись на кнопке
CHECKED	Устанавливает флажок или переключатель во включенное состояние по умолчанию. С другими типами тегов <INPUT> не употребляется
TYPE	Устанавливает тип поля ввода

Тип поля ввода, атрибут TYPE

Атрибут TYPE тега <INPUT> может принимать следующие значения.

Атрибут	Назначение
TEXT	Является значением по умолчанию и предполагает создание одной строки для ввода данных. Для этого типа поля ввода употребляются атрибуты NAME (обязательный), SIZE, VALUE и MAXLENGTH
PASSWORD	Позволяет заменять вводимые символы пароля звездочками. Для этого типа поля ввода используются атрибуты NAME (обязательный), SIZE, MAXLENGTH и VALUE
CHECKBOX	Позволяет вывести поле для установки флажка в виде маленького квадратика, в котором может быть произведена отметка опции "галочкой". Может использоваться совместно с атрибутами NAME(обязательный), VALUE и CHECKED (определяет установленный по умолчанию флажок). Флажки обычно употребляются, когда можно выбрать сразу несколько опций из числа предложенных. Нужно быть очень осторожным в использовании флажков и переключателей, если цвет фона страницы определяется не документом, а пользователем при помощи установок программы просмотра. Не допускайте, чтобы опции сливались с фоном страницы
RADIO	Позволяет выбрать только одну из представленного числа опций. Переключатели можно группировать, задавая одно и то же значение атрибута NAME (обязательный). Так же используются атрибуты VALUE иCHECKED
RESET	Позволяет создать кнопку для очистки формы. Атрибут VALUE может быть использован здесь для наименования этой кнопки (по умолчанию кнопка имеет надпись Reset)
SUBMIT	Используется для создания кнопки, по нажатию которой введенные данные отправляются на сервер для обработки программой-скриптом. В атрибуте VALUE может быть указано название для этой кнопки (по умолчанию - Submit Query )

Пример

В следующей форме используется значение TEXT.

<HTML><BODY><FORM>Введите номер телефона:<INPUT TYPE="TEXT" NAME="phone" SIZE="15" MAXLENGTH="12"> </FORM> </BODY></HTML>

Пример

Использование значения PASSWORD.

<HTML><BODY><FORM>Введите секретное слово: <INPUT TYPE="password" NAME="secret_word" SIZE="30" MAXLENGTH="30"> </FORM></BODY></HTML>

Пример

Использование значения CHECKBOX

<HTML><BODY><FORM><INPUT TYPE="checkbox" NAME="checkbox1"VALUE="checkbox_value1"> Вариант<BR><INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2" CHECKED> Предварительно выбранный вариант </FORM></BODY></HTML>

Пример

В этом примере две формы расположены в соседних ячейках таблицы.

<HTML><BODY><TABLE ALIGN=center BORDER CELLSPACING=10><TR><TD>Форма 1:<FORM> <INPUT TYPE="radio" NAME="choice" VALUE="choice1"> yes.<INPUT TYPE="radio" NAME="choice" VALUE="choice2"> no. </FORM> </TD><TD>Форма 2:<FORM> <INPUT TYPE="radio" NAME="choice" VALUE="choice1" CHECKED> yes. <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> no. </FORM> </TD></TR></TABLE></BODY></HTML>

Пример

В следующей форме используется значение RESET.

Пример

Использование значения SUBMIT.

<HTML><BODY><FORM><TEXTAREA> Какой-то текст </TEXTAREA><BR> <INPUT TYPE="submit" VALUE="Отослать данные!"> </FORM></BODY></HTML>

Дата добавления: 2019-02-22; просмотров: 184; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 123 4 5 Следующая ⇒

Мы поможем в написании ваших работ!