HTML <button> 태그 - 버튼 만들기_폼 양식

HTML <button> 태그 - 폼 양식

HTML <button> 태그

- button 요소는 사용자가 누를 수 있는 버튼입니다.

↓ 버튼 태그의 기본 형태

<button>~</button>

 

button에서 자주 쓰는 속성
→ type, name, autofocus, onclick

• type : 입력 태그의 유형을 결정하는 속성
• name : 서버로 전달되는 이름을 작성 (※사용자가 임의 지정합니다.)
• autofocus : 웹 페이지가 로드(load)될 때, 포커스가 되는 속성
• onclick : 버튼이 클릭되었을 때 발생되는 이벤트의 속성

[예제]

<button type="button" name="button" aufofocus onclick="alert('팝업창')">onclick</button>

[실행화면]

 

[ 버튼 태그에 자주 사용하는 속성들 ]

type의 속성값
→ button, submit, reset

• button : 클릭할 수 있는 버튼 타입.
• submit : 데이터를 제출, 전송한다는 버튼 타입.
• reset : 초기값으로 리셋한다는 버튼 타입.

[예제]

<button type="button" name="check_button" autofocus>중복확인</button>
<button type="submit" name="sava_button" autofocus>저장하기</button>
<button type="reset" name="reset_button" autofocus>다시쓰기</button>

[ 실행화면 ]

 

[ onclick를 사용해 페이지 맨 위로가기 ]

[예제]

<button onclick="window.location.href='#top'">위로가기</button>

[ 실행화면 ]