|
|
|
Графические элементы в формахОднажды, устав от созерцания набившего оскомину интерфейса, я увидел на домашней странице Netscape Corp. формы, роль кнопок в которых играли приятные, радующие глаз изображения. Делается это не просто. Точнее говоря - очень просто. Элемент ввода выглядит следубщим образом: <INPUT TYPE="IMAGE" SRC="images/submit.gif" WIDTH=42 HEIGHT=22 BORDER=0> Таким образом мы реализовываем самый простой случай. В данном виде графическая кнопка может выполнять только функцию Submit. Но кроме нее существует еще масса действий, которые могут выполняться при нажатии на кнопку. Можно, конечно, написать пару скриптов для реализации других функций, но сегодня нас интересуют только возможности, которые нам предоставляет HTML без скриптов. Существует гораздо более мощный элемент <BUTTON>. Выглядит он следующим образом: <BUTTON атрибуты>;...</BUTTON>; Атрибуты элемента <BUTTON> довольно разнообразны, но на сегодня нам нужны только три: name, value и type. Атрибут type может принимать три значения: submit, reset и button, которые определяют действия при нажатии на данную кнопку: выполнить действия, указанные в ACTION элемента FORM, очистить форму и выполнить какие-либо действия (так называемая push button), соответственно. Внутри элемента <BUTTON> можно указывать как текст, так и изображение. В общем случае, в элементе <BUTTON> могут быть применены любые методы форматирования HTML, что показано на следующем примере: Код в этом случае выглядит так:
<FORM ACTION="javascript:alert('test!')">
<BUTTON TYPE="SUBMIT">
<IMG SRC="images/home.gif" WIDTH=19 HEIGHT=20 ALIGN="ABSMIDDLE"
BORDER=0 ALT=""> <SPAN STYLE="font-size: 8pt">
<SPAN STYLE="text-decoration: underline">H</SPAN>ome,
sweet home</SPAN></BUTTON>
</FORM>
К сожалению, Netscape Navigator не поддерживает элемент <BUTTON>. Или, может быть, мне не удалось заставить его сделать это? |
