Tôi có thể lồng một phần tử <button> bên trong <a> bằng HTML5 không?

Tôi đang làm như sau:

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

Điều này hoạt động tốt nhưng tôi gặp lỗi xác thực HTML5 có nội dung "Nút phần tử" không được lồng trong phần tử "một nút".

Bất cứ ai có thể cho tôi lời khuyên về những gì tôi nên làm?

Không , nó không hợp lệ HTML5 theo Tài liệu Spec HTML5 từ W3C :

Mô hình nội dung: Minh bạch , nhưng không được có hậu duệ nội dung tương tác .

Phần tử có thể được bao quanh toàn bộ đoạn văn, danh sách, bảng, v.v., thậm chí toàn bộ các phần, miễn là không có nội dung tương tác trong (ví dụ: các nút hoặc các liên kết khác).

Nói cách khác, bạn có thể lồng bất kỳ phần tử nào bên trong <a>ngoại trừ các phần sau:

• <a>

• <audio>(nếu thuộc tính điều khiển có mặt)

• <button>

• <details>

• <embed>

• <iframe>

• <img>(nếu thuộc tính usemap có mặt)

• <input>(nếu thuộc tính type không ở trạng thái ẩn )

• <keygen>

• <label>

• <menu>(nếu thuộc tính type ở trạng thái thanh công cụ )

• <object>(nếu thuộc tính usemap có mặt)

• <select>

• <textarea>

• <video>(nếu thuộc tính điều khiển có mặt)

Nếu bạn đang cố gắng có một nút liên kết đến một nơi nào đó, hãy bọc nút đó bên trong một <form>thẻ như sau:

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

Tuy nhiên, nếu <button>thẻ của bạn được tạo kiểu bằng CSS và không giống như tiện ích của hệ thống ... Hãy tạo cho mình một ưu tiên, tạo một lớp mới cho <a>thẻ của bạn và tạo kiểu giống như vậy.

Nếu bạn đang sử dụng Bootstrap 3 , điều này hoạt động khá tốt

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

Không.

Giải pháp sau đây dựa vào JavaScript.

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

Nếu nút là để được đặt bên trong một hiện <form>với method="post", sau đó đảm bảo nút có thuộc tính type="button"nếu không thì nút sẽ đệ trình các hoạt động POST. Theo cách này, bạn có thể có một <form>nút chứa hỗn hợp các nút thao tác GET và POST.

Tôi vừa mới nhảy vào cùng một vấn đề và tôi đã giải quyết nó thay thế thẻ 'nút' thành thẻ 'span'. Trong trường hợp của tôi, tôi đang sử dụng bootstrap. Đây là cách nó trông như thế nào:

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

Sẽ thực sự kỳ lạ nếu điều đó hợp lệ và tôi hy vọng nó không hợp lệ. Có nghĩa là gì khi có một yếu tố có thể nhấp bên trong một yếu tố có thể nhấp khác? Đó là cái gì - một nút, hoặc một liên kết?

Một tùy chọn khác là sử dụng thuộc tính onclick của nút:

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

Điều này hoạt động, tuy nhiên, người dùng sẽ không thấy liên kết được hiển thị trên di chuột như họ sẽ làm nếu nó nằm trong phần tử.

Ngày nay, ngay cả khi thông số kỹ thuật không cho phép, nó "dường như" vẫn hoạt động để nhúng nút trong <a href...><button ...></a>thẻ, FWIW ...

Bạn có thể thêm một lớp vào nút và đặt một số tập lệnh chuyển hướng nó.

Tôi làm theo cách này:

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

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

tại sao không..bạn cũng có thể nhúng hình ảnh vào nút

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

Giải thích và giải pháp làm việc tại đây: Howto: div with onclick bên trong div khác với onclick javascript

bằng cách thực thi tập lệnh này trong trình xử lý nhấp chuột bên trong của bạn:

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

HTML5 là bất hợp pháp khi nhúng một yếu tố nút bên trong một liên kết.

Tốt hơn để sử dụng CSS trên mặc định và: trạng thái hoạt động (đã nhấn):

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>

Tôi thử các giải pháp javascript của bạn, nhưng đối với công việc tôi cần chèn e.preventDefault();chức năng javascript của mình.

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

Sử dụng thuộc tính định dạng bên trong nút

Tái bút Nó chỉ hoạt động nếu loại nút của bạn = "gửi"

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