Параметры
disabled |
Блокирует доступ и изменение элемента. |
type |
Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы. |
value |
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов |
.
Закрывающий тег
Обязателен.
Пример 1. Использование тега <BUTTON>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег BUTTON</title>
</head>
<body>
<p style="text-align: center"><button>Кнопка с контентом</button>
<button><img src="/images/umbrella.gif" alt="Зонтик" style="vertical-align: middle"> Кнопка с рисунком</button></p>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Вид кнопок в браузере Опера
Описание параметров тега <BUTTON>
Параметр DISABLED
Описание
Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты.
Синтаксис
<button disabled>...</button>
Аргументы
Нет.
Значение по умолчанию
По умолчанию это значение выключено.
Пример 2. Использование параметра disabled
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег BUTTON, параметр disabled</title>
</head>
<body>
<form action="/ШТМЛ/button.ШТМЛ">
<p><button>Активная кнопка</button>
<button disabled>Неактивная кнопка</button></p>
</form>
</body>
</html>
Результат данного примера продемонстрирован на рис. 2.
Рис. 2. Вид активной и неактивной кнопки
Параметр TYPE
Описание
Определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.
Синтаксис
<button type="button | reset | submit">...</button>
Аргументы
button |
Обычная кнопка. |
reset |
нопка для очистки введенных данных формы и возвращения значений в первоначальное состояние. |
submit |
Кнопка для отправки данных формы на сервер. |
Значение по умолчанию
button
Пример 3. Использование параметра type
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег BUTTON, параметр type</title>
</head>
<body>
<form action="/ШТМЛ/example/handler.php">
<p><input type="text" name="user"></p>
<p><button type="reset">Очистить форму</button>
<button type="submit">Отправить форму</button></p>
</form>
</body>
</html>
Параметр VALUE
Описание
Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задается параметром name тега <BUTTON>, а значение — параметром value. Значение может, как совпадать с контентом на кнопке, так быть и самостоятельным. Также параметр value применяется для доступа к данным через скрипты.
Синтаксис
<button value="значение">...</button>
Аргументы
Любая контентовая строка.
Значение по умолчанию
Нет.
Пример 4. Значение кнопки
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег BUTTON, параметр value</title>
</head>
<body>
<form action="/ШТМЛ/example/handler.php">
<p><input type="text" name="user"></p>
<p><button value="11111010101" name="hidden" type="submit">Отправить форму</button></p>
</form>
</body>
</html>
Переход на Web-страницу
<HTML>
<BODY>
<INPUT type=button value="Поисковая система"
onclick="location.href='http://www.google.ru';"
</BODY>
</HTML>
Поле ввода
//Поле ввода и кнопка
<HTML>
<HEAD>
<TITLE>Greetings</TITLE> <SCRIPT language=javascript>
<!--
function Hi() {
var name = frmMy.txtName.value;
if (name=="") {
alert("Вы забыли ввести имя");
frmMy.txtName.focus;
}
else
{
alert("Привет, " + name);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name=frmMy>
<TABLE cellPadding=1 cellSpacing=1">
<TR>
<TD><FONT color=red><STRONG>BBeдите Ваше имя </STRONG></FONT> </TD>
<TD><INPUT name=txtName></TD>
</TR>
<TR>
<TD><INPUT name=cmdHi onclick="Hi()" type=button value="Нажмите сюда"></TD>
<TD></TD>
</TR>
</TABLE>
</FORM>
<BODY>
<HTML>
Цветовое выделение поля ввода и текста
Для лучшей визуализации очередного поля ввода, в котором набирается текст, его обычно временно выделяют цветом, отличным от цвета других полей ввода. Кроме того, при редактировании уже введенного текста в поле ввода при получении им фокуса весь текст, как правило, автоматически выделяется. Добиться этого можно посредством обработки событий onfocus и onblur поля ввода. Как это делается, продемонстрировано в следующем коде.
<HTML>
<BODY>
<TITLE>Выделение поля ввода</TITLE>
<SCRIPT language=javascript>
function selectlt(textField) {
textField.style.backgroundColor="yellow";
textField.select();
}
function deselectlt(textField) {
textField.style.backgroundColor="white";
}
function submitlt() {
var msg = "";
msg += document.frm.fName.value +"\n";
msg += document.frm.IName.value +"\n";
msg += document.frm.email.value +"\n";
alert(msg);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name=frm>
<TABLE>
<TR>
<TD>Имя
<TD><INPUT type="text" name=lName
onfocus="selectIt(this)" onblur="deselectIt(this)">
</TR>
<TR>
<TD>E-mail
<TD><INPUT type="text" name=email ontocus="selectIt(this)" onblur="deselectIt(this)">
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>