-
"button" 태그 - type 속성, onclick 속성HTML 2024. 12. 2. 03:32
button 태그는 말 그대로
버튼을 만들 때 사용됩니다.
시작 태그 <button>과
종료 태그 </button> 사이에
버튼 이름으로 사용될 글자를 입력하면 됩니다.
<html> <head> <title>2024-12-02-月</title> </head> <body> <button>Language-weaver</button> </body> </html>
button의 속성에 대해 알아보겠습니다.
먼저, type 속성입니다.
<html> <head> <title>2024-12-02-月</title> </head> <body> <button type="submit">Language-weaver</button> </body> </html>
submit 속성은 주로 무언가를 작성 후 서버로 데이터를 전송할 때 사용됩니다.
가령,
회원가입 form 을 작성 후
회원가입 개인 데이터를 서버로 저장할 때 누르게 되는 버튼 같은 것입니다.
데이터를 제출(submit)한다면,
데이터를 초기화(reset) 하는 버튼도 있으면 편리하겠죠.
<html> <head> <title>2024-12-02-月</title> </head> <body> <button type="reset">Language-weaver</button> </body> </html>
데이터를 초기화 하는 것에 목적이 있는 reset type입니다.
회원가입 form에서 입력한 걸 초기화하고 싶을 때 사용합니다.
type 속성 속성 설명 submit 서버로 데이터를 제출할 때 사용 reset 데이터를 초기화할 때 사용
다음으로 onclick 속성입니다.
보통 onclick 속성은 java script의 함수(function)와 연동하여 사용됩니다.
여기서는 간단하게 사용방법만 짚고 넘어가도록 하겠습니다.
<html> <head> <title>2024-12-02-月</title> </head> <body> <button onclick="langWeaver()">Language-weaver</button> </body> </html>
java script 로 만들어져 있는 langWeaver() 라는 함수가 있다고 가정할 때,
Language-weaver 버튼을 마우스로 클릭하면
langWeaver()라는 함수가 가동되게끔 하는 속성입니다.
이상입니다.
'HTML' 카테고리의 다른 글
스타일 요소 - 글자 가운데 정렬하기 (0) 2024.12.06 img 태그 - src, width, height, title, alt 속성 (0) 2024.12.03 "a" 태그 - href 속성, target 속성, title 속성 (0) 2024.12.01 html 기본 구조 (0) 2024.11.29 태그 (0) 2024.11.27