Кнопка с изображением
Кнопки с изображениями аналогичны по действию кнопке Submit, но представляют собой рисунок. Это расширяет возможности дизайнерских изысков по оформлению формы. Когда пользователь нажимает на рисунок, данные формы отправляются на сервер и обрабатываются программой, заданной параметром action тега <FORM>.
Изображение в форме создается следующим образом.
Параметры поля перечислены в таблице.
| Параметр | Описание |
|---|---|
| name |
Имя поля. Предназначено для обработчика формы, чтобы он мог идентифицировать это поле. |
| src | URL картинки (путь к графическому файлу). |
| align | Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений. |
| width | Ширина изображения. |
| height | Высота изображения. |
| vspace | Вертикальные отступы вокруг изображения сверху и снизу в пикселах. |
| hspace | Горизонтальные отступы вокруг изображения слева и справа в пикселах. |
| border | Определяет толщину рамки в пикселах вокруг изображения. |
Создание кнопки с изображением показан в примере 1. Таблица применяется для выравнивания элементов.
Пример 1. Использование кнопок с изображением
<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. Кнопка для отправки формы на сервер
| Статья опубликована: 12.09.2005 | Последнее обновление: 30.03.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Громов Алексей
22.04.2006
Анисимов Иван
13.06.2006
Лучше же еще написать, как с этой проблемой бороться. А не просто выкладывать пример, который не работает.lone
27.07.2007
Аноним
04.08.2007
stasykk
23.09.2007
И в Опере эта операция не работаетВиктор
09.02.2008
<input type="image" src="grader.png" id="submit" value="Кнопка" />
Раньше я кнопки css-ом менял, фон и текст, а теперь картинка - делай какую хочешь. Код придумал не сам, а стащил с одного сайта