www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Формы > Кнопки

Кнопки

контентовая версия  

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

<input type="button" параметры>

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

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

Использование параметров и создание обычных кнопок показано в примере 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">
<p style="text-align: center"><input type="button" name="press" value="  Нажми меня нежно  "></p>
</form>
</body>
</html>

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

Рис. 1

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

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

Кнопка SUBMIT

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

<input type="submit" параметры>

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

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

Валидный 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">
<p>...</p>
<p><input type="submit"></p>
</form>
</body>
</html>

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

Рис. 2

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

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

Кнопка RESET

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

<input type="reset" параметры>

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

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

Валидный 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">
<p><input type="text" size="20"> <input type="reset"></p>
</form>
</body>
</html>

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

Рис. 3

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

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

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

Статья опубликована: 12.09.2009 Последнее обновление: 30.03.2009
Поиск по сайту
Формы
Разделы
Теги по теме

BUTTON
Тег BUTTON создает на web-странице кнопки различного типа. На таких кнопках может располагаться не только контент, но рисунки и таблицы.

INPUT
Тег INPUT является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект