HTML button 태그 완벽 가이드: 기본 사용법부터 주요 속성까지

HTML의 <button> 태그는 웹 폼 안에서 클릭할 수 있는 버튼을 만들 때 사용하는 요소입니다. 이 버튼을 통해 사용자는 입력한 정보를 웹사이트로 전송할 수 있으며, 버튼의 디자인은 CSS를 이용해 자유롭게 꾸밀 수 있습니다.

웹 페이지에서 폼을 만들다 보면, 사용자가 작성한 내용을 제출할 수 있도록 클릭 가능한 버튼이 반드시 필요합니다. 예를 들어 쇼핑몰의 주문서 양식에서 배송 정보를 입력받는다고 생각해 봅시다. 사용자가 모든 항목을 작성한 후에는, 그 정보를 전송하기 위한 버튼이 있어야겠죠.

바로 이럴 때 <button> 태그가 사용됩니다. 이 태그는 HTML 폼 내부에 클릭 가능한 버튼을 생성하고, 사용자가 입력한 데이터를 웹사이트에 제출할 수 있게 해줍니다.

이 글에서는 HTML에서 <button> 태그를 사용하는 방법을 단계별로 살펴보고, 버튼을 커스터마이징할 때 활용할 수 있는 다양한 속성과 실제 예제까지 함께 알아보겠습니다.

HTML 폼 기본 개념 복습

HTML 폼(Form)은 웹 페이지에서 이름, 전화번호, 주소처럼 다양한 형태의 사용자 입력을 수집하기 위해 사용됩니다.

각 폼은 사용자가 웹사이트에 정보를 제출할 수 있도록 해주는 입력 요소들로 구성됩니다. 예를 들어 어떤 웹 페이지의 주문서에는 이름, 생년월일, 신용카드 정보 등을 입력받는 여러 폼 요소가 포함될 수 있습니다.

HTML에서 폼은 <form> 태그로 만듭니다. 아래는 사용자의 이름을 입력받는 간단한 폼 예제입니다.

<form>
	Name: <input type="text">
</form>

하나의 <form> 태그 안에는 여러 개의 <input> 태그나 셀렉트 박스 같은 다른 입력 요소들이 들어갈 수 있습니다. 또한 폼에는 반드시 <button> 태그가 포함되어야 하며, 사용자가 이 버튼을 클릭하면 입력한 정보가 웹사이트로 전송됩니다.

HTML 버튼 만들기

<button> 태그를 사용하면 HTML 폼 안에 클릭 가능한 버튼을 만들 수 있습니다. 예를 들어 결제 정보를 입력받는 폼이라면, 폼 마지막에 <button>을 배치해 사용자가 해당 데이터를 사이트로 제출할 수 있게 하는 방식입니다.

<button> 태그는 시작 태그와 종료 태그를 반드시 함께 사용해야 하고, type 속성값도 지정하는 것이 좋습니다. type 속성은 나중에 자세히 설명하겠지만, 어떤 종류의 버튼을 렌더링할지 폼에 알려주는 역할을 합니다.

다음은 HTML <button> 태그의 실제 사용 예입니다.

<button type="submit" value="Sign Up">Sign Up</button>

이 코드를 실행하면 웹 페이지에 다음과 같은 버튼이 표시됩니다.

이제 페이지에 버튼이 생겼으므로, 사용자는 폼에 입력한 정보를 제출할 수 있습니다.

<button> 태그는 모든 주요 브라우저에서 지원되기 때문에 브라우저 호환성을 크게 걱정하지 않아도 됩니다. 다만 한 가지 유의할 점이 있습니다. 브라우저마다 <button> 태그를 해석하는 방식이 조금씩 다릅니다. 예를 들어 인터넷 익스플로러 9 미만 버전에서는 버튼의 시작 태그와 종료 태그 사이의 텍스트를 전송하는 반면, 다른 브라우저들은 value 속성의 값을 전송합니다.

button 태그의 주요 속성

HTML <button> 태그는 다양한 속성을 지원하여 커스텀 버튼을 만들 수 있게 해줍니다. 또한 HTML5의 전역 속성(global attributes)도 함께 사용할 수 있습니다. 지금부터 <button> 태그에서 자주 쓰이는 핵심 속성들을 하나씩 자세히 살펴보겠습니다.

autofocus — 자동 포커스 설정

autofocus 속성은 웹 페이지가 로드될 때 해당 버튼이 자동으로 포커스를 받도록 지정합니다. 사용 문법은 다음과 같습니다.

<button type="submit" autofocus>Test Button!</button>

disabled — 버튼 비활성화

disabled 속성은 버튼을 비활성화하여 사용자가 해당 요소와 상호작용할 수 없도록 만듭니다.

<button type="submit" disabled>Test Button!</button>

아래 이미지에서 볼 수 있듯이, 비활성화된 버튼은 회색으로 표시되며 클릭할 수 없습니다.

form — 폼 연결

form 속성은 버튼 요소를 특정 폼과 연결할 때 사용합니다. 이 속성의 값은 연결하려는 폼의 id와 동일해야 합니다. 아래 예제는 제출 버튼을 pizza

<form id="pizza">
	Flavor: <input type="text" name="flavor">
</form>
<button type="submit" form="pizza">Submit Order</button>

form 속성 덕분에 버튼이 id가 pizza인 폼과 연결되었습니다. 따라서 버튼을 클릭하면 해당 폼이 제출됩니다.

formaction — 제출 처리 URL 지정

formaction 속성은 버튼이 제출한 정보를 처리할 프로그램의 URL을 지정합니다. 이 속성은 버튼의 type 속성이 submit일 때만 사용할 수 있습니다.

<button type="submit" formaction="https://www.ourpizzawebsite.com/submitOrder.php">Submit Order</button>

formenctype — 데이터 인코딩 방식 지정

formenctype 속성은 폼 데이터가 서버로 전송될 때 어떻게 인코딩될지 지정합니다. 이 속성은 폼에서 method="post" 방식을 사용할 때만 적용됩니다.

다음은 버튼 클릭 시 일반 텍스트(plain text) 형태로 서버에 데이터를 전송하는 예제입니다.

<button type="submit" formenctype="text/plain">Submit Order</button>

formmethod — HTTP 전송 방식 지정

formmethod 속성은 폼을 제출할 때 브라우저가 사용할 HTTP 메서드를 지정합니다. 이 속성 역시 type="submit"일 때만 사용해야 합니다.

허용되는 값은 get과 post 두 가지입니다. 정보를 조회하거나 HTTP GET 요청을 수행하려면 get을, 정보를 전송하거나 HTTP POST 요청을 수행하려면 post를 사용하면 됩니다.

<button type="submit" formmethod="post">Submit Order</button>

formnovalidate — 유효성 검사 건너뛰기

formnovalidate 속성은 폼이 제출될 때 데이터 유효성 검사를 하지 않도록 지정합니다. 예를 들어 사용자가 모든 필드를 채우지 않았더라도 입력값을 그대로 받고 싶다면 이 속성을 사용하면 됩니다.

<button type="submit" formnovalidate>Submit Order</button>

formtarget — 응답 표시 위치 지정

formtarget 속성은 폼 제출 후 서버가 보내온 응답을 어디에 표시할지 지정합니다. 사용할 수 있는 값은 _blank, _self, _parent, _top, 또는 iframe의 이름입니다.

<button formtarget="_blank">Submit Order</button>

name — 버튼 이름 지정

name 속성은 버튼의 이름을 지정합니다. 이 이름은 같은 폼 내 다른 요소들의 이름과 중복되지 않는 고유한 값이어야 합니다.

<button name="submit_order">Submit Order</button>

type — 버튼 유형 지정

type 속성은 버튼의 유형을 지정합니다. 사용할 수 있는 버튼 유형은 세 가지로, button(일반 버튼), submit(제출 버튼), reset(초기화 버튼)입니다.

<button type="submit">Submit Order</button>

value — 버튼 초기값 지정

value 속성은 버튼의 초기값을 지정합니다.

<button type="submit" value="Submit Order">Submit Order</button>

마무리

<button> 태그는 HTML 폼 안에서 클릭 가능한 버튼을 만드는 데 사용됩니다. 예를 들어 사용자가 피자를 주문할 수 있는 폼이 있다면, 주문 정보를 원할 때 제출할 수 있도록 <button> 태그를 폼에 포함시키면 됩니다.

이 글에서는 HTML에서 <button> 태그를 사용하는 방법을 살펴보았습니다. 또한 커스텀 버튼을 만들 때 활용할 수 있는 주요 속성들을 정리하고, 각 속성이 실제로 어떻게 동작하는지 예제를 통해 확인했습니다.

이제 여러분도 <button> 태그를 능숙하게 활용해 전문가처럼 버튼을 만들 준비가 되었습니다!