HTML 버튼 만들기 – button 태그, input 태그

웹 페이지에서 버튼은 거의 필수로 들어갑니다. 버튼을 넣기 위해서는 button 태그를 사용하던가 아님 input 태그 type 속성에 button으로 만들 수 있습니다. 기능은 유사하지만 스타일 적용이 수월한 button 태그를 사용하는 게 더 좋습니다. 그리고 폼(form) 양식 이외에도 일반적인 웹 페이지에서도 많이 사용하고 있습니다.

그럼 button 태그를 사용하여 버튼을 만드는 방법에 대해서 알아보죠.

button 태그

1. 사용법

<button type=”button”> 버튼 명 </button>
<button type=”submit”> 버튼 명 </button>
<button type=”reset”> 버튼 명 </button>

☞ type을 생략하게 되면 type=”submit”처럼 동작합니다.

2. button 태그의 type 속성

종류	설명
button	단지 버튼 형태로 생성, 폼 양식이 아닌 경우에는 type=”button”으로 지정
submit	폼 양식을 서버로 전송
reset	폼 입력 내용을 초기화

사용 예제 1

1. 소스 코드

<!DOCTYPE html>
<html>
<head>
     <title>button 태그</title>
</head>
<style>
     button { display: flex; margin-bottom: 20px;}
</style>
<body>
<form>
     <button>1. 보내기 버튼(submit)</button> <!-- type을 생략하게 되면 submit -->
     <button type="button">2. 일반 버튼</button>
     <button type="submit">3. 보내기 버튼</button>
     <button type="reset">4. 초기화 버튼</button>
     
     <!-- button 태그는 input 태그와 달리 자식 태그를 넣을수 있음 -->
     <button type="button">
          <img src="img/button_1.png">
          <span>BlueShare</span>
     </button>

     <!-- input 태그 type 속성으로 버튼 생성 -->
     <input type="button" value="5. 일반버튼">
     
</form>
</body>
</html>

2. 실행 결과 화면

button, input 태그 버튼 생성 사용 예제 실행 결과 화면입니다.

☞ button 태그는 대부분 CSS 적용하여 버튼 모양을 꾸밉니다.

☞ input 태그는 종료 태그(/input)가 없기 때문에 자식 태그를 넣을 수 없습니다. 버튼은 용도에 맞는 button 태그를 사용하는 게 더 좋은 것 같습니다.

사용 예제 2

1. 소스 코드

<!DOCTYPE html>
<html>
<head>
     <title>button 태그</title>
<style>
     button { display: flex; margin-bottom: 20px;}
</style>
</head>
<body>
     <button type="button" onclick="alert('클릭했습니다.')">1. 보내기</button>

     <!-- 새 탭(창) 으로 열기-->    
     <button type="button" onclick="window.open('https://blueshare.tistory.com')">2. BlueShare 블로그 (새 창으로 열기)</button>    

     <!-- 현재 창에서 열기-->    
     <button type="button" onclick="location.href='https://blueshare.tistory.com'">3. BlueShare 블로그 (현재 창에서 열기)</button>
     
     <!-- 스크립트 호출-->    
     <button type="button" onclick="go()">4. 보내기(스크립트 호출)</button>
     <script>
          function go() {
               alert ("보내기 버튼을 클릭했습니다.");
          }
     </script>
</body>
</html>