안녕하세요. 후니입니다!
이번 포스팅에서는 HTML5의 <button>태그에 대해서 알아보겠습니다.
<button>태그와 <button>태그 안에 들어가는 속성(Attribute)들도 많지만 한 개의 버튼을 우선 만들어보고 살펴보겠습니다.
|
<!--코드1.1-->
<!DOCTYPE>
<head>
<meta charset="utf-8">
<title>button test</title>
</head>
<body>
<button>입력 버튼</button>
</body>
|
다음은 결과 화면입니다.
<button>버튼 이름</button> 형태를 가지고 있으며 버튼 태그 사이에 버튼의 이름을 지정할 수 있습니다.
간단하게 버튼 한 개 만드는 방법을 알아봤고 이제부터는 <button>태그의 속성들을 살펴보겠습니다.
<button>태그의 type 속성과 속성 값
1. button : 클릭할 수 있는 기능
2. submit : 데이터를 전송할 수 있는 기능
3. reset : 데이터를 리셋하는 기능
<button>태그의 type속성에 들어갈 수 있는 속성 값들은 위처럼 총 세 가지가 있으며 다음 코드는 button, submit. reset을 사용했습니다. <form>태그나 모르는 태그들이 있을 경우엔 일단은 무시하고 진행해도 괜찮지만 이 참에 같이 공부하는걸 추천합니다.
|
<!--코드1.2-->
<!DOCTYPE>
<head>
<meta charset="utf-8">
<title>button test</title>
</head>
<body>
First name : <input type="text" name="fname"><br>
Second name : <input type="text" name="sname"><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
<button type="button" value="Button">click</button>
</form>
</body>
Colored by Color Scripter
|
코드를 직접 타이핑 후 실행해보면 <사진1.2>와 같은 결과가 나옵니다.
First name의 텍스트 박스에 값을 입력하고 Second name 텍스트 박스에 값을 입력 후 submit 속성 값을 사용한 Submit버튼을 누르면 다음 화면으로 넘어갑니다. 아직 다음 화면은 만들지 않아서 "파일을 찾을 수 없음"화면이 나오는게 정상입니다. 그리고 값을 입력 후 reset 속성 값을 사용한 Reset버튼을 누르면 입력한 값들이 사라지며 button 속성 값을 사용한 click버튼은 클릭할 수 있는 버튼으로 생성됩니다.
'Web Basic > HTML5' 카테고리의 다른 글
| [HTML5] <abbr>태그 사용 방법 (0) | 2019.12.05 |
|---|---|
| [HTML5] <caption>, <figcaption>태그 사용 방법 (0) | 2018.03.20 |
| [HTML5] colspan, rowspan 속성 사용 방법 (2) | 2018.03.19 |
| [HTML5] <table>, <tr>, <td>, <th>태그 사용 방법 (0) | 2018.03.14 |
| [HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0) | 2018.03.14 |