"button" 태그 - type 속성, onclick 속성

HTML

"button" 태그 - type 속성, onclick 속성

Questioner 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()라는 함수가 가동되게끔 하는 속성입니다.

이상입니다.