[html] button 태그

 

 

[html] button 태그

 

<button> 요소는 버튼을 만드는 태그입니다.

 

이전 시간에 배운 <input type="submit/reset/button">과 비슷합니다.

 

[html] input type 속성

 

차이점이라면, button 요소 안에는 텍스트나 이미지 같은 내용을 넣을 수 있다는 것.

 

문법: <button type="  ">내용 </button>

 

button 태그를 사용할 때는 항상 type 속성을 지정합니다.

 

그렇지 않으면, 브라우저마다 각기 다른 기본값을 사용합니다.

 

주의: ie8 이전 버전은 button 태그 사이에 있는 내용을 전송하며,

 

그 외 다른 브라우저는 value 속성의 내용을 전송 합니다.

 

따라서, form 양식에서 버튼을 만들려면,<button> 태그보다 <input type="">을 사용합니다.

▶함께 사용할 수 있는 속성

 

속성	속성값	설명
name	name	버튼 이름.
type		버튼 유형
	button	누름 버튼을 만듦
	reset	초기값으로 재설정하는 버튼
	submit	데이터를 전송하는 전송 버튼
value	text	button의 기본값 지정
disabled	disabled	버튼이 비활성화 됨 문법: <button disabled>, xhtml에서는 <button disabled="disabled">
↓↓html5 새로 추가된 속성↓↓
formtarget		창이 열릴 곳/ 이 속성은 target 속성을 무시 지원 브라우저 : ie10, chrome, firefox, opera, safari
	_blank	새 창에 염
	_self	기본값. 클릭한 곳에 열기
	_parent	부모(상위) 창에 염
	_top	가장 상위 창에 염
	프레임 이름	그 이름을 가진 프레임에 염
autofocus	autofocus	버튼이 자동으로 포커스 됨 문법: <button autofocus>,  xhtml에서는 <button autofocus="autofocus"> 지원브라우저: ie10, chrome, ff, safari, opera 13
form	form id	버튼이 속한 form의 id 지원브라우저: ie 제외하고 주요 브라우저지원
formaction	url	type="submit"일 때  데이터를 전송할 곳 지원브라우저: ie10, chrome, ff, safari, opera
formenctype		type="submit"일 때 서버에 데이터를 보낼 때 부호화 방법/ formenctype 속성을 사용하면 enctype 속성을 무시함. 지원브라우저: ie10, chrome, ff, safari6, opera
	application/x-www-form-urlencoded 기본값. 모든 문자가 전송 전에 부호화
	multipart/form-data 어떤 문자도 부호화되지 않음 (파일 업로드 버튼을 만들 때 사용함)
	text-plain	공백은 +기호로 바뀌지만 어떠한 문자도 부호화되지 않음.
formmethod		type="submit"일 때 사용할 http 방법 이 속성은 method 속성을 무시함. 지원브라우저: ie10, chrme, ff, opera, safari
	get	데이터를 url에 덧붙여 전송
	post	body 안에 양식 데이터를 첨부함 (데이터는 url에 보이지 않음)
formnovalidate	formnovalidate	type="submit"일 때 데이터가 전송에서 유효화하지 않아야 됨. 이 속성을 사용하면 novalidate 속성 무시 문법: <button formnovalidate> xhtml에서는 <button formnovalidate="formnovalidate">  지원 브라우저: ie10, chrome, ff, opera

 

 

button vs input type

 

양식을 전송할 때 input type="submit"을 사용하면, 

 

별도의 자바스크립트를 사용할 필요 없이 자동으로 전송 됩니다.

 

하지만 button 요소는 양식을 전송하려면 추가적인 자바스크립트가 필요합니다.

 

 

▶html/css 작성 예를 보겠습니다~

 

html

<h3> button 예제</h3>
<button type="button" onclick="alert('반가워요')">버튼을 클릭해 보세요</button>

<h3> input type  예제</h3>

<form action="url">
 
좋아하는 스포츠를 선택하세요<br>
<p>
1. 사이클<input type="checkbox" name="sports" value="cycle"><br>
2. 테니스<input type="checkbox" name="sports" value="teniss"><br>
3. 골프<input type="checkbox" name="sports" value="golf"><br>
</p>
<input type="submit" value="submit"> 
</form> 

 

css

form{
width: 280px;
height: 150px;
border: 1px solid #B2CCFF;
padding: 20px;
background-color:#FFB2D9;
}

 

 

▶실행화면

 

[버튼을 클릭해 보세요]를 누르면 '반가워요'라는 창이 뜹니다.

 

아래 파일 다운받아 실행해 보세요 

button.htm

 

 

 

 

http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

http://css-tricks.com/use-button-element/

 

form 태그(html 양식 만들기)

 

[html] input 태그

 

textarea 태그

 

label 태그