Основы работы с XHTML и CSS
Тег <button>
Тег <button> обеспечивает универсальность в создании кнопок. Его можно настроить как кнопку submit, как кнопку reset или как кнопку общего назначения. Как контейнерный тег, он может охватывать любой текст или код XHTML для вывода текста и/или графики на поверхности кнопки. Общая форма этого тега показана ниже:
<button type="submit|reset|button" id="id" name="name" [onclick="script"] > ...текст и теги XHTML </button>
Листинг 11.31. Общая форма тега <button> (html, txt)
При определении как type="submit" или type="reset", кнопка работает как любая другая кнопка submit или reset. При определении как type="button", она требует, чтобы сценарий браузера выполнил действие при щелчке мышью, и для активации сценария необходим обработчик событий onclick.
Метка кнопки помещается между открывающим и закрывающим тегами. Это может быть простая текстовая метка, или могут кодироваться теги XHTML, которые задают на кнопке текст или размещают графическое изображение.
Следующая кнопка общего назначения иллюстрирует компоновку, использующую теги XHTML для задания графического изображения и текста для лицевой поверхности кнопки. Кнопка активирует встроенные операторы JavaScript для вывода и сокрытия изображения в линейном фрейме.
Рис. 11.26. Использование тега <button> для активации сценария
<style type="text/css"> button {float:left; height:100px; width:180px; border:outset 3px; margin-right:10px} span#Title {font-family:impact; font-size:14pt; color:#DAA520} span#Text {font-family:verdana; font-size:10pt} img {width:50px; height:39px} iframe {width:225px; height:185px; border:outset 10; margin-right:65px} </style>
<button type="button" onclick=" if (document.getElementById('Text').innerText == 'View Picture') { document.getElementById('Picture').src='W-Colossus.gif' document.getElementById('Text').innerText='Hide Picture' } else if (document.getElementById('Text').innerText == 'Hide Picture') { document.getElementById('Picture').src='' document.getElementById('Text').innerText='View Picture' }" > <span id="Title">Colassus of Rhodes</span><br/> <img src="T-Colossus.gif" alt="View Colossus of Rhodes"/><br/> <span id="Text">View Picture</span> </button>
<iframe id="Picture" scrolling="no"></iframe>
Листинг 11.32. Код для оформления и программирования тега <button> (html, txt)
Отметим, что выводимые на кнопке текст и изображение кодируются между открывающим и закрывающим тегами <button> почти таким же образом, как они кодировались бы на странице. (Примечание. Тег <iframe> кодируется обычно с атрибутом name, который идентифицирует его как получателя для ссылок. Так как программируется фрейм, то для ссылок в сценарии задается id.)
