티스토리 뷰
1. 개념
input type = image,button,file - 이미지 버튼, 버튼 , 파일 첨부
image 타입 : submit 버튼 대신 전송 이미지를 삽입하여서 사용할 수 있음
button 타입 : 버튼 형태를 만들어서 사용이 가능하고 여기에는 submit이나 reset과 같은 기능은 없음
file 타입 : 파일을 첨부하여 사용 가능
2. 태그
input type = image,button,file
html5 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <! DOCTYPE html> <html lang = "kr" > <head> <meta charset = "utf-8" > <title> 키보드와 하루 </title> </head> <body> <form> <label> image 필드 : </label> <input type = "image" src = "search.png" alt = "전송 이미지" ><br><br> <label> button 필드 : </label> <input type = "button" value = "버튼" ><br><br> <label> file 필드 : </label> <input type = "file" > </form> </body> </html> |
결과 화면
코드 설명
<input type = "image" ...... >
image 타입에서 중요한 것은 submit 버튼
대신이라는 것입니다.
이 뜻은 이것을 눌렀을 때 폼을 서버 프로그램으로 전송한는 submit과 똑같은 역할을 한다는 것입니다.
대신 submit 처럼 버튼으로 되어 있는 것을 좀 더 눈에 보기에 좋은 디자인으로 바꾸기 위해서 image 타입을 사용한다는 것입니다.
<input type = "button" ...... >
button 타입은 자체 아무런 기능이 없습니다.
그렇기 때문에 button 타입에 id를 설정해 주고 javascript나 jquery로 해당하는 id에 이벤트 처리를 해주시면 됩니다.
<input type = "file" ...... >
file 타입은 파일을 첨부하게 됩니다.
예를 들어서 엑셀을 업로드해서 php로 받아서 DB에 입력하고자 할 경우에 이 file 업로드 기능을 사용하게 됩니다.
'[개발]프로그래밍 > html5' 카테고리의 다른 글
2021.02.17 |
2021.02.16 |
2021.02.10 |
2021.02.09 |
2021.02.08 |
« 2022/11 »
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Total994,699Today3Yesterday1,569
[Front-End] 프론트엔드/[html5] 2018. 8. 25. 안녕하세요.
html5의 <input> 태그는 다양한 속성을 지원합니다. <input> 태그를 사용하여 사용자의 입력을 처리할 수 있습니다. <input> 태그의 type="image" 속성을 사용하여 이미지를 넣을 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <head> <title>codeomni.tistory.com html5 input image button 이미지 버튼 소스 코드 예제</title> <style> body { background-color: #9adaca;
} </style> </head> <body> <div> <h2>codeomni.tistory</h2> <input type="image" name="button" src="image.jpg">
</div> </body> </html>cs
실행 화면입니다.