htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > Формы по шагам > Кнопки

Шаг 7. Кнопки

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

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

Кнопку на веб-странице можно создать двумя способами — с помощью тега <INPUT> и тега <BUTTON>.

Рассмотрим вначале добавление кнопки через <INPUT> и его синтаксис.

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

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

Табл. 7.1. Параметры кнопок
Параметр Описание
name Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value Значение кнопки и одновременно надпись на ней.

Создание кнопки с разными параметрами показано в примере 7.1.

Пример 7.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="handler.php">
   <p><input type="button" name="press" value=" Нажми меня нежно "></p>
  </form>
 </body>
</html>

В результате получим следующее.

В надписи на кнопке можно ставить пробелы в любом количестве, за счет них можно регулировать ее ширину.

Второй способ создания кнопки основан на использовании тега <BUTTON>. Он по своему действию напоминает результат, получаемый с помощью тега <INPUT>. В отличие от этого тега, <BUTTON> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения и таблицы.Ниже показаны разные виды кнопок, полученные с помощью указанного тега.

 

В примере 7.2 показано создание кнопки с текстом и рисунком.

Пример 7.2. Кнопки, созданные с помощью тега <BUTTON>

<!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="handler.php"> 
     <p>
      <button>Кнопка с текстом</button>
      <button><img src="/images/umbrella.gif" width="25" height="32" alt="Зонтик"> Кнопка с рисунком</button>
    </p>
  </form> 
 </body>
</html>

В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера <BUTTON>, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования <INPUT>, ширину кнопки изменить не удастся.

Кнопка SUBMIT

Для отправки данных на сервер предназначена специальная кнопка SUBMIT. Ее вид ничем не отличается от других кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной параметром action тега <FORM>. Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, гостевых книг, тестов и многих других вещей.

Синтаксис создания кнопки SUBMIT зависит от используемого тега <INPUT> или <BUTTON>.

<input type="submit" параметры>
<button type="submit">Надпись на кнопке</button>

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

Пример 7.3. Кнопка для отправки данных на сервер

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

Параметр name для этого типа кнопки может быть опущен. Если значение параметра value не указывать, на кнопке автоматически появится надпись «Подача запроса» для русской версии браузера Internet Explorer, «Отправить запрос» для русской версии Firefox или «Submit Query» для Netscape.

Кнопка RESET

При нажатии на кнопку RESET, данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Для больших форм от использования кнопки RESET лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придется заполнять форму заново.

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset" параметры>
<button type="reset">Надпись на кнопке</button>

В примере 7.4 показана форма с одним текстовым полем, которое уже содержит предварительно введенный текст с помощью параметра value тега <INPUT>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нем снова появится надпись «Введите текст».

Пример 7.4. Кнопка для очистки формы

<!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="handler.php">
    <p><input type="text" value="Введите текст"></p>
    <p><input type="submit" value="Отправить"><input type="reset" value="Очистить"></p>
  </form>
 </body>
</html>

Значение кнопки RESET никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать параметр value, на кнопке по умолчанию будет добавлен текст «Сброс» или «Reset».

Статья опубликована: 12.08.2005 Последнее обновление: 12.11.2008
Формы по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru