HTML [button] tag - 클릭할 수 있는 버튼 태그

 

안녕하세요. 코드 서핑입니다.

알게 모르게 우리는 웹 사이트에서 수많은 버튼을 클릭하고 있습니다.

오늘은 [button] 태그에 대해 알아보도록 하겠습니다.

 

 HTML <button>

 

클릭 할 수 있는 HTML 요소입니다. 버튼을 클릭하면 알림 창을 띄우거나, 서버로 정보를 보낼 수 있습니다.

버튼의 모양은 CSS로 스타일링 할 수 있습니다.

 

 주요 속성

 

autofocus : 페이지 로드 후에 이 버튼으로 포커스를 가져갈지 에 대한 속성입니다. 이 속성은 문서 내에서 하나만 가져갈 수 있습니다.

 

form : 버튼과 폼 양식을 연결할 때 사용하는 속성입니다. 앞서 form 양식과 연결하려면 form 양식의 id값을 동일하게 가져와야 연결됩니다. 조상에서 form 양식이 존재하면 form 속성을 지정하지 않아도 연결됩니다.

 

formmethod : 버튼이 서버에 제출하는 형식이라면, 정보를 전송하는 http 데이터 전송방식을 지정 할 수 있습니다.

값에는 post 와 get이 있습니다.

post : 비밀번호와 같은 공개되지 말아야 할 정보를 http를 요청할 때 안에 담습니다.
get: 정보를 url 값에 함께 추가하여 전송합니다.

name : 정보 전송시 버튼의 이름값입니다.

 

type : 버튼의 타입에는 3가지가 있습니다.

submit : 버튼 속성의 기본 값이며, 서버에 정보를 전송할 때 사용합니다.
reset : form 양식에서 입력받은 값이 있다면 reset 속성으로 초기화할 수 있습니다.
button : 클릭 시 아무 변화도 일어나지 않는 말 그대로 버튼의 역할만 수행합니다.

 

 예시

<button class="button" type="button">Click Me!</button>

 결과

 

 

 

 + 스타일링

 

See the Pen wvWyOBR by parang1 (@parang1) on CodePen.

 

 

 

 <button>과 <input> 태그의 차이점

<input> 태그는 value 값으로 text 밖에 지정을 못하지만, <button> 태그는 이미지뿐만 아니라 가상 선택자 :after , :before 등도 적용 가능합니다. 상대적으로 스타일링을 적용하기 쉽다는 장점이 있습니다.

 

오늘은 <button> 태그에 대해 알아보았습니다.

틀린 점이 있으면 댓글로 부탁드립니다.!