Type image значение атрибут поля ввода input

Тип image в поле ввода input

1. Что такое type image html,
2. Пример использования type image html,

Скопировать ссылку



Что такое type image html.

У поля ввода есть типы передаваемых данных type, с разными значениями input

Одно из таких значении : "type image" - данный тип поля ввода идентичен полю submit, т.е. отправляет форму.

Синтаксис type image html.

<input type="image">

Характеристики типа type image .

"type image" - данный тип данных type image предназначен для отправки формы на сервер.


Как использовать данный type image на сайте.

HTML :

Добавим в атрибут "src" ссылку на картинку "https://dwweb.ru/__img/page/2020_11_20_07_58.png"

<input name="example2" type="image" src="https://dwweb.ru/__img/page/2020_11_20_07_58.png">

Результат:

Понадобится форма form.

Добавим еще одно поле hidden

<form method="post">
<input value="поле tipe hidden" type="hidden" name="example">
<input style="outline: unset;" type="image" src="https://dwweb.ru/__img/page/2020_11_20_07_58.png">
</form>


И еще одно поле ввода с другим типом submit

PHP :

Вам потребуется метод post.

Скопировать ссылку



Пример использования type image.

Простое условие, по которому будем получать данные из скрытого поля при нажатии на type image
if($_POST['example']) { $result = 'Вы нажали кнопку type image : '.strip_tags($_POST['example']) ;}


echo $result;

Соберем весь код вместе для type image:
Добавим стили : style="outline: unset;", чтобы обводка не показывалась во время нажатия на type image Html :
<form method="post">
<input value="поле tipe hidden" type="hidden" name="example">
<input style="outline: unset;" type="image" src="https://dwweb.ru/__img/page/2020_11_20_07_58.png">
</form>

Php : if($_POST['example']) { $result = 'Вы нажали кнопку type image : '.strip_tags($_POST['example']) ;}


echo $result;

Результат использования type image.

Прим автора

Что скажите товарищ автор!?

Сообщение системы комментирования :

Форма пока доступна только админу... скоро все заработает...надеюсь...