ฉันสามารถวางองค์ประกอบ <button> ไว้ใน <a> โดยใช้ HTML5 ได้หรือไม่

ฉันกำลังทำสิ่งต่อไปนี้:

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

สิ่งนี้ใช้ได้ดี แต่ฉันได้รับข้อผิดพลาดในการตรวจสอบความถูกต้องของ HTML5 ที่ระบุว่า "องค์ประกอบ" ปุ่ม "จะต้องไม่ซ้อนอยู่ภายในองค์ประกอบ 'ปุ่ม'

ทุกคนสามารถให้คำแนะนำกับฉันเกี่ยวกับสิ่งที่ฉันควรทำอย่างไร

ไม่มันไม่ถูกต้อง HTML5 ตามเอกสารข้อมูลจำเพาะ HTML5 จาก W3C :

รูปแบบเนื้อหา: โปร่งใสแต่ต้องไม่มีการสืบทอดเนื้อหาแบบโต้ตอบ

องค์ประกอบอาจถูกล้อมรอบทั้งย่อหน้ารายการตารางและอื่น ๆ แม้แต่ส่วนทั้งหมดตราบใดที่ไม่มีเนื้อหาแบบโต้ตอบภายใน (เช่นปุ่มหรือลิงก์อื่น ๆ )

ในคำอื่น ๆ คุณสามารถซ้อนองค์ประกอบใด ๆ ภายใน<a>ยกเว้นต่อไปนี้:

• <a>

• <audio>(หากมีคุณสมบัติการควบคุม )

• <button>

• <details>

• <embed>

• <iframe>

• <img>(หากแอตทริบิวต์usemapมีอยู่)

• <input>(หากแอตทริบิวต์typeไม่อยู่ในสถานะซ่อนเร้น )

• <keygen>

• <label>

• <menu>(หากแอตทริบิวต์typeอยู่ในสถานะแถบเครื่องมือ )

• <object>(หากแอตทริบิวต์usemapมีอยู่)

• <select>

• <textarea>

• <video>(หากมีคุณสมบัติการควบคุม )

หากคุณกำลังพยายามที่จะมีปุ่มที่เชื่อมโยงไปยังบางแห่งให้ตัดปุ่มนั้นไว้ใน<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' เพื่อ 'ขยาย' แท็ก ในกรณีของฉันฉันใช้ bootstrap นี่คือลักษณะ:

<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> 

คำอธิบายและวิธีแก้ปัญหาการทำงานที่นี่: Howto: div กับ onclick ภายใน div อื่นด้วย onclick javascript

โดยรันสคริปต์นี้ในตัวจัดการการคลิกภายในของคุณ:

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

เป็นสิ่งผิดกฎหมายใน HTML5 เพื่อฝังองค์ประกอบปุ่มภายในลิงก์

ดีกว่าที่จะใช้ 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 ภายในปุ่ม

PS! ใช้งานได้เฉพาะเมื่อปุ่มของคุณพิมพ์ = "ส่ง"

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