HTML <button> 태그 – 올바른 이해와 사용 방법

`<button>` 태그의 정의 및 사용법

<button> 태그는
내용물에 의해 레이블이 지정된 버튼을 나타냅니다.
이 태그는 웹 페이지에 사용자가 클릭할 수 있는 버튼을 만들고, 버튼 안에 포함된 텍스트나 이미지가 버튼의 기능을 표현합니다.

`type` 속성으로 버튼의 컨트롤 유형을 지정

<button> 태그는 type 속성의 값에 따른 컨트롤 유형을 지정합니다.
가능한 키워드 값은 다음과 같습니다.

button 태그의 type 속성의 값
`submit`	양식(`<form>`) 제출 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 제출합니다. `<button>` 태그에서 사용되는 `type` 속성의 기본값입니다. `type` 속성을 지정하지 않으면 기본값은 `submit`입니다.
`reset`	양식(`<form>`) 초기화 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 초기화합니다.
`button`	버튼에는 기본 동작이 없으며, 기본적으로 클릭했을 때 아무것도 하지 않습니다. 일반 버튼 유형의 컨트롤을 나타내며, 주로 자바스크립트와 함께 사용하여 사용자가 클릭하면 다양한 동작을 컨트롤할 목적으로 이 버튼이 사용됩니다.

컨트롤이란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>, <textarea>, <select>등 사용자가 데이터를 입력하고, 선택하고, 제출하는 등의 작업을 할 수 있는 요소들이 해당됩니다.

`type` 속성 값에 따른 예제

<button> 태그의 type 속성 값에 따른 예제를 살펴보겠습니다.

`<button type="submit">`

<button type="submit">은 양식(<form>) 제출 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 제출합니다.
<button> 태그에서 사용되는 type 속성의 기본값입니다. type 속성을 지정하지 않으면 기본값은 submit입니다. 즉, type 속성이 누락된 <button>은 <button type="submit">과 동일합니다.

HTML

<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="submit">제출하기</button>
</form>

`<button type="reset">`

<button type="reset">은 양식(<form>) 초기화 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 초기화합니다.

주의하세요!
양식의 모든 컨트롤의 값을 초기화한다는 것은 사용자가 입력한 값이나 설정한 값을 초깃값으로 되돌린다는 의미입니다. 모든 입력값을 지운다는 의미가 아닙니다.

다음의 예제에서는 <input type="text">의 값은 설정되어 있지 않습니다. 즉, 빈 값입니다. 사용자가 값을 입력 후 <button type="reset">을 클릭하면 <input type="text">의 값은 초깃값인 설정되어 있지 않는 빈 값 상태로 되돌려집니다.

HTML

<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="reset">초기화하기</button>
</form>

다음의 예제는 위의 예제와는 달리 <input type="text">의 초깃값을 value 속성을 사용해서 홍길동으로 지정했습니다. 이런 경우, 이 값을 사용자가 변경하지 않고 <button type="reset">을 클릭하면 초깃값인 홍길동으로 지정된 값은 지워지지 않습니다. 하지만, 홍길동으로 지정된 값을 다른 값으로 변경하고 <button type="reset">을 클릭하면 초깃값인 홍길동으로 되돌립니다.

HTML

<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name" value="홍길동">
    <button type="reset">초기화하기</button>
</form>

`<button type="button">`

<button type="button"> 버튼에는 기본 동작이 없으며, 기본적으로 클릭했을 때 아무것도 하지 않습니다. 일반 버튼 유형의 컨트롤을 나타내며, 주로 자바스크립트와 함께 사용하여 사용자가 클릭하면 다양한 동작을 컨트롤할 목적으로 이 버튼이 사용됩니다.

<button type="button">은 양식(<form>) 내부에서도 사용되지만 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.

HTML

<button type="button" onclick="msg();">버튼 클릭</button>

<!-- 주로 자바스크립트와 함께 사용합니다. -->
<script>
    const msg = () => {
        alert("환영합니다.");
    }
</script>

관련 속성 사용하기

<button> 태그는 type 속성 이외에도 관련된 속성이 있습니다.

`disabled` 속성

버튼을 비활성시키려면 disabled 속성을 사용하세요. 버튼과 사용자의 상호작용, 즉 누르거나 클릭하는 것을 막습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

`autofocus` 속성

페이지가 로드될 때 해당 컨트롤에 입력 포커스가 있어야 함을 지정할 수 있습니다. HTML 문서에는 하나의 컨트롤 요소에만 사용되어야 하며, 중복으로으로 사용할 경우에는 처음에 사용한 autofocus 속성만 적용됩니다. 이 속성은 컨트롤 요소에 자동으로 포커스를 맞추기 위해 사용됩니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

autofocus 속성이 지정되어 있더라도, autofocus 속성을 지정한 요소 이외의 요소를 사용자가 포커스하면 autofocus 속성을 지정한 요소의 포커스는 포커스를 잃게(blur) 됩니다.

브라우저 호환성 주의!
iOS에서는 제작사인 Apple의 정책으로 인해 모든 브라우저의 autofocus 속성을 지원하지 않습니다.
caniuse.com에서 더 자세한 정보를 확인해 보세요.

`formnovalidate` 속성

<button type="submit">으로 양식이 제출될 때 양식 영역이 검증되지 않아야 함을 나타냅니다. 이 속성이 없으면 양식 영역을 검증합니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

양식 영역의 검증은 두 가지입니다.

HTML5의 기본 기능으로 제공하는 유효성 검사
required 속성이 있는 컨트롤의 값이 지정되어 있는지 검사

HTML5의 기본 기능으로 제공하는 유효성 검사

<input type="url">이나 <input type="email">은 <form> 태그 내에서 사용하면 기본적으로 브라우저에서 유효성 검사가 진행됩니다.
이는 HTML5의 기본 기능으로, <input type="url">에는 사용자가 올바른 형식의 URL을 입력했는지 자동으로 확인해 주고, <input type="email">은 사용자가 올바른 형식의 이메일 주소를 입력했는지 자동으로 확인해 줍니다.

HTML5의 기본 기능으로 제공하는 유효성 검사 기능를 제거하려면 <form> 태그 내에 novalidate 속성을 추가하거나 <button type="submit">에 formnovalidate 속성을 추가하는 것입니다. 여기에서는 <button type="submit">에 formnovalidate 속성을 추가하는 것을 다룹니다.

다음은 <button type="submit"> 내에 formnovalidate 속성을 설정하지 않은 것과 formnovalidate 속성을 설정한 것을 비교하는 예제입니다.

HTML

<h3>유효성 검사를 진행함</h3>
<p>올바른 형식의 URL을 입력했는지 검사</p>
<form>
    <label for="user-url">홈페이지 주소</label>
    <input type="url" id="user-url" name="user-url">
    <button type="submit">제출</button>
</form>
<h3>유효성 검사를 진행하지 않음</h3>
<p>올바른 형식의 URL을 입력했는지 검사를 진행하지 않음</p>
<form>
    <label for="user-url-1">홈페이지 주소</label>
    <input type="url" id="user-url-1" name="user-url-1">
    <button type="submit" formnovalidate>제출</button>
</form>

`required` 속성이 있는 컨트롤의 값이 지정되어 있는지 검사

required 속성은 양식을 제출하기 전에 사용자가 컨트롤의 입력 값을 지정해야 함을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

다음은 <button type="submit"> 내에 formnovalidate 속성을 설정하지 않은 것과 formnovalidate 속성을 설정한 것을 비교하는 예제입니다.

HTML

<h3>required 속성 검사를 진행함</h3>
<p>required 속성이 있는지 검사</p>
<form>
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name" required>
    <button type="submit">제출</button>
</form>
<h3>required 속성 검사를 진행하지 않음</h3>
<p>required 속성이 있는지 검사를 진행하지 않음</p>
<form>
    <label for="user-name-1">이름</label>
    <input type="text" id="user-name-1" name="user-name-1" required>
    <button type="submit" formnovalidate>제출</button>
</form>

접근성 고려사항

아이콘 버튼 사용하기

아이콘만 표시하는 버튼에는 접근 가능한 이름이 없습니다. 접근 가능한 이름은 특히 시각장애인을 위한 스크린 리더 및 보조 기술을 통해 버튼의 기능을 이해하기 상호 작용할 수 있도록 돕는 중요한 기능을 합니다.

다음의 예제와 같이 접근 가능한 이름이 없다면, 이것은 시각장애인에게 접근성 제공을 하지 못하게 합니다.

HTML

<style>
    .svg {
        display: block;
        width: 1.2rem;
        height: 1.2rem;
    }
    .magnifier-glasses {
        fill: transparent;
        stroke-width: 1.4;
    }
    .magnifier-handle {
        stroke-dashoffset: -7.5;
        stroke-dasharray: 7.9, 20;
        fill: transparent;
        stroke-width: 2.2;
    }
</style>
<button type="submit">
    <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 20 20">
		<circle class="magnifier-glasses" cx="8.2" cy="8.2" r="7.2" />
		<path class="magnifier-handle" d="M 8.2 8.2 L 22 22" />
	</svg>
</button>

이러한 경우 <button> 태그에 aria-label 속성으로 대체 텍스트를 제공하는 것입니다.

aria-label 속성은 웹 요소에 대한 대체 텍스트를 제공하는 데 사용됩니다. 이 속성의 값은 텍스트이며, 스크린 리더가 해당 요소를 읽어 사용자에게 전달할 때 이 텍스트를 사용합니다.

HTML

<style>
    .svg {
        display: block;
        width: 1.2rem;
        height: 1.2rem;
    }
    .magnifier-glasses {
        fill: transparent;
        stroke-width: 1.4;
    }
    .magnifier-handle {
        stroke-dashoffset: -7.5;
        stroke-dasharray: 7.9, 20;
        fill: transparent;
        stroke-width: 2.2;
    }
</style>
<button type="submit" aria-label="검색어 제출">
    <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 20 20">
		<circle class="magnifier-glasses" cx="8.2" cy="8.2" r="7.2" />
		<path class="magnifier-handle" d="M 8.2 8.2 L 22 22" />
	</svg>
</button>

이렇게 하면 비 시각장애인에서는 별다른 변화가 없지만, 스크린 리더를 사용하는 사용자들이 해당 콘텐츠를 더 빠르고 쉽게 이해하고 탐색하는 데 도움을 줍니다.

브라우저 호환성

button 태그와 관련 속성의 브라우저 호환성
태그와 관련 속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<button>`	1	12	1	4
`type`	1	12	1	4
`disabled`	1	12	1	4
`formnovalidate`	9	12	4	5.1

명세서

button 태그의 명세서 사양
명세서 사양
`<button>`	HTML Standard #the-button-element

참고문헌

MDN - <button>: The Button element

<button> 태그의 정의 및 사용법

type 속성으로 버튼의 컨트롤 유형을 지정

type 속성 값에 따른 예제

<button type="submit">

<button type="reset">

<button type="button">

관련 속성 사용하기

disabled 속성

autofocus 속성

formnovalidate 속성

HTML5의 기본 기능으로 제공하는 유효성 검사

유효성 검사를 진행함

유효성 검사를 진행하지 않음

required 속성이 있는 컨트롤의 값이 지정되어 있는지 검사

required 속성 검사를 진행함

required 속성 검사를 진행하지 않음

접근성 고려사항

아이콘 버튼 사용하기

브라우저 호환성

명세서

참고문헌

같이 보기

`<button>` 태그의 정의 및 사용법

`type` 속성으로 버튼의 컨트롤 유형을 지정

`type` 속성 값에 따른 예제

`<button type="submit">`

`<button type="reset">`

`<button type="button">`

`disabled` 속성

`autofocus` 속성

`formnovalidate` 속성

`required` 속성이 있는 컨트롤의 값이 지정되어 있는지 검사