<strong><button> 태그 </strong> <br>정의 및 사용법 <br><button> 태그는 버튼을 정의합니다. <br>버튼 요소 내부에는 텍스트나 이미지 등의 콘텐츠를 배치할 수 있습니다. 이것이 이 요소와 입력 요소를 사용하여 생성된 버튼의 차이점입니다. <br><button> 컨트롤은 <inputtype="button">보다 더 강력한 기능과 풍부한 콘텐츠를 제공합니다. <button> 태그와 </button> 태그 사이의 모든 내용은 텍스트나 멀티미디어 콘텐츠와 같은 허용되는 본문 콘텐츠를 포함한 버튼의 콘텐츠입니다. 예를 들어 버튼에 이미지와 관련 텍스트를 포함하고 이를 사용하여 버튼에 매력적인 마크업 이미지를 만들 수 있습니다. <br>금지되는 유일한 요소는 이미지 매핑입니다. 마우스와 키보드에 민감한 동작이 양식 버튼의 동작을 방해하기 때문입니다. <br>항상 버튼의 유형 속성을 지정하세요. Internet Explorer의 기본 유형은 "버튼"인 반면 다른 브라우저(W3C 사양 포함)의 기본값은 "제출"입니다. <br><strong>브라우저 지원</strong> <br>모든 주요 브라우저는 <button> 태그를 지원합니다. <br><strong>중요 </strong>: HTML 양식에서 버튼 요소를 사용하는 경우 브라우저마다 다른 값이 제출됩니다. Internet Explorer는 <button>과 <button/> 사이에 텍스트를 제출하고 다른 브라우저는 value 속성의 내용을 제출합니다. 버튼을 생성하려면 HTML 양식의 입력 요소를 사용하세요. <br><strong>참고</strong> <br><button> 태그를 사용할 때는 이를 당연하게 여기고 <inputtype="button">으로 사용하기 쉽습니다. 다음과 같은 잘못된 사용법: <br>1. $('#customBtn').val()을 통해 버튼</button>값을 가져옵니다.<br>IE(IE 커널)에서 작동하는 방식입니다. 이를 사용하는 것은 "테스트"가 아닌 "버튼"입니다. IE가 아닌 경우 얻은 값은 "테스트"입니다. 위의 빨간색으로 표시된 첫 번째 문장을 따르십시오. <br>이것은 <inputtype="button">과 구별되어야 합니다. <br>이 두 가지 방법을 통해 $('#customBtn').val(), $('#customBtn').attr('value')는 다음과 같이 다양한 브라우저에서 값을 얻습니다. <br> <table class="jbborder"> <tbody> <tr> <td width="109"> <p align="center">Browser/Value</p> </td> <td width="189"> <p align="center">$('#customBtn').val()</p> </td> <td width="265"> <p align="center">$('#customBtn').attr('value')</p> </td> </tr> <tr> <td width="109"> <p align="center">Firefox13.0</p> </td> <td width="189"> <p align="center">test</p> </td> <td width="265"> <p align="center">test</p> </td> </tr> <tr> <td width="109"> <p align="center">Chrome15.0</p> </td> <td width="189"> <p align="center">test</p> </td> <td width="265"> <p align="center">test</p> </td> </tr> <tr> <td width="109"> <p align="center">Opera11.61</p> </td> <td width="189"> <p align="center">test</p> </td> <td width="265"> <p align="center">test</p> </td> </tr> <tr> <td width="109"> <p align="center">Safari5.1.4</p> </td> <td width="189"> <p align="center">test</p> </td> <td width="265"> <p align="center">test</p> </td> </tr> <tr> <td width="109"> <p align="center">IE9.0</p> </td> <td width="189"> <p align="center">按钮</p> </td> <td width="265"> <p align="center">按钮</p> </td> </tr> </tbody> </table> <br>아래 코드를 테스트하여 확인하세요<br><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode14'));"><u>코드 복사</u></span></div>코드는 다음과 같습니다.</div> <div class="msgborder" id="phpcode14"> <br><html> <br><head> <br><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> ;scripttype ="text/javascript"src="jquery-1.4.4.min.js"></script> <br><scripttype="text/javascript"> { <br>$('#test1').click(function(){ <br>alert($('#customBtn').attr('value')); <br>}); '# test2').click(function(){ <br>alert($('#customBtn').val()); <br>}) <br></script> <br></head> <br><body> <br><buttonid="customBtn"value="test">按钮</button> inputtype= "button"id="test1"value="getattr"/> <br><inputtype="button"id="test2"value="getval"/> <br></body> 🎜> </html> <br><br><br>2. 실수로 <button> 태그를 <form> inputtype= "submit"/> <br>무엇을 의미하는지 이해하려면 위에 빨간색으로 표시된 두 번째 문장을 참조하세요. <br><button> 태그를 <form>의 입력 요소로 처리하지 마세요. <br>아래 코드를 테스트하여 확인하세요<br> </div> <br><br><br><br>코드 복사<br><br><div class="msgheader">코드는 다음과 같습니다.<div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode15'));"> <u><html> </u><body> </span><formaction=""> </div><버튼>버튼</button> =" inputsubmit"/> </div><inputtype="button"value="inputbutton"/> <div class="msgborder" id="phpcode15"></form> <br></html> 🎜> <br> </div>