티스토리 뷰

[개발]프로그래밍/html5

[html5] input type = image,button,file - 이미지 버튼, 버튼 , 파일 첨부

좋은 블로그 2021. 2. 15. 11:05
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>
1
<label> image 필드 : </label>
<input type = "image" src = "search.png" alt = "전송 이미지" ><br><br>
2
<label> button 필드 : </label>
<input type = "button" value = "버튼" ><br><br>
3
<label> file 필드 : </label>
<input type = "file" >
</form>
</body>
</html>
결과 화면
코드 설명
1
<input type = "image" ...... >
image 타입에서 중요한 것은 submit 버튼 대신이라는 것입니다.
이 뜻은 이것을 눌렀을 때 폼을 서버 프로그램으로 전송한는 submit과 똑같은 역할을 한다는 것입니다.
대신 submit 처럼 버튼으로 되어 있는 것을 좀 더 눈에 보기에 좋은 디자인으로 바꾸기 위해서 image 타입을 사용한다는 것입니다.
2
<input type = "button" ...... >
button 타입은 자체 아무런 기능이 없습니다.
그렇기 때문에 button 타입에 id를 설정해 주고 javascript나 jquery로 해당하는 id에 이벤트 처리를 해주시면 됩니다.
3
<input type = "file" ...... >
file 타입은 파일을 첨부하게 됩니다.
예를 들어서 엑셀을 업로드해서 php로 받아서 DB에 입력하고자 할 경우에 이 file 업로드 기능을 사용하게 됩니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] readonly,required - 읽기 전용,필수 값 지정  (0) 2021.02.17
[html5] autofocus,placeholder - 커서 위치,힌트 표시  (0) 2021.02.16
[html5] input type = time,datetime-local,submit,reset - 시간,날짜와시간,전송,재작성  (0) 2021.02.10
[html5] input type = color,date,month,week - 색상,날짜,월,주  (0) 2021.02.09
[html5] input type = number,range,radio,checkbox - 숫자,슬라이드 막대,라디오,체크박스  (0) 2021.02.08
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday