[html 태그] button 태그 (a태그와의 비교)

마크업을 하다보면 a태그와 button태그의 차이와

어떤 부분에 a태그를 쓰고 또 어떤 부분에 button 태그를 써야하는지

기준이 헷갈리는 경우가 있다.

 

확실한 태그의 사용을 위해 연구가 필요하다.

 

a태그가 페이지의 이동, 페이지 내의 이동과 같은 상호작용의 역할을 한다면

button 태그는 클릭 이벤트와 같은 단순 클릭과 이벤트의 용도로 사용된다.

 

1. button 태그의 역할

button 태그의 역할에 대해 자세히 설명하기 위해 a태그와의 비교를 통한 설명이 필요할 것 같다.

 

- a태그

페이지의 이동, 페이지 내의 다른 영역으로의 이동 등 상호작용이 필요할 경우 사용된다.

 

- button태그

단순 클릭 이벤트, form요소에 입력된 내용을 서버로 전송할 때 사용된다.

 

2. button 태그 속성

button 태그의 주요 속성에 대해 알아본다.

속성	속성값	설명
autofocus	autofocus	페이지를 로드했을 때 해당 버튼에 focus되게 적용한다. (!) autofocus는 페이지에 하나만 적용할 수 있다.
disabled	disabled	버튼이 클릭되지 않게 비활성화 한다.
form	form id값	버튼과 연결 할 form 요소를 적용한다. form 속성을 적용하지 않을 경우 조상 요소에 있는 form요소와 연결이 된다.
type	- submit (기본 값) - button - reset	- submit : form 요소에 제출용으로 사용된다. - button : 단순 클릭 이벤트용 버튼으로 사용된다. - reset : 모든 컨트롤을 초기값으로 돌린다.

위의 속성 외에 formaction, formenctype, formmethod, formnovalidate, formtarget, name 등의 속성이 있다....