HTML5를 사용하여 <a> 안에 <button> 요소를 중첩시킬 수 있습니까?

나는 다음을하고있다 :

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>  

이것은 잘 작동하지만 "요소 '버튼'이 요소 '버튼'안에 중첩되어서는 안된다는 HTML5 유효성 검사 오류가 발생합니다.

누구든지 내가해야 할 일에 대해 조언을 줄 수 있습니까?

아니요 , W3C 의 HTML5 사양 문서 에 따르면 유효한 HTML5가 아닙니다 .

콘텐츠 모델 : 투명 하지만 대화 형 콘텐츠 하위 항목 이 없어야합니다 .

대화 형 컨텐츠가없는 한 (예 : 단추 또는 기타 링크) 전체 단락, 목록, 표 등 전체를 감싸는 요소가있을 수 있습니다.

즉, <a>다음을 제외한 모든 요소를 ​​중첩 할 수 있습니다 .

• <a>

• <audio>( controls 속성이있는 경우)

• <button>

• <details>

• <embed>

• <iframe>

• <img>( usemap 속성이있는 경우)

• <input>( type 속성이 숨겨진 상태 가 아닌 경우 )

• <keygen>

• <label>

• <menu>( type 속성이 툴바 상태 인 경우)

• <object>( usemap 속성이있는 경우)

• <select>

• <textarea>

• <video>( controls 속성이있는 경우)

어딘가에 연결되는 버튼을 사용하려는 경우 다음과 <form>같이 해당 버튼을 태그 안에 넣습니다 .

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

그러나 <button>태그가 CSS를 사용하여 스타일이 지정되고 시스템 위젯처럼 보이지 않는 경우 ... 선호하는대로 <a>태그에 대한 새 클래스를 만들고 같은 방식으로 스타일을 지정하십시오.

Bootstrap 3을 사용하는 경우 이것은 잘 작동합니다

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

아니.

다음 솔루션은 JavaScript를 사용합니다.

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

버튼을와 <form>함께 기존 안에 배치 method="post"하려면 버튼에 속성이 있는지 확인하십시오. type="button"그렇지 않으면 버튼이 POST 작업을 제출합니다. 이런 식 <form>으로 GET과 POST 조작 버튼이 혼합 된 것을 가질 수 있습니다 .

방금 동일한 문제로 뛰어 들었고 'button'태그를 'span'태그로 대체하여 해결했습니다. 제 경우에는 부트 스트랩을 사용하고 있습니다. 이것은 다음과 같습니다

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a> 

그것이 유효하다면 정말 이상 할 것이고, 나는 그것이 유효하지 않을 것으로 기대합니다. 클릭 가능한 요소가 다른 클릭 가능한 요소 내에 있다는 것은 무엇을 의미합니까? 버튼 또는 링크 중 어느 것입니까?

다른 옵션은 버튼의 onclick 속성을 사용하는 것입니다.

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

그러나 이것은 작동하지만 사용자는 링크가 요소 내부에있는 것처럼 링크 위에 표시되지 않습니다.

요즘 사양에서 허용하지 않더라도 <a href...><button ...></a>태그에 FWIW ...

버튼에 클래스를 추가하고 일부 스크립트를 리디렉션 할 수 있습니다.

나는 이것을 이렇게한다 :

<button class='buttonClass'>button name</button>

<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>

왜 .. 당신은 버튼에 그림을 포함 할 수 있습니다

<FORM method = "POST" action = "https://stackoverflow.com"> 
    <button type="submit" name="Submit">
        <img src="img/Att_hack.png" alt="Text">
    </button>
</FORM> 

설명 및 작업 솔루션 : 방법 : onclick 자바 스크립트가있는 다른 div 안에 onclick이있는 div

내부 클릭 핸들러에서이 스크립트를 실행하여

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

HTML5에서 링크에 버튼 요소를 포함시키는 것은 불법입니다.

기본 및 : active (pressed) 상태에서 CSS를 사용하는 것이 좋습니다.

body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}

<p><a class="Button" href="www.stackoverflow.com">Click me<a>

귀하의 자바 스크립트 솔루션을 시도하지만 작업을 위해 e.preventDefault();자바 스크립트 함수에 삽입해야 합니다.

<!-- Add your HTML !-->
<a id="id_primary_link" href="my_primary_link.php">
  <button onclick="my_trick_function('my_secondary_link.php')">
</a>


<!-- Add your javascript function !-->
<script>
function my_trick_function(secondary_link){
    $('#id_primary_link').click(function(e) {
        e.preventDefault();
        window.location.replace(secondary_link);
    });
}   
</script>   

버튼 안에 formaction 속성 사용

추신! 버튼 type = "submit"인 경우에만 작동합니다.

<button type="submit" formaction="www.youraddress.com">Submit</button>