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>
