<input type="image">

<input> 태그의 type="image"는 텍스트가 아닌 이미지로 표시되는 양식 제출 버튼입니다.
표시할 이미지의 경로는 src 속성으로 지정합니다.

이 이미지 버튼을 클릭하면 해당 요소의 좌표와 해당 요소가 포함되어 있는 <form> 태그로 나타내는 양식의 모든 컨트롤의 값을 제출합니다.

컨트롤이란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>, <textarea>, <select>등 사용자가 데이터를 입력하고, 선택하고, 제출하는 등의 작업을 할 수 있는 요소들이 해당됩니다.

HTML 
<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <input type="image" alt="Submit" src="/submit.png">
</form>
브라우저에서 실제 표시된 모습

<input type="image">의 암시적인 role 속성의 값은 button입니다.

관련 속성 사용하기

<input type="image">과 관련된 속성에 대해 알아보겠습니다.
다음은 모든 <input> 태그에 공통으로 사용되는 여러 가지 속성 외에도, 다음의 속성을 추가로 지원합니다.

input tpe="image"의 관련 속성
속성설명
src 필수 속성이며, 표시하려는 이미지 소스(source)의 경로(URL)를 지정합니다.
alt 표시하려는 이미지의 대체 텍스트(alternative text)를 지정합니다. 선택적(옵션)으로 사용할 수 있습니다.
width 이미지의 픽셀 기준 고유 너비를 지정합니다. 단위가 없는 정수로 지정합니다.
height 이미지의 픽셀 기준 고유 높이를 지정합니다. 단위가 없는 정수로 지정합니다.
name 양식(<form>)이 제출될 때 전송되는 해당 버튼의 좌표에 사용되는 식별자를 지정합니다.

src 속성

필수 속성이며, 삽입하려는 이미지 소스(source)의 경로(URL)를 지정합니다.

지원하는 이미지 형식

HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않지만, src 속성으로 웹 페이지에 삽입 수 있는 이미지 파일 유형은 일부 제한이 있다는 것을 명심해야 합니다. 각각의 브라우저마다 서로 다른 형식을 지원하는 경우가 있습니다.

지원하는 이미지 형식은 <img> 태그의 src 속성에서 사용할 수 있는 이미지 형식과 동일합니다.

alt 속성

이미지의 대체 텍스트(alternative text)를 지정합니다. 선택적(옵션)으로 사용할 수 있습니다.
시각장애인을 위한 스크린 리더를 사용하는 사용자에게 이미지 대신 사용자가 이해할 수 있는 대체 텍스트로 설명할 수 있어서 웹 접근성 차원에서 매우 유용합니다. 또한 일부 브라우저(예를 들어, 크롬)에서는 네트워크 오류, 콘텐츠 차단 등 어떤 이유로 이미지를 표시할 수 없는 경우에 이 속성의 값을 텍스트로 대신 보여줍니다.

HTML 
<input type="image" alt="Submit" src="/submit.png">

width 속성

이미지의 픽셀 기준 고유 너비를 지정합니다. 단위가 없는 정수로 지정합니다.

HTML 
<input type="image" alt="Submit" src="/submit.png" width="150">
브라우저에서 실제 표시된 모습
  • width 속성을 설정하지 않으면, 이미지는 원래 크기로 표시됩니다.
  • 이미지의 width와 height 속성을 동시에 설정하면, 비율을 유지하지 않고 지정된 크기로 이미지를 표시합니다. 이로 인해 이미지가 왜곡될 수 있습니다.
  • width 속성만 설정하고 height 속성을 설정하지 않으면, 이미지는 원래 비율을 유지하면서 너비에 맞춰 크기가 조정됩니다.

HTML의 width 속성과 CSS의 width 스타일 속성을 함께 사용하면 CSS가 우선합니다. CSS는 HTML 속성보다 높은 우선순위를 가지므로, CSS로 이미지의 너비를 스타일하면 HTML width 속성은 무시됩니다.

height 속성

이미지의 픽셀 기준 고유 높이를 지정합니다. 단위가 없는 정수로 지정합니다.

HTML 
<input type="image" alt="Submit" src="/submit.png" height="25">
브라우저에서 실제 표시된 모습
  • height 속성을 설정하지 않으면, 이미지는 원래 크기로 표시됩니다.
  • 이미지의 width와 height 속성을 동시에 설정하면, 비율을 유지하지 않고 지정된 크기로 이미지를 표시합니다. 이로 인해 이미지가 왜곡될 수 있습니다.
  • height 속성만 설정하고 width 속성을 설정하지 않으면, 이미지는 원래 비율을 유지하면서 높이에 맞춰 크기가 조정됩니다.

HTML의 height 속성과 CSS의 height 스타일 속성을 함께 사용하면 CSS가 우선합니다. CSS는 HTML 속성보다 높은 우선순위를 가지므로, CSS로 이미지의 높이를 스타일하면 HTML height 속성은 무시됩니다.

name 속성

양식(<form>)이 제출될 때 전송되는 해당 버튼의 좌표에 사용되는 식별자를 지정합니다.

<input type="image"> 버튼을 사용하여 양식을 제출하면 URL에 매개변수로 데이터가 추가합니다. (예: ?x=15&y=20)

name 속성에 지정된 식별자와 함께 클릭 위치의 좌표값(x, y)이 데이터로 전송됩니다.

HTML 
<form action="/submit">
    <input type="image" src="submit.png" alt="Submit" name="submitbtn">
</form>

만약 사용자가 위 이미지 버튼을 클릭했다면, 전송되는 데이터의 식별자는 다음과 같습니다. (예: ?submitbtn.x=15&submitbtn.y=20)

  • submitbtn.x: 클릭한 x좌표
  • submitbtn.y: 클릭한 y좌표

스타일의 한계점

<input> 태그의 type="image"는 해당 요소가 포함되어 있는 양식의 모든 입력값을 제출하는데 있어서 완벽히 유효하지만, 이와 동일한 기능을 하는 HTML의 <button type="submit">이 있습니다.

이미지로 표시되는 이 버튼의 스타일에는 많은 한계점이 있습니다. 동적인 구현이 불가능하며, 유지보수에도 제한점이 많습니다.

또한, <input> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</input>)가 없다는 의미입니다.

<button> 태그는 닫는 태그(</button>)가 있어 하위 콘텐츠를 가질 수 있습니다.
하위 콘텐츠를 가질 수 있기 때문에 레이블에 HTML이나 이미지를 포함할 수 있어서 스타일적으로 더 많은 것을 할 수 있습니다.

<input> 태그의 type="image"는 현대적인 CSS 기술과 자바스크립트 기술이 있기 전에는 많이 사용했지만, 현재는 거의 사용되지 않습니다.

브라우저 호환성

input type 속성의 image 값에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="image"> 1 12 1 1

명세서

input type 속성의 image 값에 대한 명세서 사양
명세서 사양
<input type="image"> HTML Standard
#image-button-state-(type=image)

참고문헌

같이 보기