Формы: Кнопки. Создание кнопок. Урок 18. Кнопки создаются при помощи тега <input />. Используя разные значения атрибута type можно создать следующие кнопки. Кнопка сброса информации type="reset". При ее нажатии происходит сброс информации во всех полях формы в первоначальное состояние. Кнопка отправки информации type="submit". При ее нажатии происходит отправка информации в обработчик. Кнопка простая type="button". По умолчанию при ее нажатии ничего не происходит. Функционал задается программным путем (Javascript).
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
18. Формы: Кнопки. Создание кнопок.
Кнопки создаются при помощи тега <input />. Используя разные значения атрибута type можно создать следующие кнопки:
Напишем теперь коды для установки на тестовую страничку:
Наша тестовая страничка после данного урока:
article_018.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_018.zip ← скачайте пример, чтобы установить на свой сайт...
Потренируйтесь теперь понажимать разные типы кнопок на тестовой страничке. Обратите внимание, что нажатия кнопок type="submit" и type="image" вызывают ошибки. Это объясняется тем, что мы прописали в форму обработчик запроса, но никак его пока еще не подготовили и не настроили.
- type="reset" - Кнопка сброса информации. При ее нажатии происходит сброс информации во всех полях формы в первоначальное состояние. Надпись на кнопке создается с помощью атрибута value, если атрибут value отсутствует то на кнопке будет дефолтная запись Сброс.
- type="submit" - Кнопка отправки информации. При ее нажатии происходит отправка информации в обработчик, который задан в атрибуте action="formdata.php" тега <form>. Надпись на кнопке создается с помощью атрибута value, если атрибут value отсутствует то на кнопке будет дефолтная запись Отправить запрос.
- type="image" - Кнопка отправки информации графическая. При ее нажатии происходит отправка информации в обработчик, который задан в атрибуте action="formdata.php" тега <form>. Необходим атрибут src="images/ibutton.png", который указывает, где находится графический файл для данной кнопки. Если путь к графическому файлу указан неверно, то вместо кнопки будет отображен текст из атрибута value, если атрибут value отсутствует то будет отображена дефолтная запись Отправить запрос.
- type="button" - Кнопка простая. По умолчанию при ее нажатии ничего не происходит. Функционал задается программным путем (Javascript). Надпись на кнопке создается с помощью атрибута value, если атрибут value отсутствует то на кнопке не будет никакой надписи. Данную кнопку можно использовать вне формы.
Напишем теперь коды для установки на тестовую страничку:
<p><input type="reset" name="reset" value="Сброс..." /><input type="submit" name="submit" value="Отправить!"/></p> <p><input type="image" src="images/ibutton.png" name="imageButton" value="Кнопка Графическая" /></p> <p><input type="button" name="button" value="Кнопка. Просто кнопка." /></p>
article_018.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_018.zip ← скачайте пример, чтобы установить на свой сайт...
Потренируйтесь теперь понажимать разные типы кнопок на тестовой страничке. Обратите внимание, что нажатия кнопок type="submit" и type="image" вызывают ошибки. Это объясняется тем, что мы прописали в форму обработчик запроса, но никак его пока еще не подготовили и не настроили.
*** Машина-Функционал для передвижения по страничкам курса HTML ***
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок_05 :: Урок_06 :: Урок_07 :: Урок_08 :: Урок_09 :: Урок_10 :: Урок_11 :: Урок_12 :: Урок_13 :: Урок_14 :: Урок_15 :: Урок_16 :: Урок_17 :: Урок 18
Следующие странички, рекомендуемые для посещения и изучения:
Урок 19
Страничка сделана на основе контента курса HTML сайта kocby.ru