[HTML] 양식(4) - button

 

▶ <button>

• 선택 가능한 버튼을 지정.

• 버튼은 <input type="button">을 이용해서도 대체 가능하지만 조금 더 직관적으로 <button>을 사용해 조금 더 특화된 버튼을 만듦.

• <input type="button>"을 이용한 버튼과 동일한 기능을 함.

 

<button> 사용 예시

 

• 속성

  autofocus: 페이지가 로드될 때 자동으로 포커스.

  - boolean값.

  - 문서 내 고유해야 함.

  disabled: 버튼을 비활성화 처리.

  - boolean값.

  form: <form>의 id 속성 값.

  - 해당 <form>의 후손이 아닐 경우만 해당.

  name: <form>의 데이터와 함께 전송되는 버튼의 이름.

  type: 버튼의 타입을 지정.

  - button(일반 버튼), reset(초기화), submit(서버로의 제출).

 

• button { display: inline-block; } 

• 버튼은 사용자에게 클릭을 유도함.
  - 일반 버튼은 기능을 포함하지 않기 때문에 거의 모든 경우 Javascript를 이용한 기능을 붙여 사용.

 

Javascript를 이용한 <button> 기능 적용 예시

  - 일반 버튼의 경우 위와 같이 Javascript를 통해 버튼이 어떤 기능을 수행할 것인지 설정 후 사용하게 됨.