<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="submit">제출하기</button>
</form>
브라우저에서 실제 표시된 모습
<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="reset">초기화하기</button>
</form>
브라우저에서 실제 표시된 모습 실제로 테스트 해보세요!
<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" onclick="msg();">버튼 클릭</button>

<!-- 주로 자바스크립트와 함께 사용합니다. -->
<script>
    const msg = () => {
        alert("환영합니다.");
    }
</script>
브라우저에서 실제 표시된 모습 실제로 테스트 해보세요!
<button type="button" disabled>비활성화된 버튼</button>
브라우저에서 실제 표시된 모습
<button type="button" autofocus>포커스된 버튼</button>
<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>
브라우저에서 실제 표시된 모습 URL을 입력하고 유효성 검사가 진행되는지 실제로 테스트 해보세요!
주의! URL을 입력하지 않으면 유효성 검사 없이 양식이 제출됩니다.
<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>
브라우저에서 실제 표시된 모습 required 속성 검사가 진행되는지 실제로 테스트 해보세요!
<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>
브라우저에서 실제 표시된 모습
<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
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<button> 1 12 1 4
type 1 12 1 4
disabled 1 12 1 4
formnovalidate 9 12 4 5.1