[HTML 기초] 사용자 입력을 위한 <input> 태그 (2)

type="submit", type="reset" - 서버 전송, 리셋 버튼 넣기

• 리셋(reset) 버튼은 <input> 요소에 입력된 모든 정보를 재 설정해 사용자가 입력한 내용을 모두 지울 수 있다.
• type="submit"은 사용자가 입력한 정보를 서버로 전송하는 버튼을 넣는다.
• <form> 태그에서 지정한 폼 처리 프로그램으로 넘긴다.

<input type="submit" [value="버튼 내용"] [속성="속성 값"]>
<input type="reset" [value="버튼 내용"] [속성="속성 값"]>

<form action="/register" method="post">
	<label>메일주소<input type="text"></label>
	<input type="submit" value="제출" />
	<input type="reset" value="초기화" />
</form>

 

type="image" - 이미지 버튼 넣기

• submit 버튼 대신에 이미지를 넣어서 서버로 전송하는 이미지 버튼을 넣는다. 기능은 submit 버튼을 클릭할 때처럼 사용자가 입력한 정보를 폼 처리 프로그램으로 전달된다.

<form>
	<label>아이디<input type="text" size="15"></label>
	<label>비밀번호<input type="password" size="15"></label>
	<input type="image" src="image.jpg" id="" alt="login" />
</form>

 

 

type="button" - 버튼 넣기

• 폼 안에 버튼 형태를 만든다. submit이나 reset 같은 자체 기능이 없는 버튼만 넣는다. 그래서 버튼과 자바스크립트 함수 등을 연결해 사용한다.

<input type="button" id="btn-test" [value="버튼 내용"] [속성="속성 값"] />

 

type="file" 파일 첨부하기

• 폼에는 파일도 첨부할 수 있게 한다. type에 file 필드를 넣으면 웹 브라우저 화면에 [파일 선택]이나 [찾아보기] 등이 표시되는데, 이 버튼을 클릭하면 파일을 선택하면 파일이 첨부된다.

<form> <label>첨부파일<input type="file"></label> </form>