Перейти к основному содержанию

Генератор HTML-кнопки-изображения

API reference

Создайте графическую кнопку отправки <input type="image"> — укажите источник изображения, альтернативный текст и параметры отправки формы, затем скопируйте готовый HTML. Бесплатно, мгновенно, без ИИ.

Ввод

Используйте понятные имена в нижнем регистре с подчёркиваниями или дефисами для удобочитаемости (например, submit_image или image-button).

URL или путь к файлу изображения.

Альтернативный текст для доступности и на случай, если изображение не загрузится.

Настройки

Добавьте к элементу свои CSS-классы. Несколько классов разделяйте пробелами.

Вывод

HTML
 
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/html-generator/input-image \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "customName": "image-button",
    "customSrc": "https://example.com/button.png",
    "customAlt": "Submit",
    "customDisabled": "",
    "customWidth": "",
    "customHeight": "",
    "customValue": "Submit",
    "customFormaction": "",
    "customClasses": ""
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `html-generator__input-image` tool (HTML Input Image Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/html-generator/input-image/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор HTML-кнопки-изображения — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

Руководства

Создайте готовый к вставке <input type="image"> — графическую кнопку отправки, которая использует изображение вместо стандартного вида кнопки. Укажите источник изображения, альтернативный текст, размер и необязательные параметры отправки формы, затем скопируйте сгенерированный HTML.

Работает полностью в вашем браузере: без вызовов ИИ, без кредитов и без обращения к сети. Результат обновляется мгновенно по мере ввода.

Как пользоваться

  1. Укажите Имя, Источник изображения и Альтернативный текст.
  2. При необходимости задайте ширину/высоту или переопределите действие формы.
  3. Скопируйте или скачайте сгенерированный HTML.

Почему здесь нет <label>?

<input type="image"> — это графическая кнопка отправки, а не подписанное поле формы: её атрибут alt уже её описывает, а связка с <label> избыточна (и помечается большинством руководств по HTML как некорректная). Поэтому генератор намеренно не добавляет <label>.

Почему нет живого предпросмотра?

Результат — это необработанная разметка формы без санитизации; вывод её напрямую на страницу небезопасен. Вставьте код в свою страницу, чтобы увидеть его в контексте.

htmlinputimagebuttongeneratorform

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.