들어가기 전에
이전 강의에 이어 다양한 input type에 대해 알아보도록 하겠습니다.
핵심키워드
- type = "file"
- type = "submit"
- type = "image"
- type = "button"
학습하기
11) 폼 요소 2
type="file"
<input type="file">파일을 서버에 올릴 때 사용합니다.
브라우저에 따라 표현되는 형태는 조금씩 다르지만, 모두 같은 역할을 합니다.
type="submit|reset|image|button"
<form action="./test.html">
메시지: <input type="text" name="message"><br>
<input type="submit">
<input type="reset">
<input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
<input type="button" value="버튼">
</form>
submit, reset, image, button 타입은 모두 클릭 가능한 버튼을 만듭니다.
- submit : form의 값을 전송하는 버튼
- reset : form의 값을 초기화하는 버튼
- image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
- button : 아무 기능이 없는 버튼
이미지 버튼은 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/height 속성을 적용할 수도 있습니다.
그 밖에 다루지 않은 다른 타입들은 아래 링크를 참고하시기 바랍니다.
참고링크
- HTML elements reference
https://developer.mozilla.org
- This page lists all the HTML elements, which are created using tags.
comment
완료
감사합니다!
1.5
<!DOCTYPE html>
<html>
<head>
<title>폼 요소</title>
</head>
<body>
<input type="file">
<!-- 파일을 서버에 올릴 때 사용한다.-->
<form action="./test.html">
메시지:<input type="text" name="message"><br>
<input type="submit">
<!-- submit : form의 값을 전송하는 버튼 -->
<input type="reset">
<!-- reset : form의 값을 초기화하는 버튼 -->
<input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
<!-- image : 이미지를 삽입할 수 있는 버튼(submit과 동작이 동일함) -->
<input type="button" value="버튼">
<!-- button : 아무 기능이 없는 버튼 -->
</form>
</body>
</html>
--- Form input 빈 태그
type="file" 파일을 서버에 올릴 때 사용
ex) 게시물 첨부파일, 프로필 사진
---
type="submit" form의 값을 전송하는 버튼
type="reset" form의 값을 초기화하는 버튼
type="button" 아무 기능이 없는 버튼, 개발자가 커스텀하여 사용 가능
*** value속성으로 버튼의 이름 값 변경 가능
---
type="image" 제출 버튼(submit button)으로 사용될 이미지를 정의
src속성(해당 이미지의 경로 명시), alt속성 필요
2023.01.12
<input type="submit"> <input type="reset">
<form action="./test.html">
메시지: <input type="text" name="message"> <br>
type : 내 컴퓨터에 있는 파일을 서버에 올릴 때 사용
<input type="submit">
submit : form의 값을 전송하는 버튼
<input type="reset">
reset : form의 값을 초기화하는 버튼
<input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
<input type="button" value="버튼">
image : 이미지 있는 버튼을 위하여 추가
button : 아무런 기본 동작 주어지지 않는 버튼 value : 화면에 버튼 속 이름 노출
</form>
클릭이 가능한 input 태그
file : 내 컴퓨터에 있는 파일을 올릴 때 사용, 게시물 첨부파일
submit : 값을 서버로 전송
reset : 값을 초기상태로 변경
button : 아무런 기본 동작이 없는 button, 개발자가 직접 커스텀해야함
img : 버튼모양에 이미지를 삽입할 수 있음. submit과 동일 기능 수행
Input type=”file”
컴퓨터 내 파일을 서버에 업로드할 때 사용
Input type=”submit”
폼으로 입력한 값을 서버로 제출할 때 사용
Input type=”reset”
폼으로 입력한 값을 초기화할 때 사용
Input type=”button”
아무런 기본 동작도 정의되지 않은 버튼
개발자가 기능을 커스텀해서 사용
Input type=”image”
버튼 모양에 이미지를 삽입할 수 있음
submit과 동일 기능 수행
src, alt 필수 속성 필요
프로필 사진 업로드 : <input type="upload"> <input type="submit"> <input type="reset">
<br>
<input type="image" alt="제출버튼" src="./submit.png">
<br>
<input type="button" value="아이디 찾기"><input type="button" value="비밀번호 찾기">
Input type=”file”
컴퓨터 내 파일을 서버에 업로드할 때 사용
Input type=”submit”
폼으로 입력한 값을 서버로 제출할 때 사용
Input type=”reset”
폼으로 입력한 값을 초기화할 때 사용
Input type=”button”
아무런 기본 동작도 정의되지 않은 버튼
개발자가 기능을 커스텀해서 사용
Input type=”image”
버튼 모양에 이미지를 삽입할 수 있음
submit과 동일 기능 수행
src, alt 필수 속성 필요
22.05.03
22.04.26
갓생 가보자고
12/21 완료
11.01!
0708
21.7.6.
21.04.12
21.03.25