전송기능을 하는 submit 버튼
submit은 폼에 입력한 정보를 서버로 전송합니다.
submit 버튼으로 전송된 정보는 <form> 태그의 action속성에서 지정한 폼 처리 프로그램에 넘겨집니다.
<input type="submit" value="버튼에 표시할 내용">
입력한 내용을 모두 지우는 reset 버튼
<input>요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 합니다.
<input type="reset" value="버튼에 표시할 내용">
이미지 버튼
type="image"는 submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냅니다.
<input type="image" src="이미지 경로" alt="대체 텍스트">
기본 버튼
type="button"은 submit이나 reset버튼과 같은 기능이 없고 오직 버튼 형태만 삽입합니다.
주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용합니다.
기본형은 다음과 같습니다
<input type="button" value="버튼에 표시할 내용">기본 버튼을 이용해 자바스크립트의 window.open() 함수를 실행하여 연결한 문서가 새 탭에 보이게 해보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<form>
<h1>파일첨부버튼</h1>
<input type="button" value="test1 보기" onclick="window.open('test1.html')">
</form>
</body>
</html>
파일 첨부 버튼
간혹폼에서 사진이나 문서를 첨부해야 하는 경우가 있습니다.
이럴 때 사용하는 타입이 type="file"입니다.
이 타입을 사용하면 웹 브라우저 화면에 [파일선택]이나 [찾아보기]버튼 등이 표시됩니다.
<input type="file">예제를 봅시다
히든필드
화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소입니다.
사용자에게 굳이 보여줄 필요는 없으나 관리자가 알아야 하는 정보를 이 방법으로 입력합니다
<input type="hidden" name="이름" value="서버로 넘길 값">
'📁Web Developing > HTML 기초' 카테고리의 다른 글
| 폼에서 사용하는 여러 가지 태그 (0) | 2022.05.30 |
|---|---|
| input 태그-6 (주요 속성들) (0) | 2022.05.30 |
| input 태그-4 (날짜와 시간 입력) (0) | 2022.05.30 |
| input 태그-3 (number, range) (0) | 2022.05.30 |
| input 태그-2 (버튼) (0) | 2022.05.30 |
댓글