WEB/HTML

[HTML] HTML button 의 type 종류들 (submit/button/reset)

2021-03-19

button의 type 크게 3종류로 나누어진다. 종류로는 button / submit / reset 있다 이 세 가지의 버튼 타입의 기능에 대하여 알아보도록 하자. ( 게시글 제일 아래 전체 코드를 같이 올려 두었다.)

- button

button은 말그대로 클릭을 할 수 있는 버튼이 브라우저 창에 생겨나며, 클릭해도 아무런 기능이 없다. 이와 같은 button은 자바스크립트와 같은 다른 언어의 함수 및 기능을 구현하면, 해당 기능을 실행하기 위한 대상(버튼)의 역할을 한다.

<button id="bu" type="button">버튼(button)</button>

- submit

submit은 <input type="submit">과 동일한 기능을 수행하며, 서버로 데이터를 전달하는 역할을 하는 타입이다. 참고로 아무런 타입 부여 없이 " <button> 버튼 </button> " 을 설정해도 button의 기본 default 값이 submit이기 때문에 아래의 코드와 같은 기능을 한다.

<button id="su" type= "submit" value="내용전달">버튼(submit)</button>

- reset

타입 이름에서도 느껴지듯이 button을 감싸고 있는 form 데이터의 입력된 데이터를 초기화 하는 타입이다.

<button id="re" type="reset" value="내용초기화">버튼(reset)</button>

- 전체코드

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

#bu{
	background: blue;
	color: #fff;
}
#re{
	background: red;
	color: #fff;
	
}
#su{
	background: green;
	color: #fff;
}

</style>


</head>

<body>
<form action="#" method="get">
<br><br>
	<label for="content" >테스트 내용: </label>
	<input type="text" id="content" name="content"/><br><br>

	<button id="bu" type="button">버튼(button)</button>
	<button id="re" type="reset" value="내용초기화">버튼(reset)</button>
	<button id="su" type= "submit" value="내용전달">버튼(submit)</button>
</form>
</body>
</html>

저작자표시 비영리

'WEB > HTML' 카테고리의 다른 글

[HTML] HTML Text Formatting 태그들 알아보기 (0)	2021.04.18
[HTML] HTML <link> 태그를 통한 리소스 불러오기 (0)	2021.03.25
[HTML] 이클립스 UTF - 8 / EUC-KR 인코딩 변경하는 방법 [한글깨짐해결] (0)	2021.03.03
HTML 태그 <p> <br>줄바꾸기 <img>이미지 삽입 <table> 표삽입 (0)	2020.05.23
HTML 기초이론/태그/링크/문법 (0)	2020.05.21

Contents

새소식

인기 검색어