HTML 버튼은 사용자가 클릭할 수 있는 요소를 말한다. HTML에서는 버튼을 만드는 방법이 두 가지가 있는데 하나는 input type을 사용하는 방법이고, 다른 방법은 button태그를 사용하는 방법이다. HTML5부터 button태그가 추가되었으며, 웹 접근성이 중요해지면서 button 태그의 사용을 권장하고 있다.
- HTML4: <input type="submit|reset|button|image" value="버튼이름">
- HTML5 : <button type="submit|reset|button">버튼이름</button>
| 버튼타입 | 기능 |
| button | 아무 기능이 없는 버튼으로 자바스크립트 코드에서 이용된다. |
| submit | 클릭하면 브라우저가 폼 데이터를 웹 서버로 전송한다. |
| reset | 폼에 입력된 내용을 모두 지우고 초기화 하는 버튼이다. |
| image | 이미지 버튼을 만든다. HTML5에서는 이미지 버튼을 만드는 방법으로는 <button type="button"><img src="주소"></button>이있다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="get">
<table>
<tr>
<td><label for="favoritefruit">좋아하는 과일은? </label></td>
<td><input type="text" name="favoritefruit" id="favoritefruit"></td>
</tr>
<tr>
<td><label for="hobby"></label>당신의 취미는?</td>
<td><input type="text" name="hobby" id="hobby"></td>
</tr>
<!-- html4 버튼-->
<tr>
<td><label><b>HTML4 : </b></label>
<input type="submit" value="등록">
<input type="reset" value="리셋">
</td>
<td>
<input type="button" value="일반버튼">
</td>
</tr>
<!-- html5 버튼 -->
<tr>
<td><label><b>HTML5 : </b></label>
<!-- button type을 적지않으면 submit으로 기본적으로 지원됨.-->
<button type="submit">등록</button>
<button type="reset">리셋</button>
</td>
<td><button type="button">일반버튼</button></td>
</tr>
</table>
<hr>
<h5>HTML4 이미지버튼</h5>
<input type="image" src="dessert.jpg" alt="이미지버튼" style="width:100px; height: 100px;"><br>
<h5>HTML5 이미지버튼</h5>
<button type="button"><img src="dessert.jpg" alt="사막사진입니다." style="width:100px; height: 100px;"></button>
<hr>
</form>
</body>
</html>
'Frontend > HTML' 카테고리의 다른 글
| HTML5의 문서 구조화 (0) | 2024.07.07 |
|---|---|
| HTML의 진행률을 알아보는 태그(<progress>, <meter>태그) (0) | 2024.07.01 |
| HTML에서 폼 요소를 사용해서 선택형 입력, 드롭다운 목록을 만들어보자 (0) | 2024.06.30 |
| HTML의 폼 요소를 사용해보자 (0) | 2024.06.30 |
| HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자 (0) | 2024.06.29 |
| HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그) (0) | 2024.06.28 |
| HTML에서 표(table)를 만들어보자 (0) | 2024.06.27 |
| HTML의 <a>태그에 대해 알아보자 (0) | 2024.06.27 |