Красота требует форм!

УРОК «Как сделать различные типы кнопок»

Дорогие друзья!

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

Рассмотрим создание кнопки средствами HTML. Сразу же следует отметить, что, чтобы кнопка сработала и произошло нужное нам событие, чаще всего требуется программа-обработчик (скрипт). Но, например, для перехода на какую-нибудь страницу можно обойтись и без него.

Есть несколько типов кнопок, рассмотрим их по очереди:

• кнопка-баннер - мы рассматривали, как её создать, в одном из уроков, здесь всё просто: внутри ссылки на ресурс вместо текста ссылки помещается код изображения, которое может быть в виде кнопки, стрелки или чего-то другого:

  <a target="_blank" href="http://webmaster-html.ucoz.ru/load"><img src="http://webmaster-html.ucoz.ru/1/knopkaGO.png" alt="кнопка-переход к каталогу файлов" width="84" height="50" border="0"></a>

  Результат:

  

• кнопка с картинкой - при этом на кнопке будет выбранное вами изображение или анимация:

  <form action="АДРЕС ССЫЛКИ,КУДА ПЕРЕХОДИМ" target="_blank" method="get"><button type="submit"><img src="АДРЕС КАРТИНКИ (СТРОКА С РАДИКАЛА №1 или АДРЕС КАРТИНКИ НА СЕРВЕРЕ)" align=absMiddle>ТЕКСТ НА КНОПКЕ</button></form>

  Результат:

  КАРТА САЙТА

• кнопка для навигации - для её создания в качестве атрибута тега input используется атрибут type со значением submit:

  <form action="http://webmaster-html.ucoz.ru/index/kategoriihttp_webmaster_html_ucoz_ru_index_31_4_0_1_1/0-4" target="_blank" method="get"> <input type="submit" value="Перейти к карте сайта"> </form>

  Результат:

  В данном случае не требуется программа-обработчик, вы просто указываете в коде в значении атрибута action адрес ссылки на ресурс и при клике по кнопке переходите прямо туда.
  В значении атрибута value будет название кнопки.

• кнопка для отправки данных формы на сервер - в атрибуте type прописывается значение submit, но, в отличие от предыдущего типа кнопок, здесь используется программа-обработчик, путь к которому должен быть прописан в атрибуте action тега form:

  <form action="script.php" method="post"> <input type="submit" value="Подписаться" name="web-master"> </form>

  Результат:

• поле с изображением (например, картинкой красивой кнопки), при клике по которому,
  данные из формы будут отправлены в обработчик:

  <form action="script.php" method="post"> <input width="100" type="image" height="48" border="0" src="http://webmaster-html.ucoz.ru/1/knopka.png" name="WebMaster"> </form>

Результат:

До встречи в следующем уроке!