목차
- <button> 예제 - 버튼
- <button> 정의
- <button> 구문
- <button> 속성
- <button> 예제 - 링크/타겟
<button> 예제 - 버튼
<button type="button">홈짱닷컴 (Homzzang.com) (클릭)</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> 속성
속성
|
속성값 |
쓰임새 |
비고 |
type
|
submit (기본값)
button
reset
|
버턴의 쓰임새를 정의
submit : 전송 버튼
button : 일반 버튼
reset : 입력값 초기화 버튼
|
|
name
|
글자 |
다른 <button> 태그와 구별 위한 이름 |
|
value
|
글자 |
버튼 입력값 |
|
disabled
|
disabled |
버튼 사용 불가 (즉, 버튼 클릭 불가) |
|
autofocus
|
autofocus |
웹 페이지 로딩 시, 커서가 버튼위치에 오게 지정. |
HTML5 추가 |
form
|
form_id |
<button> 태그가 속하는 <form>태그 id |
HTML5 추가 |
formaction
|
URL 주소 |
type=”submit”일 때,
입력 값이 전송될 웹 페이지 주소
|
HTML5 추가 |
formenctype
|
application/x-www-form-urlencoded
multipart/form-data
text/plain
|
type="submit"일 때,
입력값 암호화 전송방식 지정
|
HTML5 추가 |
formmethod
|
get
post
|
type="submit"일 때,
입력값을 어떤식으로 전송할 지 지정
get (기본값)
브라우저에 보이는 방법. 보안에 취약.
(예) 일반적인 검색 /카운트 자료
post
사용자가 못 보게하는 방법. 보안에 강함.
사용자 정보를 DB화 할 때 이용.
이 경우, formenctype 속성 이용
|
HTML5 추가 |
formnovalidate
|
formnovalidate |
type=”submit” 일 때,
입력테이터 유효성 검사 여부 지정
|
HTML5 추가 |
formtarget
|
_blank (새 창) _self (현재 창) _parent (부모 프레임 창) _top (최상단 프레임 창) framename (별도 프레임 지정)
|
type=”submit” 일 때,
입력데이터 처리결과를 어떤 페이지로 보여줄지 지정.
|
HTML5 추가 |
<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>
결과보기
PS. HTML 경우 onClick처럼 중간에 대문자 넣어도 작동하나, 순수 JS에선 에러 남.