Кнопка із зображенням

Кнопки із зображеннями аналогічні за дією кнопці Submit, але являють собою малюнок. Це розширює можливості дизайнерських вишукувань з оформлення форми. Коли користувач натискає на малюнок, дані форми відправляються на сервер і обробляються програмою, заданої параметром action тега <FORM>.

Зображення в формі створюється наступним чином.

<input type = "image" параметри>

Параметри поля перераховані в таблиці.

параметр опис
name

Ім'я поля. Призначено для обробника форми, щоб він міг ідентифікувати це поле.

src URL картинки (шлях до графічного файлу).
align Вирівнювання поля. Можливі значення: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат їх використання точно такий же, як і у зображень.
width Ширина зображення.
height Висота зображення.
vspace Вертикальні відступи навколо зображення зверху і знизу в пікселах.
hspace Горизонтальні відступи навколо зображення зліва і справа в пікселах.
border Визначає товщину рамки в пікселях навколо зображення.

Створення кнопки з зображенням показаний в прикладі 1. Таблиця застосовується для вирівнювання елементів.

Приклад 1. Використання кнопок із зображенням

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Кнопка із зображенням </ title>
</ Head>
<Body>

<Form action = "/ cgi-bin / handler.cgi">
<Table>
<Tr> <td colspan = "2"> Введіть ваше ім'я: </ td> </ tr>
<Tr>
<Td> <input type = "text" size = "25"> </ td>
<td> <input type = "image" src = "/ images / imgbutton.gif"> </ td>
</ Tr>
</ Table>
</ Form>

</ Body>
</ Html>

В результаті отримаємо наступне (рис. 1).

Мал. 1

Мал. 1. Кнопка для відправки форми на сервер

Copyright що кредитують © www.htmlbook.ru