HTML 4, СОЗДАНИЕ ЭЛЕМЕНТОВ WEB – СТРАНИЦ
·
Вставка графики в html-документ
·
Создание ссылок
·
Списки
·
Таблицы
·
Формы
Вставка
графики в html-документ
В HTML–документах можно применять графику различных
форматов. Самые распространенные форматы GIF и JPG.
Формат GIF позволяет создавать анимированные
картинки. Этот формат является сжатым, и допустимое количество цветов в нем
256. Сжатие происходит без потерь, то есть изображение записывается без
каких-либо преобразований.
Формат JPG также
является сжатым, и применяется для изображений требующих большое количество цветов
вплоть до 16 млн. Сжатие происходит после оптимизации и поэтому имеются потери
в качестве. Размер файла сильно зависит от требуемого качества изображения,
которое может иметь 7 уровней качества (от очень плохого до наилучшего).
В Интернете сейчас начинают
применять новый стандарт PNG, но он пока мало распространен. Он позволяет
создавать изображения в 16 млн. цветов без потери в качестве. Но из-за этого
занимает намного больше места, чем JPG.
Рассмотрим элементы,
позволяющие использовать графику при создании страниц. Здесь можно высказать
предостережения против большого количества применения графики, так как это
резко увеличивает размер сайта и ухудшает скорость загрузки.
Рассмотрим элементы, с помощью которых будем
вставлять и обрабатывать графику в html-документ.
Тег <img> вставляет изображение в документ. Он имеет
следующий набор параметров:
Src – указывает источник изображения. Им служит,
как правило, путь относительно текущего документа, но можно использовать вместо
пути его URL в Интернете. Закрывающая скобка запрещена;
alt - задает текст, который будет
изображаться вместо картинки, если она не загрузилась или не отображается. Этот
текст также появляется во всплывающей подсказке. Как правило, в тексте
указывается краткое описание изображения или ссылки, а также иногда содержит в
себе название файла с его размером;
lowsrc - источник изображения низкого качества или
размера для быстрой предварительной загрузки;
Align - задает выравнивание изображения
относительно текущей строки:
·
align=top - выравнивает верхний край изображения по
верхнему краю текущей строки;
·
align=middle - выравнивает центр изображения по базовой
линии текущей строки;
·
align=bottom - установка по умолчанию. Выравнивает нижний
край изображения по базовой линии текущей строки;
·
align=left - выравнивает изображение по левому полю;
·
align=right - выравнивает изображение по правому полю;
width и height - эти атрибуты задают горизонтальный и
вертикальный размер картинки, чтобы еще до начала загрузки изображения браузер выделил
ему требуемое место;
border - задает толщину рамки, которой будет
обрисовываться изображение. Если изображение не является ссылкой, то оно по
умолчанию не окружается рамкой. Если же это изображение-ссылка, то толщина
рамки будет равна 2. Рамка иногда может портить стиль страницы, тогда
используйте border=0;
Vspace- используется для указания ширины
пространства сверху и снизу от изображения в пикселах. Как правило, по
умолчанию равно 0. Но может быть и иным;
usemap и ismap - устанавливают на картинку
карты ссылок.
Приведем пример
применения некоторых параметров тега <img>:
<html>
<base
href="http://www.mjk.msk.ru/~dron/images">
<p><img src="prob.gif">
<p><img
src="../banner.gif">
<p><img
src="http://www.rambler.ru/dronban.jpg">
<img src="pic1.gif"
alt="Рисунок 1. Пример вращения
твердого тела.">
<img src="b.jpg" alt="b.jpg (1340b)">
</html>
В примере специально указан тег <base href=...>, который означает, что первая картинка будет загружаться из http://www.mjk.msk.ru/~dron/images/prob.gif. Вторая уже будет загружаться из каталога высшего уровня, т.е. в данном случае прямо из http://www.mjk.msk.ru/~dron/. Последняя картинка демонстрирует возможность загрузки картинок с других сайтов, и загрузится с сайта http://www.rambler.ru/.
Большинство параметров
в HTML не требуют заключения в кавычки, но параметр alt лучше ограничивать,
т.к. он может содержать пробелы и разделительные знаки, которые браузер не
сможет обработать.
В названиях файлов
изображений используйте только прописные буквы алфавита. Связано это с тем, что
большинство хостирующих организаций используют Unix-системы, а в таких системах
имена prob.gif и Prob.GIF различны. Несоблюдения такого простого правила часто
приводит к тому, что из странички вызывается файл с именем p1.gif, а на самом
деле там лежит что-нибудь вроде P1.Gif. Кстати это же относится и к названиям
самих страниц. Старайтесь также не использовать длинных названий типа
this_is_my_house_image1.gif, когда можно воспользоваться простым именем
pic1.gif или p1.gif.
Изображения на
страничках имеют очень большое значение для современного Интернета. Без них
немыслим хороший дизайн и оформление. Но надо ограничиваться разумными рамками
использования изображений, потому что каждое изображение увеличивает размер
страницы и время полной загрузки. Любое изображение занимает на порядок больше
места, чем та же самая страница, которая его использует. Поэтому более 80%
всего размера сайта принадлежит именно графике.
Графическое
изображение можно сделать фоном документа с помощь его прописки в открывающемся
тэге <body>, например: <body text="#336699"
bgcolor="#000000" background="ваш_фон.jpg">. Параметр
Background указывает на то, где лежит фоновая картинка, в данном примере он
указывает на то, что а фоновая картинка лежит в той же директории (папке), что
и документ.
Совместное
использование параметров bgcolor и background может применятся на случай, когда
фоновая картинка не загрузится, тогда вступит в силу фоновое изображение.
Создание ссылок
В этом разделе
рассмотрим создания ссылок на различные документы. Для начала создадим в одной
директории два файла exam1.html и exam2.html.
exam1.html (название файла)
<html>
<body text=black bgcolor=white link=red
vlink=green>
<p>Первый документ
</body>
</html>
exam2.html (название файла)
<html>
<body text=black bgcolor=hite link=blue
vlink=yellow>
<p>Второй документ
</body>
</html>
Тег <a> используется для связи страниц между собой, то есть из одного файла создает удаленную ссылку на другой. У него существует несколько параметров :
href - задает ссылку на другой документ. В него
можно записывать относительный путь или конкретный URL;
name - задает название для закладки;
target="_blank" - указывает, что документ, на который дается
ссылка, откроется в новом окне браузера.
Для связывания
первого файла exam1.html со вторым требуется вставить в него следующую
строку: <a
href=exam2.html>Второй документ</a>. После этого можно в любой момент из первого документа попасть во
второй. Для создания ссылки на другой сайт или ресурс, вы должны указать,
например: <a
href=http://www.microsoft.ru> Сайт Майкрософт</a>.
В Интернете
существуют ссылки не только на документы с расширением *.html, но и на многие
другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:). Ссылки на
такие документы создаются аналогично принципу рассмотренному ранее, например: <a
href="http://www.melody.ru /music.mp3"> скачать песню </a>.
Если адрес указан
таким способом: <a href="http://www.melody.ru/"> музыкальный сайт
</a>, то это
означает, что в указанном каталоге есть файл вроде index.html, который
загрузится по умолчанию.
Для открытия любого файлового документа в
новом окне используем параметр target, например: <a href="big.jpg" target="_blank"> <img src="small.jpg"> </a>.
При разработке
сайтов, которые содержат большое количество графики, иногда требуется резать
графические рисунки на кнопки для создания ссылок. Для выполнения этой задачи
используется способ создания "карты" на изображении (от англ.
map-карта). Чтобы создать "карту" в языке html существует тег <map>.
Тег
<map>...</map>
задает разбиение изображения на "горячие" области, т.е. области при
нажатии на которые можно загрузить другой файл HTML. Закрывающая скобка также
должна обязательно присутствовать. Внутри <map>...</map> должны
следовать элементы, описывающие "горячие" области, которые задаются
элементом <area>.
Параметр у этого
тега только один - это name, который должен быть обязательно и задает
имя карты разбиения.
Тег <area> задает
"горячие" области. Он не содержит
закрывающей скобки и имеет следующие параметры:
href - задает адрес страницы, которая будет
загружаться этой областью;
shape - задает форму "горячей" области и
может принимать значения circle - окружность, rect -
прямоугольник, poly - полигон любой формы;
coords - задает координаты области. Все координаты
отсчитываются от левого верхнего угла изображения. Они могут задаваться либо в
пикселах, либо в процентах от размеров изображения, т.е. X от ширины, а Y от
высоты. Так как существуют разные формы
областей, то способы их задания также различны.
Для окружности :
coords="Х центра, Y центра, радиус".
Для прямоугольника :
coords="лево верх Х, лево верх Y, право низ X, право низ Y".
Для полигонов :
coords="Х точки 1, Y точки 1, X точки 2, Y точки 2, ......" ;
nohref – атрибут предназначен для запрета области,
на которую нельзя нажимать.
alt - этот атрибут, как и у изображений,
сообщает текст браузеру, который будет выводиться при наведении мыши на
"горячую" область.
Следование областей
может быть произвольным, но если какие-то части областей пересекаются, то на
область пересечения будет относиться к области, которая идет в списке первой.
Это касается областей с атрибутом nohref и поэтому это свойство можно
использовать того, чтобы выколоть в области" дырку". Для надо первой
прописать область с атрибутом nohref, а
затем нормальную.
Пример тега <area>:
<area shape=rect coords=5,5,15,15 nohref>
<area href=main.html shape=rect
coords=0,0,20,20 alt="Main Page">
Для того чтобы назначить
изображению карту, надо использовать параметр usemap и в нем указать
значение name в теге <map>. Пример:
<img src=example.gif usemap="#example">. При указании имени важно учитывать регистр.
Приведем пример
возможности применения способа карт для разбивания изображения.
<map
name="prob">
<area href=koi.html
shape="circle" coords="60,18,12">
<area href=win.html
shape="poly"
coords="62,37,68,30,86,30,92,37,87,46,69,46">
<area href=iso.html
shape="circle" coords="78,63,12">
<area href=main.html shape="rect"
coords="19,73,60,92">
</map>
<p><img
src=step13.gif usemap="#prob" alt="Menu">.
Списки
Списки это один из
самых используемых элементов в оформлении HTML – документов. В HTML существует три вида
списков ненумерованные, нумерованные и
списки определений.
Ненумерованные
списки (маркеры). Называется
так потому, что каждый элемент списка выделяется не своим порядковым номером, а
просто жирной точкой или квадратом.
Ограничивающими
скобками для ненумерованного списка являются <ul>...</ul>,
внутри которых он собственно и размещается. Каждый элемент списка, дабы его
отделить от остальных, ограничивается скобками <li>...</li>.
Для краткости закрывающую метку можно не использовать.
Пример:
<ul>
<li>Первый элемент списка
<li>Второй элемент
списка</li>
</ul>.
В теге <li>...</li> можно задать разное начертание маркера с помощью параметра type, который может принимать значение disc – черная точка, square - квадрат и circle - круг.
Пример создания
ненумерованного списка:
<ul type=square>
<li>1 element
<li type=disc>2
element
<li type=circle>3
element
<li>4 element
</ul>.
Нумерованные списки. Эти списки позволяют пронумеровать каждый элемент, причем это может делаться арабскими и римскими цифрами, а также буквами.
Ограничивающие
скобки для таких списков <ol>...</ol>. Параметр type
задает тип нумерации:
type=1 задает тип
нумерации арабскими цифрами 1,2,3,...
type=a задает тип
нумерации латинскими буквами a,b,c,...
type=A задает тип
нумерации латинскими заглавными буквами A,B,C,...
type=i задает тип нумерации
римскими цифрами в нижнем регистре i,ii,iii,iv,...
type=I
соответственно римскими цифрами в верхнем регистре I,II,III,IV,...
Пример создания
нумерованного списка:
<ol type=1>
<li>1 element
<li type=a>2 element
<li type=A>3 element
<li type=i>4 element
<li type=I>5 element
<li>4 element
</ol>.
Списки могут иметь более сложную структуру, т.е. быть вложенными. В таких случаях браузеры сами меняют тип нумерации списков, чтобы они различались.
Списки
определений. Эти списки отличаются
от двух предыдущих по своей структуре и организации. Используются для описания
определений и терминов. Ограничивающими скобками списка определения являются
теги <dl>...</dl>. Для определения термина используется тег <dt>, а для его определения тег <dd>.
Пример применения списка определения:
<dl>
<dt>Teрмин 1<dd>Определение первого термина.
<dt>Teрмин 2<dd>Определение второго термина.
</dl>
В оформлении документов списки играют большую роль, так как в большинстве случаев на странице приходится очень много всего перечислять (ссылки, краткие оглавления, какие-то разновидности предметов и т.д.).
Текст HTML – документа с демонстрацией применения
списков приведен ниже.
<html>
<head>
<title>Первый пример</title>
</head>
<body
text="#FFFFFF" bgcolor="#000000">
<p> Ненумерованные списки </p>
<ul type=square>
<li>1 element
<li type=disc>2
element
<li type=circle>3
element
<li>4 element
</ul>
<p> Нумерованные списки </p>
<ol type=1>
<li>1 element
<li type=a>2 element
<li type=A>3 element
<li type=i>4 element
<li type=I>5 element
<li>4 element
</ol>
<p> Списки определений</p>
<dl>
<dt>Teрмин 1<dd>Определение первого термина.
<dt>Teрмин 2<dd>Определение второго термина.
</dl>
</body>
</html>
Таблицы
Таблицы являются
неотъемлемой частью HTML –
документа, они используются не только по своей основной функции, но и для
оформления web-страниц, компоновки
разрезанной графики и т.д.
Рассмотрим элементы
создания и оформления таблиц.
Тег
<table>…</table>
применяется для создания таблиц. Вся таблица должна находиться внутри него.
Закрывающая скобка </table> указывается обязательно. Параметры данного
тега задают вид таблицы, ее цвет, толщину рамки и многое другое. В теге <table> могут быть следующие параметры:
align - задает выравнивание таблицы. Если таблица находится
в выровненных участках текста, т.е. где указаны <div> или <center>,
то выравнивание можно не указывать. По умолчанию таблица выравнивается по
левому краю;
width - задает ширину таблицы. Как правило,
браузер подбирает размер таблицы таким образом, чтобы там все хорошо
уместилось, но если нужен конкретный размер, то можно указать его в пикселах
или в процентах от свободного пространства;
border - используется для указания ширины границы таблицы
в пикселах. По умолчанию имеет размер равный 0, и при этом границы таблицы не
отображаются;
cellspacing - каждую ячейку браузер обводит своей
собственной рамкой, и этот параметр задает ширину пространства между ними;
cellpadding - этот параметр тоже задает ширину
пространства, но только уже между рамкой ячейки таблицы и ее содержанием
внутри;
bgcolor - задает цвет фона таблицы;
background - изображение, которое будет отображаться в
виде фона таблицы.
Тег <caption>...</caption> располагается после тега <table> и выводит заголовок таблицы, который будет отображаться над ней.
Тег
<tr>…<\tr>
создает новый ряд ячеек.
Закрывающую скобку можно не указывать. Тег <tr> имеет следущий ряд
параметров:
align - задает выравнивание внутри всех ячеек
таблицы. Значения параметра аналогичны выравниванию текста;
valign – выравнивание по вертикали. Может принимать
следующие значения: top - выравнивание по верху, middle - по центру и bottom -
по низу;
bgcolor и background - задают цвет или
изображение фона одной строки таблицы.
Тег <td>…<\td> или <th>…<\th> предназначен
для создания новой ячейки. Количество ячеек (т.е. элементов <td> и
<th>) должно быть одинаково в каждом ряду таблицы, т.е. внутри каждого
тега <tr>.
Ячейки таблицы более
богаты своими параметрами, в них входят все параметры строк таблицы, описанные
выше, и еще ряд следующих:
rowspan -
объединяет указанное количество ячеек в одну по вертикали;
colspan - объединяет ячейки по горизонтали;
width и height - задают рекомендуемые
размеры ячейки по горизонтали и вертикали.
Приведем пример
простейшей таблицы:
<table border=1>
<tr><td>Первая ячейка<td>Вторая ячейка
<tr><td>новый<td>ряд
</table>
Подробно, на примерах, рассмотрим применение разных методов создания и способов оформления таблиц.
Начнем с примера
объединения ячеек таблицы на примере:
<table border=2>
<tr><td>1<td>2<td>3<td>4<td>5
<tr><td colspan=2
rowspan=2>6<td colspan=2>7<td rowspan=2>8
<tr><td>9<td>10
<tr><td>11<td>12<td>13<td>14<td>15
</table>
Результат выглядит следующим образом:
|
1 |
2 |
3 |
4 |
5 |
|
6 |
7 |
8 |
||
|
9 |
10 |
|||
|
11 |
12 |
13 |
14 |
15 |
Как видно в первой
строке 5 элементов <td>. Во второй строке элементов <td> уже всего 3, но если просуммировать все значения colspan, то
снова получится 5. По умолчанию для каждой ячейки параметр colspan равен 1.
Третья строчка
формируется из количества ячеек предыдущей строки. В примере есть 2 ячейки,
параметр rowspan в которых не равен 1, причем первая расширяется на 2 ячейки.
Значит, в этой строчке остаются незаполненными всего 5-3=2 ячейки. Что и
соответствует действительности.
Приведем еще один
пример работы с таблицами с заданием разного фона. Фон задается параметром
bgcolor="цвет фона". Фон можно задать для таблицы в целом, для ряда,
для столбца (в пределе одного ряда). В нашем случае мы задаем фон для каждого
столбца.
<table>
<tr>
<td
bgcolor="#FFCC33">1x1</td>
<td
bgcolor="#336699">1x2</td>
<td
bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td
bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td
bgcolor="#336699">2x3</td>
</tr>
</table>
Результат будет выглядеть следующим образом:
Чтобы задать высоту
и ширину ячейкам таблицы воспользуемся параметрами height и width, которые
можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и
ширина могут задаваться как в пикселах, так и процентах. В нашем случае мы
зададим ширину и высоту в пикселах для столбцов (ячеек).
<table>
<tr>
<td height="35"
width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50"
bgcolor="#336699"> 1x2 </td>
<td width="50"
bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35"
width="50" bgcolor="#336699"> 2x1 </td>
<td width="50"
bgcolor="#FFCC33"> 2x2 </td>
<td width="50"
bgcolor="#336699"> 2x3 </td>
</tr>
</table>
Получим:
Теперь выровним
содержимое внутри таблицы:
<table>
<tr>
<td height="35"
width="50" bgcolor="#FFCC33"> <center> 1x1
</center> </td>
<td width="50"
bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50"
bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35"
width="50" bgcolor="#336699"> <center> 2x1
</center> </td>
<td width="50"
bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50"
bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
Результат будет таким:
В каждой ячейке
(столбце) могут находиться и картинки, и текст, и даже таблицы (в этом случае
они называются вложенными таблицми). И тэги, которые мы применяем для
форматирования текста - все те же.
Поскольку содержимое
каждой ячейки как бы обстановка отдельной комнаты, то и тэги для центрирования
текста пришлось прописать в нашем примере в каждой ячейке.
Вернемся к нашему
примеру, и поговорим о вертикальном выравнивании содержимого таблицы.
Вертикальное выравнивание задается следующим атрибутом -
valign="middle" (top, bottom) - содержимое конкретной ячейки будет
находиться в середине ячейки (наверху или внизу):
Вот наглядный пример, а теперь как это пишется:
<table>
<tr>
<td height="35"
width="50" bgcolor="#FFCC33" valign="top">
<center>1x1</center>
</td>
<td width="50"
bgcolor="#336699"> <center>1x2</center> </td>
<td width="50"
bgcolor="#FFCC33" valign="bottom">
<center>1x3</center>
</td>
</tr>
<tr>
<td height="35"
width="50" bgcolor="#336699" valign="bottom">
<center>2x1</center>
</td>
<td width="50"
bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50"
bgcolor="#336699" valign="top">
<center>2x3</center> </td>
</tr>
</table>
Теперь перейдем к следующей ступеньке, чтобы узнать о других атрибутах, облегчающих нашу трудную жизнь.
Приведем примеры
работы параметров colspan и rowspan
В этом примере мы
использовали параметр colspan=2, прописав его для ячейки 1х1. Код будет
выглядеть следующим образом:
<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2">
<center>1x1</center>
</td>
<td width="50" bgcolor="#336699">
<center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50"
bgcolor="#336699"> <center>2x1</center>
</td>
<td width="50" bgcolor="#FFCC33">
<center>2x2</center> </td>
<td width="50" bgcolor="#336699">
<center>2x3</center> </td>
</tr>
</table>
Применение параметра rowspan. Принцип действия его тот же:
Попробуйте сами написать
код для такой таблицы (подсказка, тут должна исчезнуть ячейка 2х3).
Попробуем изменить
расстояние пространства между ячейками таблицы, это достигается с помощью
атрибута cellspacing, равного нулю. Посмотрим пример.
<table cellspacing=0>
<tr>
<td height="35"
bgcolor="#FFCC33" colspan="2">
<center>1x1</center>
</td>
<td width="50"
bgcolor="#336699" rowspan="2">
<center>1x2</center>
</td>
</tr>
<tr>
<td height="35"
width="50" bgcolor="#336699">
<center>2x1</center>
</td>
<td width="50"
bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
Попробуйте изменить параметры cellspacing и посмотреть,
что из этого получится.
Тег <FORM> устанавливает форму на веб-странице. Форма
предназначена для обмена данными между пользователем и сервером. Область
применения форм не ограничена отправкой данных на сервер, с помощью клиентских
скриптов можно получить доступ к любому элементу формы, изменять его и
применять по своему усмотрению.
Документ может содержать любое количество форм, но
одновременно на сервер может быть отправлена только одна форма. По этой причине
данные форм должны быть независимы друг от друга.
Для отправки формы на сервер используется кнопка Submit,
то же самое можно добиться, если нажать клавишу <Enter> в пределах формы.
Если кнопка Submit отсутствует в форме, клавиша <Enter> имитирует ее
использование, но только в том случае, когда в форме имеется только один
элемент <INPUT>. Если таких элементов два и более,
нажатие на <Enter> не вызовет никакого результата.
Параметры
Action: Адрес CGI-программы или документа, которые
обрабатывает данные формы.
Enctype: MIME-тип информации формы.
Method: Метод протокола HTTP.
Name: Имя формы.
Target: Имя окна или фрейма, куда обработчик будет
загружать возвращаемый результат.
Тег <BUTTON> создает на веб-странице кнопки и по своему
действию напоминает результат, получаемый с помощью тега <INPUT> (с параметром type="button | reset | submit"). В отличие от этого тега, <BUTTON>
предлагает расширенные возможности по созданию кнопок. Например, на подобной
кнопке можно размещать любые элементы HTML, в том числе изображения. Используя
стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров
и других параметров.
Теоретически, тег <BUTTON> должен располагаться внутри формы,
устанавливаемой элементом <FORM>.
Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с
тегом <BUTTON>,
если он встречается самостоятельно. Однако, если необходимо результат нажатия
на кнопку отправить на сервер, помещать <BUTTON> в контейнер <FORM> обязательно.
Параметры
Disabled: Блокирует доступ и изменение элемента.
Type: Тип кнопки — обычная, для отправки данных
формы на сервер или для очистки формы.
Value: Значение кнопки, которое будет отправлено
на сервер или прочитано с помощью скриптов.
Тег <INPUT> является
одним из разносторонних элементов формы и позволяет создавать разные элементы
интерфейса и обеспечить взаимодействие с пользователем. Главным образом <INPUT> предназначен для создания текстовых
полей, различных кнопок, переключателей и флажков. Хотя элемент <INPUT> не
требуется помещать внутрь контейнера <FORM>, определяющего форму, но если введенные
пользователем данные должны быть отправлены на сервер, где их обрабатывает
CGI-программа, то указывать FORM обязательно. То же самое обстоит и в случае обработки
данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной параметр тега <INPUT>, определяющий вид
элемента — type.
Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radiobutton),
флажок (checkbox),
скрытое поле (hidden),
кнопка (button),
кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла
(file) и
кнопка с изображением (image).
Для каждого элемента существует свой список параметров, которые определяют его
вид и характеристики.
Параметры
Align: Определяет выравнивание изображения.
Alt: Альтернативный текст для кнопки с
изображением.
Border: Толщина рамки вокруг изображения.
Checked: Предварительно активированный переключатель
или флажок.
Disabled: Блокирует доступ и изменение элемента.
Maxlength: Максимальное количество символов разрешенных
в тексте.
Name: Имя поля, предназначено для того, чтобы
обработчик формы мог его идентифицировать.
Readonly: Устанавливает, что поле не может изменяться
пользователем.
Size: Ширина текстового поля.
Value: Значение элемента.
Тег <OPTION> определяет
отдельные пункты списка, создаваемого с помощью контейнера <SELECT>. Ширина списка
определяется самым широким текстом, указанным в теге <OPTION>, а также может
изменяться с помощью стилей. Если планируется отправлять данные списка на
сервер, то требуется поместить элемент <SELECT> внутрь формы. Это также необходимо, когда к
данным списка идет обращение через скрипты.
Параметры
Selected: Заранее устанавливает определенный пункт
списка выделенным.
Value: Значение пункта списка, которое будет
отправлено на сервер или прочитано с помощью скриптов.
Тег <SELECT> позволяет создать элемент интерфейса в виде
раскрывающегося списка, а также список с одним или множественным выбором, как
показано далее. Конечный вид зависит от использования параметра size тега <SELECT>, который устанавливает высоту списка. Ширина
списка определяется самым широким текстом, указанным в теге <OPTION>, а также может
изменяться с помощью стилей. Каждый пункт создается с помощью тега <OPTION>,
который должен быть вложен в контейнер <SELECT>. Если планируется отправлять данные списка на
сервер, то требуется поместить элемент <SELECT> внутрь формы. Это также необходимо, когда к
данным списка идет обращение через скрипты.
Параметры
Disabled: Блокирует доступ и изменение элемента.
Multiple: Этот параметр позволяет одновременно
выбирать сразу несколько элементов списка.
Name: Имя элемента для отправки на сервер или
обращения через скрипты.
Size: Количество отображаемых строк списка.
Поле <TEXTAREA> представляет собой элемент формы для создания
области, в которую можно вводить несколько строк текста. В отличие от тега <INPUT> в
текстовом поле допустимо делать переносы строк, они сохраняются при отправке
данных на сервер.
Между тегами <TEXTAREA> и
</TEXTAREA>
можно поместить любой текст, который будет отображаться внутри поля.
Параметры
Cols: Ширина поля в символах.
Disabled: Блокирует доступ и изменение элемента.
Name: Имя поля, предназначено для того, чтобы
обработчик формы мог его идентифицировать.
Readonly: Устанавливает, что поле не может изменяться
пользователем.
Rows: Высота поля в строках текста.
Wrap: Параметры переноса строк.
Основная
информация по тегам и их использование представлена в следующем электронном справочнике