Добавляем...


Кнопки
В HTML есть три основных типа кнопок: submit (подача запроса), reset (сброс) и обычные кнопки. Четвертый тип — это кнопка-изображение, а пятый — обобщенный кнопочный элемент. Последние два типа слегка отличаются от базовых типов.
Все три основных типа кнопок определяются с помощью многофункционального дескриптора <input> (X)HTML. Так, <input type="submit" /> используется для создания кнопки Подача запроса, <input type=" reset" /> — для создания кнопки Сброс, a <input type="button" /> — для создания обычной кнопки. Чтобы указать текст на кнопке, задайте значение атрибута value; например, <input type="button" value="Нажмите здесь!" />.
Этими общими атрибутами не следует пренебрегать — их можно использовать для улучшения внешнего вида и удобства использования кнопок, как демонстрируется ниже:

<form> <input type="button" value="Нажмите здесь" name="buttonl" id="buttonl" title="Пожалуйста, щелкните на мне, прошу вас!" style="background-color: red; color: white;" accesskey="c" /> </form>

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

Таблица. Дополнительный метод элементов input типа "submit", "reset" и "button"
Метод Описание
click() Имитирует щелчок на кнопке, вызывая действие, предусмотренное для нее по умолчанию

Кроме свойств и методов, общих для всех элементов ввода, эти кнопки имеют дополнительный метод click(), описание которого содержится в таблице. С помощью низова метода click() можно имитировать "щелчок" на кнопке. Как и в случае других элементов ввода, можно передать фокус ввода кнопке, используя метод focus(), и убрать с нее фокус ввода, используя blur(). Часто браузер визуально выделяет кнопку, имеющую фокус ввода. Например, в Internet Explorer при этом по контуру кнопи видна пунктирная линия.
Следующий простой пример демонстрирует действие методов и событий для кнопок.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Проверка кнопок </title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
<form action="http://www.javascriptref.com" method="get" name="testform" id="testform" onreset="return confirm('Очистить поля?');" onsubmit="return confirm('Отправить форму?');">

<1аЬе1>Поле 1:
<input type="text' value="пример текста" /><1аЬе1>
<br /><br />
<1аЬе1>Поле 2:
<input type="text" /></label>
<br /><br />
<input type="reset" value="Очистить поля" onclick="alert('нажато');" />
<input type="submit" value="Отправить" name="thesubmit" id="thesubmit" onclick="alert('нажато');" />
<input type="button" value="Oбычнaя кнопка" onclick="alert('нажато');" />
<input type="button" value="Фокyc на кнопку 'Отправить'" onclick="document.testform.thesubmit.focus();" />
<input type="button" value='У6paть фокус с кнопки 'Отправить'" onclick="document.testform.thesubmit.blur();" />
<input type="button" vа1ue="Нажать кнопку 'Отправить'" onclick="document.testform.thesubmit.click();" />
</form>
</body>
</html>

Помните о том, что кнопки (и вообще все элементы формы) должны определяться только в рамках дескриптора <form>. Хотя Internet Explorer позволяет использование элементов формы в любом месте документа, браузеры, подчиняющиеся стандартам, не выполняют визуализацию элементов полей формы за пределами дескриптора <form>.

Кнопки-изображения

Простой серый вид кнопок Подача запроса, Сброс и обычных кнопок, предлаемых стандартным (X)HTML, часто не удовлетворяет разработчиков. Очень удобные возможности "оживления" таких кнопок обеспечиваются средствами CSS. Но некоторые разработчики предпочитают использовать кнопки-изображения. Язык разметки предлагает несколько вариантов создания кнопок-изображений. Можно, например использовать дескриптор <img /> в рамках ссылки, обеспечивающей запуск соответсвующего программного кода JavaScript. Например:

<a href="javascript:document.myform.submit();"><img src="images/submit.gif" width="55" height="21" border="0" alt="Отправить данные" /></а>

В качестве альтернативы можно использовать поле формы <input type="image"/>. В (X)HTML с помощью такого поля можно создать графическую кнопку Подача запроса:

input type="image" name="testbutton" id="testbutton" src="../images/button.gif" alt="Отправить данные"/>

Уникальные свойства кнопок-изображений представлены в таблице. В частности, обратите внимание на то, что с помощью атрибута usemap кнопки-изображения но использовать в графических картах ссылок. Однако, независимо от использования атрибута usemap, графические кнопки Подача запроса всегда возвращают значения x b y, соответствующие пиксельным координатам указателя мыши при щелчке на изображении.

Таблица. Дополнительные свойства элементов input типа "image"
Свойство Описание
alt Текстовая альтернатива кнопки для браузеров, не обеспечивающих графического представления
src Адрес URL изображения, используемого в качестве кнопки
useMap Указывает, что данная кнопка используется в графической карте ссылок клиента

Обобщенные кнопки

HTML 4 и XHTML поддерживают дескриптор <button>, который оказывается траздо более гибким, чем <input>, обеспечивая возможность создания визуально более интересных кнопок. Основной синтаксис дескриптора <button> следующий:

<button type ="button|reset|submit" id="имя кнопки" name="имя кнопки" value="значение для подачи запроса">
Содержимое кнопки </button>

Вот два примера использования <button>:

<button type="submit" name="mybutton" id="mybutton">
<em>Да, сэр, я - кнопка подачи запроса!</em>
<button>
<button type="button" name="mybutton2" id="mybutton2">
<img src="button.gif" border="0" alt="Кнопка!" />
</button>

Поддерживая указанный выше основной синтаксис, DOM уровня 1 определяет соответствующий объект HTMLButtonElement, свойства которого паказаны в таблице.

Таблица. Свойства объекта HTMLButtonElement, представляющего дескриптор </button>
Свойство Описание
accessKey Содержит строку клавиши быстрого доступа
disabled Логическое значение, указывающее доступность поля
form Ссылка на объемлющий объект Form
name Имя поля (для него также используется id)
tabIndex Целое значение, соответствующее значению атрибута tabindex и указывающее позицию кнопки с точки зрения порядка переходов по табуляции
type Указывает тип кнопки: "button", "reset" или "submit"
value Значение, посылаемое серверу при подаче запроса формы

События получения и потери фокуса ввода могут обрабатываться как обычно — с помощью обработчиков событий onfocus и onblur. События и методы, связанные со щелчком кнопки мыши, также обычно поддерживаются браузерами. Однако, не смотря на присутствие в стандартах консорциума W3C, дескриптор </button> неадекватно обрабатывается старыми браузерами (в часности, Netscape 4), так что разработчикам рекомендуется использовать дескрипторы <input type="submit" /> или же имитировать действия кнопок формы, используя ссылки и изображения.
назад:
далее:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика