자바스크립트 버튼 (button, input type=”button”) 태그는 사용자로부터 정보를 입력 받은 후 클릭을 통해 서버 등으로 데이터를 전송하거나 받을 때 필요한 객체 타입을 이야기 합니다. 자바스크립트를 활용해서 해당 button의 click, submit 그리고 input과 button 태그의 차이점 등을 기술하였습니다.
버튼 역시 이벤트 처리가 필요하므로 이벤트의 기초는 여기 에서 참고할 수 있습니다.
자바스크립트 버튼의 click event
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="button1">버튼 타입 2</button>
<input type="button" value="버튼 타입 2">
</body>
</html>
header 부분에 다음과 같은 자바스크립트 코드를 입력합니다.
미리 선언한 두 개의 button을 가져와서 클릭 이벤트를 적용하였습니다.
document.addEventListener("DOMContentloaded", () => {
const buttonType1 = document.querySelector( "#button1" );
const buttonType2 = document.querySelector( "input[type=button]" )
buttonType1.addEventListener( "click", ( event ) =>{
event.currentTarget.textContent = "버튼 타입 1 클릭"
})
buttonType2.addEventListener( "click", ( event ) =>{
event.currentTarget.textContent = "버튼 타입 2 클릭"
})
});
자바스크립트 버튼 submit의 기능 – form 이란
폼(Form)이란, 인터넷상에서의 입력 양식을 의미하게 됩니다. 여러 정보를 혹은 무언가를 입력할 수 있는 양식들을 이야기 하게 됩니다.
아래의 이미지의 경우 로그인 필드와 패스워드 필드가 입력을 받을 수 있도록 되어 있습니다.
이러한 폼을 만들 때 폼 태그를 사용하게 되며, 이걸 제출하는 것을 Submit, 위의 이미지에서 보이는 Sign in 버튼 등을 이용해서 처리하게 됩니다.
HTML 코드로는 다음과 같이 Form 태그를 사용하게 되며 submit를 처리할 수 있는 button 등이 내부에 배치되게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="submit">
<input type="text">
//submit 타입으로 버튼을 생성해야 한다.
<input type="submit" value="등록" id="button2"/>
</form>
</body>
</html>
이름을 입력받은 후 해당 이름을 가져와서 다른 페이지 등으로 전송하는 submit은 아래와 같이 자바스크립트 버튼 제어 로직을 세울 수 있습니다.
//form 태그를 가져온다.
const form = document.querySelector( "form" );
//form 태그에 submit 이벤트 등록
form.addEventListener( "submit", ( event ) => {
const name = document.querySelector( "#nameInput" );
console.log( name.value )
})
만약 Validation 조건 등을 걸어서 잘못된 이름 등이 들어왔을 때에는 화면이 리프레시 되면 안되므로 event.preventDefault() 등으로 기본값 기능을 막을 수 있습니다.
...
if ( name.value.length <= 1 ){
alert( "이름을 2글자 이상 입력해 주세요." );
//유효성 체크 등으로 다른 화면으로 넘어가는 것을 막음
event.preventDefault();
}else{
// submit 로직 처리
}
...
또 만약에 아래와 같이 form 태그 밑에 button 태그가 사용되면 해당 버튼은 무조건 submit 처리가 되므로 용도 맞게 사용이 되어야 합니다.
<form action="submit">
이름을 입력하세요.
<input type="text" id="nameInput">
<input type="submit" value="등록" id="button2"/>
<button id="button2">전송하기</button>
</form>
아래와 같이 폼 태그 내에서의 BUTTON 태그는 기본값이 submit로 지정되어 있습니다.
button 태그의 속성에는 default 값이 submit이기 때문이며 그래서 type을 명시적으로 사용하는 것이 좋습니다.
<button type="button" id="button2">전송하기</button>
//혹은 input 타입으로
<input type="button" value="전송하기2" id="button2" />
button은 아래의 두가지 방식으로 button을 표현할 수 있습니다.
<button id="button1">버튼</button>
<input type="submit" value="버튼">
이 방식의 차이는, button 태그의 경우, 요소 내에 텍스트나 이미지 등을 넣을 수 있지만, input 태그를 사용한 경우에는 이를 넣을 수 없습니다. 즉, button 태그는 슬래시태그로 감싸 닫는 태그이고, input 태그는 스스로 닫는 태그입니다.
따라서 button 태그는 객체 트리 구조상 하위 객체 텍스트나 이미지 등을 포함할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head> </head>
<body>
<input type="button" value ="글자만" />
<button type="button">
글자 및 이미지 등 하위 객체 포함 가능
<img
src="https://sapui5.hana.ondemand.com/resources/sap/ui/documentation/sdk/images/logo_ui5.png"
alt="arrow"
/>
</button>
</body>
</html>
실행결과는 다음과 같습니다.
이상으로 button 의 기초적인 자바스크립트 처리에 대해서 알아보았습니다. 더 자세한 내용은 모질라 여기 문서 를 참조하시기 바랍니다.