[form] HTML - <button> 태그 ★ - 클릭버튼 (= button태그 = 버튼태그) (HTML5수정)

목차

1. <button> 예제 - 버튼
2. <button> 정의
3. <button> 구문
4. <button> 속성
5. <button> 예제 -  링크/타겟

<button> 예제 - 버튼

<button> 정의

 

입력 데이터 값을 전송할 때 필요한 버튼을 만들 때 사용

 

---

 

1.

<input> 태그는 종료태그 없이 type 속성 이용해 버튼에 글자나 이미지 넣지만,

<button> 태그는 시작태그와 종료태그 사이에 글자나 이미지 넣음

 

2.

항상 <button> 태그의 type 속성을 명시해줘야 함.

왜냐하면,

IE(=익스플로러) 경우 기본 타입이 button 이나, 

타 브라우저 경우 기본 타입이 submit 이기 때문.

 

3. 

<form> 태그 안에서 버튼 만들 땐, 반드시 <input> 태그 이용해 버튼 만들어야 함.

왜냐하면,

타 브라우저가 <button>태그의 속성값을 전송하는 반면,

IE는 시작태그와 종료태그 사이의 텍스트나 이미지 전송하기 때문.

 

4.

HTML5에서 일부 속성이 추가됨.

 

<button> 구문

 

<button 속성="속성값">텍스트・이미지</button>

 

---

cf. <input> vs. <button> 차이점.

<input type="image" src="hz.gif">

이미지만 표시됨.

 

<button type="submit><img src="hz.gif"></button>

이미지 주위에 사각형 테두리와 배경색이 지정됨. button 태그 자체 패딩도 추가됨.

 

※ button 태그에 아래 스타일 추가 시, input과 동일해짐.

button {border:none; background:none; padding:0}

button img {width:100%;}

 

<button> 속성

<button> 예제 -  링크/타겟

 

현재창

<button onclick="location.href='https://homzzang.com'">홈짱닷컴 구경하기</button> 

 

새창

<button onclick="window.open('https://homzzang.com')">홈짱닷컴 구경하기</button>

 

상위프레임창

<button onclick="parent.location.href='https://homzzang.com'">홈짱닷컴 구경하기</button>

 

결과보기