Создание кнопок на web-странице
Еще одно частое применение графических элементов — это оформление кнопок. Кнопка — это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет.
Выделяют три типа кнопок:
кнопки отправки: При активизации такой кнопки производится отправка формы. В форме может быть несколько кнопок отправки.
кнопки сброса: При активизации такой кнопки для всех управляющих элементов устанавливаются исходные значения.
прочие кнопки: Для таких кнопок действие по умолчанию не определено. С атрибутами событий каждой такой кнопки могут быть связаны клиентские скрипты. Если происходит событие (например, пользователь нажимает кнопку, отпускает ее и т.д.), включается связанный с событием скрипт.
Необходимо определять язык скрипта для кнопок в объявлении скрипта по умолчанию (в элементе META).
Кнопки создаются с помощью элемента BUTTON или INPUT. Элемент BUTTON предоставляет более широкие возможности представления кнопки, чем элемент INPUT.
Чтобы создать кнопку, достаточно поместить некоторый текст между тегами <BUTTON> и </BUTTON>, например, вот так:
<BUTTON>ЭТO KHОПKА</BUTTON>
Правда, из этого совершенно не следует, что при нажатии на этой кнопке что-нибудь произойдет.
Однако кнопка будет вполне полноценной и даже будет “вдавливаться” при нажатии.
Интереснее тот факт, что между тегами <BUTTON>...</BUTTON> можно поместить не только текст, а все, что угодно. Если мы поместим туда тег <IMG>, то получим кнопку с графическим изображением. Можно поместить на кнопку и текст, и изображение (только не надо забывать о форматировании — например, надо вставлять теги <BR> для переноса строк и т. д.). Наконец, как показано в следующем примере, можно поместить на кнопку вообще любой блок НТМL! В нашем примере мы поместили туда целую таблицу с разноцветными клетками.
Пример оформления кнопок:
<HTML>
<HEAD>
<TITLE>KHOПKИ</TITLE>
<STYLE>
TD {color: white;}
</STYLE>
</HEAD>
<BODY>
<BUTTON>ПРОСТО КНОПКА</BUTTON>
<BR><BR>
<button><img SRC="notre_dame.gif" BORDER="0" WIDTH="26"
HEIGHT="23" ALT="картинка"></BUTTON><BR><BR>
<BUTTON>Internet Explorer<BR>
<IMG SRC="eif.JPG" WIDTH="62" HEIGHT="61" BORDER="0"><BR> 4.0 </BUTTON><BR><BR>
<BUTTON><H1> Это большая кнопка</Н1>
<TABLE ALIGN="center" BGCOLOR="#408080" WIDTH="280" CELLSPACING="2" CELLPADDING="2"
BORDER="3">
<TR>
<TD ALIGN="center" BGCOLOR-"#400040">Oнa содержит</ТD>
<TD ALIGN="center">целую таблицу</ТR> </TR> <TR>
<TD ALIGN="center">c разноцветными</ТD>
<TD ALIGN="center" BGCOLOR="#400040">Клеточки</TD> </TR>
</TABLE>
<BR>И ГОРИЗОНТАЛЬНУЮ ЛИНИЮ <HR WIDTH="400" SIZE="10" COLOR="Navy"> </BUTTON>
</BODY>
</HTML>
Тег <STYLE>, был использован в этом примере для того, чтобы более быстрым способом отобразить белыми буквами текст в ячейках таблицы.
Применение кнопок очень разнообразно. В следующем примере кнопки используются для смены цвета фона документа:
<html>
<head>
<title>bgcolor</title>
</head>
<body text=000000 bgcolor=ffffff>
<table border=0 align=center>
<tr><td><form>
<input type=button value="красный" onClick="document.bgColor='red'">
<input type=button value="желтый" onClick="document.bgColor='yellow'">
<input type=button value="синий" onClick="document.bgColor='0000ff'">
<input type=button value="голубой" onClick="document.bgColor='blue'">
<input type=button value="коралловый" onClick="document.bgColor='ff7f50'">
</form></td>
</table>
</body>
</html>
