Когда следует использовать элемент Button. Использование элемента button

Кнопку можно задать с помощью парного тега ... . Внутри элемента button можно размещать другие HTML-элементы, так что можно сделать кнопку с текстом и рисунком.

Атрибуты тега

autofocus Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами: ... ... ...

Disabled Блокирует кнопку. Используется, когда кнопка становится активной только после выполнения определенных условий. Значение можно задать тремя способами: ... ... ... form Идентификатор формы, к которой относится кнопка.

Атрибут не работает в Internet Explorer.

Formaction Адрес, куда пересылаются данные формы при нажатии на кнопку. Если для тега

указан атрибут action , то атрибут formaction переопределяет его значение. Используется только для кнопок типа submit .

Атрибут не работает в Internet Explorer версии 9 и ниже.

Formenctype Способ кодирования данных формы. Используется только для кнопок типа submit . Возможные значения:

• application/x-www-form-urlencoded – Символы кодируются перед отправкой (значение по умолчанию).
• multipart/form-data – Символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
• text/plain – пробелы преобразуются в символ "+", символы не кодируются.

Атрибут не работает в Internet Explorer версии 9 и ниже.

Formmethod Метод пересылки данных формы. Используется только для кнопок типа submit . Возможные значения:

• get – данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение,
• post – данные формы передаются отдельно, как HTTP.

Если для тега указан атрибут method , то атрибут formmethod переопределяет его значение.

Атрибут не работает в Internet Explorer версии 9 и ниже.

Formnovalidate Отмена проверки формы на корректность. Используется только для кнопок типа submit . Значение можно задать тремя способами: ... ... ...

Атрибут не работает в Internet Explorer версии 9 и ниже.

Formtarget Место, где будет отображен результат отправки формы. Используется только для кнопок типа submit . Возможные значения:

• _blank – В новом окне или вкладке,
• _self – В текущем окне (по умолчанию),
• _parent – В родительском фрейме (если фреймов нет, то это значение работает как _self ),
• _top – В полном окне браузера, отменяя все фреймы (если фреймов нет, то это значение работает как _self ),
• имя_фрейма – В iframe с указанным именем.

Атрибут не работает в Internet Explorer версии 9 и ниже.

Name Имя кнопки. type Тип кнопки. Возможные значения:

• button – Просто кнопка (по умолчанию),
• submit – Кнопка завершения работы и передачи данных,
• reset – Кнопка сброса.

value Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Пример кнопки с рисунком

Кто это?

Описание

HTML тег создает кнопку, похожую на кнопку элемента со значением submit, reset, button или image атрибута type. Однако, в отличие от элемента , элемент не относится к пустым элементам, то есть у него есть открывающий и закрывающий тег, между которыми можно расположить текст, изображения или другие HTML-элементы.

Когда браузер отображает элемент

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

Примечание: для изменения стандартного вида курсора при наведении на кнопку используйте CSS свойство cursor .

Атрибуты

autofocus: Указывает браузеру, что кнопка должна получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами:

Disabled: Отключает возможность нажатия кнопки. Это можно использовать в случае, когда кнопка должна стать активной при выполнение определенных условий (например, при выборе флажка и тд.), сделать кнопку активной можно будет с помощью JavaScript. Значения для логического атрибута disabled можно задавать следующими способами: form: Указывает к какой форме относится данная кнопка. В качестве значения выступает один или несколько идентификаторов форм, разделенных пробелами. Количество идентификаторов в значении атрибута зависит от количества принадлежащих кнопке форм: Имя:
Фамилия:

Кнопка находится вне элемента form, но является частью формы.

Отправить

Примечание: атрибут не поддерживается в Internet Explorer.

Formaction: Определяет адрес, куда пересылаются данные формы при нажатии на кнопку. Если для формы указан атрибут action, то атрибут formaction переопределит его значение:

Имя:
Фамилия:
Отправить
Отправить от имени администратора

Атрибут formaction используется только для кнопок с атрибутом type="submit".

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

Formenctype: Указывает, каким способом данные формы должны быть закодированы перед отправкой на сервер. Используется только для кнопок с атрибутом type="submit". Возможные значения атрибута:

• application/x-www-form-urlencoded - все символы кодируются перед отправкой (значение по умолчанию).
• multipart/form-data - символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
• text/plain - пробелы преобразуются в символ "+", но символы не кодируются.

Имя:
Отправить с кодирование символов Отправить без кодирования символов

Если для формы указан атрибут enctype, то атрибут formenctype переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

Formmethod: Указывает, какой метод HTTP будет использован при отправке данных формы. Используется только для кнопок с атрибутом type="submit". Возможные значения атрибута:

• get - данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение
• post - отправляет данные формы, как HTTP после транзакции

Имя:
Фамилия:
Отправить Отправить используя POST

Если для формы указан атрибут method, то атрибут formmethod переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

Formnovalidate: Указывает, что данные формы не будут проверяться на корректность. Используется только для кнопок с атрибутом type="submit". Значения для логического атрибута autofocus можно задавать следующими способами: Если для формы указан атрибут novalidate, то атрибут formnovalidate переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях, и в Safari.

Formtarget: Указывает, где будет отображен ответ после отправки формы. Используется только для кнопок с атрибутом type="submit". Возможные значения атрибута:

• _blank - открывает ответ в новом окне или вкладке.
• _self - открывает ответ в той же директории, где располагается ссылка (значение по умолчанию).
• _parent - открывает ответ в родительском окне.
• _top - открывает ответ во всю ширину окна.
• имя_фрейма - открывает ответ в iframe, имя которого было указано в качестве значения.

Имя:
Фамилия:
Отправить Оправить и открыть ответ в новом окне

Если для формы указан атрибут target, то атрибут formtarget переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

Name: Указывает имя для элемента . Он используется для ссылки на данные формы после ее отправки, или для ссылки на элемент в JavaScript.

Выберите одно из двух:

HTML CSS

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

Type: Определяет тип кнопки:

• button - активная кнопка
• reset - кнопка, очищающая форму от введенных данных
• submit - кнопка для отправки данных формы (значение по умолчанию)

Имя:
Фамилия:

Отправить Стереть

Примечание: всегда указывайте атрибут type для кнопок, потому что различные браузеры могут использовать разные значения по умолчанию для атрибута type.

Value: Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Примечание: если вы используете элемент в HTML-форме, то IE7 и более ранние версии этого браузера, при отправке формы будут отправлять текст располагающийся между и . В то время как другие браузеры будут отправлять содержимое атрибута value.

Элемент button является более гибким, чем это может показаться на первый взгляд. Есть три способа, которыми вы можете использовать кнопку (button). Ключом к этим различным режимам работы является атрибут type , который имеет три значения. Они описаны в таблице .

Таблица 12-10: Значения атрибута type элемента button

В следующих разделах я опишу каждое из этих значений и функционал, который они предлагают.

Использование элемента button для отправки формы

Если атрибут type установлен на submit , при нажатии кнопки будет отправлена форма, которая содержит кнопку. Это поведение по умолчанию, если атрибут type не применяется. Когда вы используете кнопку таким образом, у вас есть доступ к некоторым дополнительными атрибутами, которые описаны в .

Таблица 12-11: Дополнительные атрибуты, которые можно использовать, если атрибут type установлен на submit

Атрибут	Описание
form	Определяет форму (или формы), с которой связана кнопка. Для более подробной информации смотрите раздел «Работа с элементами вне формы»
formaction	Переопределяет атрибут action элемента form и задает новый адрес, на который будет отправлена форма. Для более подробной информации по атрибуту action смотрите раздел «Настройка формы при помощи атрибута action» ранее в этой главе
formenctype	Переопределяет атрибут enctype элемента form и указывает кодировку для данных формы. Для более подробной информации по атрибуту enctype смотрите раздел «Настройка кодирования данных» ранее в этой главе
formmethod	Переопределяет атрибут method элемента form . Для более подробной информации по атрибуту method смотрите раздел «Использование атрибута method» ранее в этой главе
formtarget	Переопределяет атрибут target элемента form . Для более подробной информации по атрибуту target смотрите раздел «Указание цели для ответа формы» ранее в этой главе
formnovalidate	Переопределяет атрибут novalidate элемента form , чтобы указать, должна ли быть выполнена валидация со стороны клиента. Информацию по валидации вы можете узнать в главе 14

По большей части эти атрибуты позволяют изменить или дополнить конфигурацию элемента form и указать действие, метод, схему кодирования, цели, а также контролировать валидацию на стороне клиента. Эти атрибуты являются новым в HTML5. В показано, как можно применить эти атрибуты к элементу button .

Листинг 12-15: Использование атрибутов элемента button

Fruit:

Name:

type="submit" formaction="http://titan:8080/form" formmethod="post" > Submit Vote

В этом примере я опустил атрибуты action и method элемента form и добавил настройки при помощи атрибутов formaction и formmethod элемента button .

Использование элемента button для сброса формы

Если вы установите атрибут type на reset , то при нажатии кнопки все элементы ввода данных, которые присутствуют в форме, будут сброшены и возвращены в исходное состояние. Тут нет никаких дополнительных атрибутов, если элемент button используется таким образом. В показано добавление в документе HTML кнопки сброса.

Листинг 12-16: Использование элемента button для сброса формы

Fruit:

Name:

Submit Vote Reset

Рисунок 12-12: Добавление общего элемента button

(c атрибутом type = "button" ).

Атрибут type тега задает тип, используемой кнопки:

Всегда указывайте для тега тип атрибута type = "button" если элемент используется в качестве обычной кнопки. Если вы используете тег внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент для отправки HTML форм.

Кнопка 1



Кнопка 3

В данном примере мы разместили 3 кнопки , которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width ) размером 80 пикселей и высоту (height ) размером 50 пикселей:

• Текст внутри первой кнопки мы отформатировали жирным начертанием (тег ). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
• Внутри второй кнопки элементом мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
• Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег ).

Результат нашего примера:

Отключение кнопки

Атрибут disabled (HTML тега ) является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут используется совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.

Элемент активен Элемент отключен

В данном примере мы указали для второго элемента с типом кнопка (type = "button" ) атрибут disabled , который отключает элемент и не дает нам кликнуть по кнопке.

Автофокус на кнопке

В HTML 5 был добавлен такой логический атрибут как (HTML тега

) указывает, что кнопка должна автоматически получить фокус при загрузке страницы.

Обращаю Ваше внимание, что только один элемент в документе может иметь атрибут autofocus (браузер даст фокус тому элементу, который ближе расположен к началу документа, остальные просто будут игнорированы).

Давайте рассмотрим пример использования:

Кнопка Жми!!!

В данном примере мы создали две кнопки (HTML тег

Инструкция

Использование дескриптора добавляет на страницу кнопку с именем name и значением value. Атрибут name задает элементу уникальный идентификатор и используется для определения обработчиком формы его значения. Value выводит необходимый текст поверх. Например, для создания кнопки запишите следующий код:

Данная команда создаст кнопку с именем button и надписью «Отправка» на ней.

Дескриптор создает аналогичный элемент, однако предлагает для использования множество дополнительных параметров, которые могут понадобиться веб-разработчику. Так, поверх можно наложить таблицу или изображение, форматированный текст или список. Например:

Текст

Атрибут form задает идентификатор формы, который будет использоваться для обработки данных. Formaction устанавливает обработчик формы в другой части документа, другом файле или сайте. Formmethod отвечает за определение метода пересылки данных. Name задает имя кнопке, type – тип (обычная, для отправки данных или для очистки формы). Value – значение, которое будет считываться скриптами. На кнопке будет отображаться изображение с указанным адресом и текст.

Чтобы создать кнопку, которая будет обрабатывать введенные данные, необходимо в атрибуте указать соответствующий тип:

Чтобы создать кнопку, стирающую введенные пользователем данные, задайте type = “reset”.

Обратите внимание

Дескриптор должен обязательно использоваться в качестве содержимого тега

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

Чтобы организовать взаимодействие сайта с посетителем в его страницах надо предусмотреть возможности для ввода информации и отправки ее на сервер. Для этого в языке описания веб-страниц HTML (HyperText Markup Language - «язык разметки гипертекста») предусмотрен специальный набор тегов. Что это за теги и как, пользуясь ними создать в странице веб-форму для заполнения посетителем?

Вам понадобится

• Базовое знание языка HTML

Инструкция

HTML-теги, которые сообщают браузеру, что в этом месте страницы необходимо отобразить форму и ее элементы, размещаются в коде между открывающим тегом <.form> и закрывающим <./form>. Открывающий тег должен содержать обязательную информацию - атрибуты, сообщающие куда именно надо отправить информацию из формы и каким методом нужно это сделать. Кроме того, если страница содержит больше одной формы, то каждая должна иметь собственное имя. С учетом всего этого открывающий тег может выглядеть так:

После открывающего тега формы нам следует разместить элементы формы, которые больше подходят для ввода пользователем нужного типа данных. Такими элементами могут быть:Текстовое поле ввода:Здесь, как и во всех остальных тегах "input", атрибут "type" задает тип элемента, "name" - имя , которое будет отправлено вместе с введенными в это поле данными, а "value" - это значение по умолчанию, которым будет заполнено тестовое поле ввода. --Поле :--Поле для «метки с галочкой»:Здесь наличие атрибута "checked" , что по умолчанию галочка там будет стоять.--Группа переключателей, из которых нужно выбрать только один:
Обратите внимание - у всех элементов группы должно быть одинаковое имя (name), но разные значения (value). На будет передано только одно значение - то, которое отметит посетитель или то, что было выбрано по умолчанию (атрибутом checked).--Выпадающий список:
Поле первое
Поле второе
Поле третье
Здесь каждый тег "option" - в выпадающем списке. Как и для группы переключателей будет передано только одно значение из поля, выбранного посетителем, либо выбранного по умолчанию (здесь - атрибутом selected).--Многострочное текстовое поле:Здесь многострочный Атрибуты "cols" и "rows" задают ширину (в знаках) и высоту (в строках) поля для ввода текста.--Скрытое поле:Это поле не будет видно заполняющему форму , но тоже будет отправлено вместе с остальными данными.--Поле выбора файла для отправки:Отправка файла требует, чтобы в открывающем форму теге были дополнительные атрибуты. Как минимум, следует добавить тег "enctype". Например, так:и для отправки заполненной формы на сервер:Значение, указанное в атрибуте "value" для кнопок - это надпись на самой кнопке.