<button></button> 클릭 할 수 있는 버튼 생성

| HTML/xhtml문법

2014. 1. 24. 19:31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form> - <button> 사용법<br />
<b><button> 클릭 할 수있는 버튼을 정의합니다.</b><br /><br />
( 속성- type, value, disabled, name ) <br />
( HTML5추가 속성-formaction, formenctype, formmethod, formtarget <br />
<span style="padding-left:140px;"></span>-> 브라우저가 덜 지원하는 속성 <br />
<span style="padding-left:140px;"></span>form, formnovalidate, autofocus ) <br />
<br />
<button> 텍스트 나 이미지와 같은 내용을 넣을 수 있습니다. <br />
이것은 <input> 요소 생성 버튼 사이의 차이입니다. <br />
<button> 태그는 직접 해보셔야 이해가 빠릅니다. <br />
<br />
<hr />
<div id="ex_view2">
<style type="text/css">
<!--
.button_atte_value{ border-collapse:collapse; }
.button_atte_value th{ text-align:left; }
.button_atte_value td{ padding-left:10px; }
-->
</style>
<form name="button_type" id="button_type" method="post" >
<p><b>예제 - <button>속성 type값 리스트</b></p>
<table border=1 class="button_atte_value">
<tr>
<th><button</th><td>
<button name="atte_type">기본</button></td>
</tr>
<tr>
<th><button type="button"=></th><td>
<button type="button" name="atte_type_button">type=버튼</button></td>
</tr>
<tr>
<th><button type="submit"=></th><td>
<button type="submit" name="atte_type_submit">type=폼보냄</button></td>
</tr>
<tr>
<th><button type="reset"=></th><td>
<button type="reset" name="atte_type_reset">type=폼리셋</button></td>
</tr>
</table>
<p><b>예제 - <button>속성 value값 </b></p>
<table border=1 class="button_atte_value">
<tr>
<th><button</th><td>
<button name="atte_type_value" value="value">value값은 버튼 자체가 양식을 전송하는데 사용된 경우,<br />
폼에서 단추와 해당 값은 제출됩니다.</button></td>
</tr>
</table>
<p><b>예제 - <button>속성 disabled값 리스트</b></p>
<table border=1 class="button_atte_value">
<tr>
<th><button disabled=></th><td>
<button disabled name="atte_disabled">버튼 사용 금지</button></td>
</tr>
</table>
<p><b>예제 - <name>속성(이름지정)이건 생략...무진장 썼기 때문<br /></b></p>
</form>
</div>
</body>
</html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기

<button
<button type="button"=>
<button type="submit"=>
<button type="reset"=>

<button

<button disabled=>

<button></button>

<button> 클릭 할 수있는 버튼을 정의합니다.

속성-type, value, disabled, name

HTML5추가 속성-formaction, formenctype, formmethod, formtarget

브라우저가 덜 지원하는 속성(HTML5추가 속성)

form, formnovalidate, autofocus

위 소스에서는 HTML5추가 속성은 생략했습니다.

그외 XHTML 소스의 예제는 위에서 보기로 보시고

아래 버튼 클릭하시면 설명이 나옵니다.

태그 속성 보기(접어두었습니다.)

**속성 설명**
속성명	설명
type	버튼의 유형을 지정합니다.
value	<FORM>에서 <button>위한 초기 값을 지정합니다. ( 버튼 자체 양식 전송 )
disabled	요소를 사용하지 않도록 지정합니다.(비활성화)
name	요소의 이름을 지정합니다.

Global Attributes 지원합니다.

Global Event Attributes 지원합니다.

출처&인용 : http://www.w3schools.com/tags/tag_button.asp

저작자표시 비영리 변경금지

'HTML > xhtml문법' 카테고리의 다른 글

<form>-<fieldset></fieldset> <legend></legend> 관련 요소 주위에 상자 그림 (0)	2014.01.24
<form> - <select> <option> <optgroup> 선택 목록 작성 (0)	2014.01.24
<textarea></textarea> 여러 줄 텍스트 입력 (0)	2014.01.22
<form>-<input>, <input /> <label></label> 입력 필드 지정 (0)	2014.01.22
<form></form> 폼 양식 속성 설명 (0)	2014.01.22