Кнопки

Влад Мержевич

Кнопка — это элемент интерфейса, на который нужно нажимать. Создается следующим образом.

Параметры кнопки перечислены в табл. 1.

Табл. 1. Параметры кнопки
Параметр	Описание
name	Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. Параметр name может быть опущен, в этом случае значение кнопки не передается на сервер.
value	Надпись на кнопке, а также ее значение.

Использование параметров и создание обычных кнопок показано в примере 1.

Пример 1. Создание кнопки

<!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">
<p style="text-align: center"><input type="button" name="press" value=" Нажми меня нежно "></p>
</form>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Вид кнопки в браузере Opera

В надписи на кнопке можно ставить пробелы в любом количестве.

Кнопка SUBMIT

Когда пользователь нажимает на эту кнопку, данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега <FORM>.

Параметры те же, что и у простых кнопок (пример 2).

Пример 2. Кнопка Submit

<!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">
<p>...</p>
<p><input type="submit"></p>
</form>
</body>
</html>

Вид кнопки показан на рис. 2.

Рис. 2

Рис. 2. Кнопка Submit

Параметр name для этого типа кнопки может быть опущен. Если значение параметра value не указывать, автоматически появится надпись Подача запроса (для браузера Internet Explorer), Отправить (для Opera) или Отправить запрос (для Firefox).

Кнопка RESET

При нажатии на эту кнопку, данные формы возвращаются в первоначальное значение.

Параметры совпадают с параметрами простых кнопок (пример 3).

Пример 3. Кнопка Reset

<!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">
<p><input type="text" size="20"> <input type="reset"></p>
</form>
</body>
</html>

Вид кнопки Reset и принцип ее действия показан ниже.

Рис. 3

Рис. 3. Кнопка Reset

Аналогично кнопке Submit, значение параметра name можно не указывать, тогда надпись Сброс на кнопке будет добавлена браузером автоматически.

Значение кнопки Reset никогда не пересылается на сервер.

Статья опубликована: 12.09.2005

Последнее обновление: 30.03.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

Arctos

29.11.2006

Это легко. А кнопки у вас не утапают при нажатии

Влад Мержевич

30.11.2006

Кнопки стандартные, значит, действия с ними тоже стандартные. Так что утопают они или нет - вопрос к операционной системе.

Йо!

18.02.2007

Как зделать кнопку, чтоб после нажатия на нее появлялся текст? Если можно напишите.

Тимур

19.03.2007

а где же тег <button>?

Влад Мержевич

20.03.2007

Про тег BUTTON читай здесь
http://stepbystep.htmlbook.ru/?id=18

Анна

22.03.2007

можно ли сделать форму так чтоб данные из нее не отправлялис на сервер а сразу печатались на странице?

Влад Мержевич

23.03.2007

Анна, с помощью JavaScript можно. Например, так. Создается новое окно, в котором формируется страница с данными формы, а затем она отправляется на печать методом window.print().

DarkSEO

11.04.2007

а подскажи плиз, как такую кнопку менять? (интересует фон)
<input name=file type=file>

Влад Мержевич

12.04.2007

DarkSEO

12.04.2007

да в том то и дело, что так меняется только фон поля, а не кнопки

Влад Мержевич

12.04.2007

Цвет кнопки для type="file" установить невозможно, это прерогатива системы.

27.06.2007

как сделать кнопку с сылкой на какую нибудь страницу

Влад Мержевич

28.06.2007

В комментариях к этой статье писалось.
http://stepbystep.htmlbook.ru/?id=18

Kalaputsa

13.07.2007

А можно как нибудь сделать, чтоб кнопка была не с углами, а немного углы были обтикаемыми

Kalaputsa

13.07.2007

А можно как нибудь сделать, чтоб кнопка была не с углами, а немного углы были обтикаемыми

Влад Мержевич

24.07.2007

Можно нарисовать любую кнопку и вставить ее как рисунок через <input type="image">

Дмитрий

16.08.2007

Можно ли для <input type="file"> заранее прописать файл, который должен пересылаться формой, даже если кнопку не нажимать? Если да, то как?

Влад Мержевич

23.08.2007

Нельзя.

Дмитрий

28.08.2007

А с помощью javascript нельзя ли имитировать такой выбор файла?

STAS

23.09.2007

Можно ли уменьшить размер кнопки, не уменьшая value, и как?

STAS

23.09.2007

И еще, у вас косяк в комментариях, если выделить любой комментарий(только с серенького фона а не с белого, как мой предыдущий), а затем ткнуть мышкой на другое место страницы, то ранее выделенный текст комментария "исчезнет", поменяв цвет на цвет серенького фона. И вообще достаточно интересно они себя ведут при выделении мышкой... Браузер IE.

Влад Мержевич

26.09.2007

Используйте стилевые параметры height и width.
Глюк интересный, буду разбираться, почему происходит.

Paulleng

23.01.2008

<input type="file"...> выводит на экран форму для открытия файла - а как сделать чтоб вместо ОТКРЫТЬ было СОХРАНИТЬ?

Anderson

30.01.2008

Кто знает, как сделать кнопку submit ввиде ссылки?

Дущ

30.01.2008

вместо открыть сохранить....Value="сохранить" попробуй..

Petra PeeX

08.02.2008

А как для <input type="file"> ограничить тип файлов которые можно выбрать? т.е. чтоб в окне открытия файла в поле фильтр/тип файла было указанно например *.rar, *.jpg и т.д.

Влад Мержевич

19.02.2008

<input type="file"> - это стандартный элемент формы, менять его никак не получится.
Ограничить типы файлов можно на стороне сервера, но в любом случае файл вначале придет на сервер, после чего программа проанализирует его содержимое.

Dmitriy_S

01.03.2008

В каком-то скрипте видел, что ограничить тип файла можно через JScript, сначала проверка на тип, потом отправка на сервер... Довольно надежно получается если проверять еще и на сервере.

Михаил

03.04.2008

А можно как-нибудь сделать перенос текста в кнопке, чтоб текст был скажем в 2 строки?

Александра

03.05.2008

Подскажите, как сделать так, чтобы информация с опроса отправлялась с помощью кнопки на емаил?
С ув. Александра

Алексей

14.05.2008

А можно ли изменять границу формы ввода?

Pre6

18.05.2008

aleksandra vsmesto tega script pisi svoi email

eniken

05.08.2008

Подскажите - как зделать чтобы при нажатии на кнопку заданный текст копировался в буфер обмена?
Пример: Вы можете разместить на сво?м сайте ссылку на наш сайт <а>.........</а> |Копировать код ссылки|

Кнопки

Кнопка SUBMIT

Кнопка RESET

Комментарии к статье

Добавить комментарий