<input type="image">

Елементи <input> типу image (зображення) використовуються для створення графічних кнопок подання, тобто таких, що приймають форму зображення, а не тексту.

Спробуйте його в дії

Значення

Елементи <input type="image"> не приймають атрибутів value. Шлях до зображення для виведення задається в атрибуті src.

Додаткові атрибути

На додачу до атрибутів, спільних для всіх елементів <input>, кнопкові поля image підтримують наступні.

alt

Атрибут alt надає альтернативний рядок, що використовується як підпис кнопки, якщо зображення не може бути показано (у зв'язку з помилкою або тим, що користувацький агент не здатний або налаштований не показувати зображення, або тим, що користувач використовує пристрій читання з екрана). Якщо цей атрибут є, то він повинен бути непорожнім рядком, доцільним як підпис кнопки.

Наприклад, якщо є графічна кнопка, що показує зображення з піктограмою чи зображення тексту "Ввійти зараз", то також слід задати атрибут alt з чимось типу Ввійти зараз.

[!NOTE] Хоч технічно атрибут alt є необов'язковим, його слід включати завжди, аби максимізувати зручність користування вмістом.

Технічно атрибут alt елемента <input type="image"> працює так само, як атрибут alt елементів <img>.

formaction

Рядок, що вказує URL для подання даних. Має пріоритет над атрибутом action елемента <form>, що є власником <input>.

Цей атрибут також доступний на елементах <input type="submit"> і <button>.

formenctype

Рядок, що визначає метод кодування для подання даних форми на сервер. Є три дозволені значення:

application/x-www-form-urlencoded

Це усталене значення надсилає дані форми як рядок, піддавши текст відсотковому кодуванню за допомогою алгоритму, подібного до encodeURI().

multipart/form-data

Використовує для керування даними API FormData даючи змогу подавати на сервер файли. Це значення необхідно використовувати, якщо в формі є будь-які елементи <input> з атрибутом type, чиє значення – file (<input type="file">).

text/plain

Простий текст; здебільшого корисне лише для зневадження, щоб можна було легко бачити дані, що подаються.

Якщо цей атрибут задано, то його значення заміщає атрибут action форми-власника.

Також цей атрибут доступний на елементах <input type="submit"> і <button>.

formmethod

Рядок, що вказує метод HTTP, що використовується при поданні даних форми; це значення заміщає атрибут method, заданий на формі-власнику. Дозволені значення:

get

URL формується, починаючи від URL, заданої атрибутом formaction або action, далі додається символ знаку питання ("?"), після чого додаються дані форми, закодовані так, як описано в formenctype або атрибуті enctype форми. Потім цей URL надсилається на сервер за допомогою запиту HTTP get. Цей метод добре працює для простих форм, що містять лише символи ASCII та не мають побічних ефектів. Це усталене значення.

post

Дані форми включаються в тіло запиту, що надсилається за URL, заданою атрибутом formaction або action за допомогою запиту HTTP post. Цей метод підтримує складні дані та файлові прикріплення.

dialog

Цей метод використовується, аби вказати, що кнопка закриває діалог, з яким пов'язане поле, і взагалі не передає дані форми.

Також цей атрибут доступний на елементах <input type="submit"> і <button>.

formnovalidate

Булів атрибут, котрий, якщо присутній, то задає те, що форма не повинна валідуватися перед поданням на сервер. Він заміщає значення атрибута novalidate форми-власника елемента.

Також цей атрибут доступний на елементах <input type="submit"> і <button>.

formtarget

Рядок, що задає ім'я або ключове слово, що вказує на те, де виводити відповідь, отриману після подання форми. Рядок повинен бути ім'ям контексту перегляду (тобто вкладки, вікна або <iframe>. Задане цим атрибутом значення заміщає цільовий контекст, заданий атрибутом target елемента <form>, що є власником поля.

На додачу до реальних імен вкладок, вікон чи вбудованих фреймів, є кілька особливих ключових слів, що також можуть бути використані:

_self

Завантажує відповідь в той самий контекст перегляду, що й той, що містить поточну форму. Це замінить поточний документ отриманими даними. Це усталене значення, що використовується, якщо нічого не задано.

_blank

Завантажує відповідь у новий, безіменний контекст перегляду. Здебільшого це нова вкладка в тому самому вікні, що й поточний документ, але може бути й не так, залежно від налаштувань користувацького агента.

_parent

Завантажує відповідь у батьківський щодо поточного контекст перегляду. Якщо такого контексту немає, то спрацьовує так само, як _self.

_top

Завантажує відповідь у контекст перегляду найвищого рівня; це контекст перегляду, що є найстаршим предком поточного. Якщо поточний контекст є найвищим, то спрацьовує так само, як _self.

Також цей атрибут доступний на елементах <input type="submit"> і <button>.

height

Число, що задає висоту, в пікселях CSS, з якою візуалізується зображення, задане атрибутом src.

src

Рядок, що задає URL файлу зображення для виведення для представлення графічної кнопки подання. Коли користувач взаємодіє з зображенням, то поле спрацьовує так само, як будь-яке інше кнопкове поле.

width

Число, що задає ширину, з якою візуалізується зображення, в пікселях CSS.

Застарілі атрибути

Наступні атрибути були означені для полів image стандартом HTML 4, але не були реалізовані всіма браузерами, а тому стали нерекомендованими.

usemap

Якщо заданий атрибут usemap, то це повинно бути ім'я елемента карти зображення, <map>, що означує карту зображення для використання вкупі з таким зображенням. Його використання – застаріла практика; при потребі використовувати карти зображень слід перейти на використання елементів <img>.

Застосування полів-зображень

Елемент <input type="image"> є заміщеним елементом (елементом, чий вміст не є ані породженим, ані безпосередньо керованим з боку шару CSS), що поводиться практично так само, як звичайний елемент <img>, але має також можливості кнопки подання.

Суттєві можливості полів-зображень

Погляньмо на базовий приклад, що включає всі суттєві можливості, котрі можуть знадобитися (Вони працюють так само, як в елемента <img>.):

<input
  id="image"
  type="image"
  width="100"
  height="30"
  alt="Увійти"
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" />

• Атрибут src використовується для задання шляху до зображення, котре повинно бути показано в кнопці.
• Атрибут alt надає альтернативний текст для зображення, щоб користувачі читачів з екрана могли краще зрозуміти, для чого потрібна така кнопка. Також цей текст буде виведений, якщо зображення з якоїсь причини не може бути показано (наприклад, якщо в шляху присутня помилка). Якщо це можливо, то слід використовувати текст, що збігається з підписом, який використовувався б, якби використовувалася стандартна кнопка подання.
• Атрибути width і height використовуються для задання ширини та висоти, з якими повинно бути показано зображення, в пікселях. Кнопка має такий само розмір, як зображення; якщо потрібно, щоб зона спрацювання кнопки була більшою за зображення, то слід для цього використати CSS (наприклад, padding). Крім цього, якщо задати лише одну розмірність, то інша розмірність підлаштовується так, щоб зображення зберігало власне співвідношення сторін.

Заміщення усталеної поведінки форми

Елементи <input type="image">, подібно до звичайних кнопок подання, можуть приймати низку атрибутів, що заміщають усталену поведінку форми:

formaction

URI програми, що обробляє інформацію, подану елементом-полем; заміщає атрибут action форми-власника, котрій належить елемент.

formenctype

Задає тип вмісту, що використовується для подання форми на сервер. Можливі значення:

• application/x-www-form-urlencoded: Усталене значення, якщо атрибут не задано.
• text/plain.

Якщо цей атрибут задано, то він заміщає атрибут enctype форми-власника, котрій належить елемент.

formmethod

Задає метод HTTP, котрий браузер використовує для подання форми. Можливі значення:

• post: Дані з форми додаються в тіло форми й надсилаються на сервер.
• get: Дані з форми додаються до URI з атрибута елемента form, з '?' як розділювачем, і результівний URI надсилається на сервер. Цей метод слід використовувати, коли форма не має побічних ефектів і містить лише символи ASCII.

Якщо цей атрибут задано, то він заміщає атрибут method форми-власника, котрій належить елемент.

formnovalidate

Булів атрибут, що задає те, що форма не повинна валідуватися при поданні. Якщо задано цей атрибут, то він заміщає атрибут novalidate форми-власника, якій належить елемент.

formtarget

Назва або ключове слово, що вказує на те, де показувати відповідь, отриману після подання форми. Це назва або ключове слово, що позначає контекст перегляду (наприклад, вкладку, вікно, або вбудований фрейм). Якщо цей атрибут задано, то він заміщає атрибут target форми-власника елемента. Наступні ключові слова мають особливі значення:

• _self: Завантажити відповідь в поточний контекст перегляду. Це значення є усталеним, якщо атрибут не задано.
• _blank: Завантажити відповідь у новий, безіменний контекст перегляду.
• _parent: Завантажити відповідь у батьківський відносно поточного контекст перегляду. Якщо такого немає, то цей варіант працює так само, як _self.
• _top: Завантажити відповідь у найвищий контекст перегляду (тобто такий, що є предком поточного, а сам предка не має). Якщо батьківського контексту немає, то цей варіант працює так само, як _self.

Використання значень x та y

При поданні форми за допомогою кнопки, створеної як <input type="image">, то браузер автоматично подає на сервер дві додаткові порції даних – x та y. Це можна побачити в дії в нашому Прикладі з координатами X та Y.

При клацанні зображення для подання форми будуть помітні дані, додані до URL як параметри, наприклад, ?x=52&y=55. Якщо поле-зображення має атрибут name, то слід мати на увазі, що задане ім'я стає префіксом кожного атрибута, тож якщо name має значення position, то повернені координати будуть додані в URL як ?position.x=52&position.y=55. Це, звісно, застосовується також до всіх інших атрибутів.

Ці значення – координати X та Y на зображенні, де клацнули мишею при поданні форми, причому (0,0) – це верхній лівий кут зображення, а також усталене значення, коли подання відбувається без клацання на зображення. Вони можуть використовуватися, коли місце на зображенні, де відбулося клацання, є суттєвим, наприклад, може бути карта, котра, коли її клацнули, надсилає координати клацання на сервер. Потім серверний код з'ясовує, на яку місцевість клацнули, і повертає інформацію про місця поруч.

У прикладі вище можна написати серверний код, що з'ясовує, який колір клацнули, за поданими координатами, і зберігає статистику про улюблені кольори, за котрі голосують люди.

Підлаштування алгоритму розташування та масштабування зображення

Властивість object-position можна використовувати для підлаштування розташування зображення в рамці елемента <input>, а властивість object-fit – для контролю того, як розмір зображення підлаштовується для вписування в рамку. Це дає змогу задати рамку зображення за допомогою атрибутів width і height для виділення місця в розмітці, а потім підлаштувати те, де всередині цього простору повинно бути розташовано зображення, а також те, як (і чи) воно повинно масштабуватися, аби зайняти цей простір.

Приклади

Форма входу

Наступний приклад показує таку ж кнопку, як вище, але включає її в контекст типової форми входу.

HTML

<form>
  <p>Увійдіть у свій обліковий запис</p>
  <div>
    <label for="userId">Ідентифікатор користувача</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">Пароль</label>
    <input type="password" id="pwd" name="pwd" />
  </div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Увійти"
      width="100" />
  </div>
</form>

CSS

А тепер трохи простого CSS, аби базові елементи вляглися охайніше:

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

Підлаштування розташування та масштабування зображення

У цьому прикладі попередня реалізація змінюється, аби виділити для зображення більше простору, а потім підлаштувати його фактичний розмір і розташування за допомогою object-fit і object-position.

HTML

<form>
  <p>Увійдіть у свій обліковий запис</p>
  <div>
    <label for="userId">Ідентифікатор користувача</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">Пароль</label>
    <input type="password" id="pwd" name="pwd" />
  </div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Увійти"
      width="200"
      height="100" />
  </div>
</form>

CSS

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

#image {
  object-position: right top;
  object-fit: contain;
  background-color: #ddd;
}

Тут object-position налаштована для візуалізації зображення в верхньому правому куті елемента, а object-fit має значення contain, що вказує на те, що зображення повинно бути візуалізовано з найбільшим розміром, що може вписатися в рамки елемента без змін його співвідношення сторін. Зверніть увагу на помітне сіре тло елемента в тій його частині, котра не вкрита зображенням.

Технічний підсумок

Специфікації

Сумісність із браузерами

Дивіться також

• <input> та інтерфейс HTMLInputElement, котрий його реалізовує.
• Елемент HTML <img>
• Розташування та розмір зображення всередині рамки елемента <input>: object-position і object-fit
• Сумісність властивостей CSS