Генератор HTML Image Input

Создание кнопки HTML Image Input онлайн

Генератор HTML Image Input создаёт элемент <input type="image">, то есть кнопку отправки формы, отображаемую в виде изображения. Задайте URL, Name, Alt text, Height, Width и Autofocus. Предварительный просмотр, HTML-код и C#-код обновляются одновременно.

В отличие от элемента <img>, Image Input запускает отправку формы. При нажатии на изображение браузер может передать вместе с данными формы выбранные координаты x и y.

Создание HTML Image Input на C#

На панели C# показано, как создать настроенную кнопку отправки с изображением с помощью Aspose.HTML for .NET . Сгенерированный код выполняет следующие действия.

1. Создаёт HTMLDocument и с помощью CreateElement() создаёт HTMLInputElement .
2. Задаёт свойству Type значение image, затем указывает URL изображения, name и непустой атрибут alt.
3. Задаёт выбранные размеры и необязательный атрибут autofocus.
4. Добавляет элемент методом AppendChild() и сохраняет файл image-input.html методом Save() .

Сначала настройте кнопку с изображением, а затем скопируйте обновлённый C#-код в свой проект .NET.

Вопросы о генераторе HTML Image Input

1. Чем <input type="image"> отличается от <img>?

Image Input – это кнопка отправки формы, внешний вид которой задаётся изображением. Элемент <img> встраивает изображение в содержимое документа и при активации не отправляет форму.

2. Какие значения отправляет Image Input?

Элемент отправляет координаты выбранной точки изображения как два значения, имена которых образуются от атрибута name. Например, элемент с именем checkout создаёт значения checkout.x и checkout.y.

3. Почему атрибут alt должен содержать текст?

Этот текст служит подписью кнопки для пользователей и программ, которые не могут использовать изображение. Описывайте действие, например «Войти» или «Найти», а не внешний вид изображения.

4. Почему кнопка с изображением ничего не отправляет в окне предпросмотра?

Для отправки данных созданный элемент должен принадлежать форме. При добавлении на целевую страницу поместите скопированный <input type="image"> внутрь <form> или свяжите его с формой другим предусмотренным способом.

5. Следует ли включать Autofocus для кнопки с изображением?

Используйте Autofocus только при необходимости. Автоматический перенос фокуса может дезориентировать пользователей клавиатуры и вспомогательных технологий, а на странице не должно быть нескольких конкурирующих целей автофокуса.

Установка Aspose.HTML for .NET

Установите Aspose.HTML for .NET из NuGet с помощью .NET CLI:

dotnet add package Aspose.HTML

Также можно использовать интерфейс диспетчера пакетов NuGet или выполнить Install-Package Aspose.HTML в консоли диспетчера пакетов. Подробные инструкции приведены в руководстве по установке . Чтобы протестировать API без ограничений ознакомительной версии, запросите временную лицензию .