Html 버튼 이미지 넣기 - Html beoteun imiji neohgi

티스토리 뷰

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>

결과 화면

Html 버튼 이미지 넣기 - Html beoteun imiji neohgi

코드 설명

<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' 카테고리의 다른 글

[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

«   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.

Html 버튼 이미지 넣기 - Html beoteun imiji neohgi

안녕하세요.

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

Html 버튼 이미지 넣기 - Html beoteun imiji neohgi

실행 화면입니다.