Веб Навсегда.инфоHTML-теги → BUTTON

Реклама


!!! Ваша ссылка здесь всего за 10 руб в месяц на всех страницах сайта!!!

BUTTON

Описание элемента

Тег, позволяющий создавать кнопки на странице.

По сути, результат этого тега, очень напоминает результат тега INPUT, с соответствующим значением параметра type. Но данный тег предпочтительнее использовать, т.к. он предлагает более расширенный вариант кнопки. В частности в нём можно использовать не только текст, но и другие веб элементы. Т.е. теоретически кнопкой можно сделать всю веб-страницу.
Естественно, что вид кнопки можно очень хорошо настроить с помощью CSS.

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

Синтаксис

<button {type value}={"тип" | "значение"} {disabled}>Видимый текст</button>

Возможные параметры

type - устанавливает тип кнопки.

value - Задаёт значение кнопки.

disabled - Блокирует кнопку.

Параметр TYPE

Задаёт тип кнопки и её поведение. См. Пример №1.

Возможные аргументы:
button
- просто обычная кнопка.
submit - кнопка для отправки данных формы на сервер.
reset - кнопка, очищающая форму от заполнения (возвращающая первоначальные значения)

Значение по умолчанию:
button.

Параметр VALUE

Определяет значение кнопки, которое будет отправлено на сервер в качестве имени (name кнопки). Этот параметр не обязательно должен содержать тот же текст, что и сама кнопка и он часто используется для доступа к данным через скрипты. См. Пример №2.

ВНИМАНИЕ:
Этот параметр не поддерживается браузером Internet Explorer всех версий..

Возможные аргументы:
Любая текстовая строка из латинских символов и цифр.

Значение по умолчанию:
Отсутствует.

Параметр DISABLED

Блокирует кнопку. Т.е. кнопка, при использовании этого параметра, будет неактивна, её нельзя будет нажать и следовательно отправить данные через форму. Как правило этот параметр изменяется через скрипты. См. Пример №3.

Возможные аргументы:
Любая текстовая строка из латинских символов и цифр.

Значение по умолчанию:
Отсутствует.

Примеры использования

Пример № 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Пример использования тега BUTTON, параметр TYPE</title>
</head>
<body>


<form action="/obrabotchik.php">
Значение: <input name="test" value="значение">
<p><button type="reset">Очистить форму</button> <button type="submit">Отправить форму</button></p>
</form>

</body>

</html>


 

Пример № 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Пример использования тега BUTTON, параметр VALUE</title>
</head>
<body>

<form action="/obrabotchik.php">
Значение: <input name="test" value="значение">
<button value="yes" name="hidden" type="submit">Отправить форму</button>
</form>
<p>И через скрытую от глаз пользователя кнопку будет отправлено значение "yes"...</p>

</body>

</html>


 

Пример № 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Пример использования тега BUTTON, параметр DISABLED</title>
</head>
<body>


<form action="/obrabotchik.php">
Значение: <input name="test" value="значение">
<button>Активная кнопка</button>
<button disabled>Неактивная кнопка с рисунком <img src="img/button.gif"></button>
</form>

</body>

</html>