[form] HTML - <input type="image"> 태그 - 이미지로 된 submit 버튼 (= 인풋이미지타입/이미지타입인풋 요소) ※ 이미지서브미트/이미지서브밋

1. <input type="image"> 예제 - 이미지로 된 submit 버튼
2. <input type="image"> 정의
3. <input type="image"> 구문
4. <input type="image"> 예제 - 이미지 INPUT 우측 정렬

<input type="image"> 예제 - 이미지로 된 submit 버튼

 

<form action="/action_page.php">

  <label for="name">이름: </label>

  <input type="text" id="name" name="name"><br><br>

  <label for="nick">별명: </label>

  <input type="text" id="nick" name="nick"><br><br>

  <input type="image" src="submit.gif" alt="확인" width="50" height="40">

</form>

 

결과보기 (※ 전송키값쌍:  name=홈짱&nick=닷컴&x=33&y=8)

<input type="image"> 정의

 

submit (제출/전송) 기능하는 이미지로 된 INPUT 버튼.

 

---

 

1.

• 이미지 주소는 src 속성에 지정함.
• 서버 제출 시, 이미지 클릭한 마우스커서의 x,y 좌표값이 전달됨.

 

2.

주요 브라우저 모두 지원.

 

3. MDN <input type="image"> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

 

<input type="image"> 구문

 

<input type="image" src="imgURL">

 

<input type="image"> 예제 - 이미지 INPUT 우측 정렬

 

<form action="/action_page.php">

  <label for="name">이름: </label>

  <input type="text" id="name" name="name"> 

  <label for="nick">별명: </label>

  <input type="text" id="nick" name="nick"> 

  <input type="image" src="submit.gif" alt="확인" width="50" height="40" style="float:right">

</form>

결과보기