HTML5 kullanarak bir <a> içine <düğmesi> öğesi yerleştirebilir miyim?

Aşağıdakileri yapıyorum:

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

Bu iyi çalışıyor, ancak "Element 'button' öğesinin 'a button' öğesi içinde iç içe geçmemesi gerektiğini söyleyen bir HTML5 doğrulama hatası alıyorum.

Birisi bana ne yapmam gerektiği konusunda tavsiyede bulunabilir mi?

Hayır , W3C'nin HTML5 Teknik Belgesine göre geçerli HTML5 değil :

İçerik modeli: Şeffaf , ancak etkileşimli içerik olmamalıdır torunu .

A öğesi, içinde etkileşimli içerik (ör. Düğmeler veya diğer bağlantılar) olmadığı sürece tüm paragraflar, listeler, tablolar vb. Etrafına sarılabilir.

Başka bir deyişle, <a>aşağıdakiler dışında herhangi bir öğeyi iç içe yerleştirebilirsiniz :

• <a>

• <audio>( kontrol özelliği mevcutsa)

• <button>

• <details>

• <embed>

• <iframe>

• <img>( usemap özelliği mevcutsa)

• <input>( type özelliği gizli durumda değilse )

• <keygen>

• <label>

• <menu>( type özelliği araç çubuğu durumundaysa)

• <object>( usemap özelliği mevcutsa)

• <select>

• <textarea>

• <video>( kontrol özelliği mevcutsa)

Bir yere bağlanan bir düğmeye sahip olmaya çalışıyorsanız, bu düğmeyi bir <form>etiketin içine şu şekilde sarın :

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

Ancak, <button>etiketiniz CSS kullanılarak stilize edilmişse ve sistemin widget'ı gibi görünmüyorsa ... Kendinize bir iyilik yapın, <a>etiketiniz için yeni bir sınıf oluşturun ve aynı şekilde stil verin.

Bootstrap 3 kullanıyorsanız , bu oldukça iyi çalışır

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

Hayır.

Aşağıdaki çözüm JavaScript'e dayanmaktadır.

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

Düğmesi mevcut bir içine yerleştirilmiş edilecekse <form>ile method="post", daha sonra düğme özelliğini sahip olmak type="button"aksi düğmesi POST işlemi sunacaktır. Bu şekilde <form>GET ve POST çalıştırma düğmelerinin bir karışımını içeren bir anahtarınız olabilir.

Ben sadece aynı konuya atladım ve 'span' etiketi yerine 'button' etiketi yerine çözdüm. Benim durumumda bootstrap kullanıyorum. Şöyle görünüyor:

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

Bu geçerli olsaydı gerçekten garip olurdu ve geçersiz olmasını beklerdim. Bir tıklanabilir öğenin başka bir tıklanabilir öğenin içinde olması ne anlama gelir? Hangisi - bir düğme mi yoksa bir bağlantı mı?

Başka bir seçenek, düğmenin onclick özelliğini kullanmaktır:

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

Ancak bu işe yarar, kullanıcı imlecin öğenin içindeymiş gibi göründüğü bağlantıyı görmez.

Bu günlerde spec buna izin vermese bile, düğmeye bir <a href...><button ...></a>etiket, FWIW gömmek için hala çalışıyor gibi görünüyor ...

Düğmeye bir sınıf ekleyebilir ve yeniden yönlendiren bir komut dosyası koyabilirsiniz.

Bunu şu şekilde yaparım:

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

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

neden olmasın ... ayrıca resim düğmesini de gömebilirsiniz

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

Burada açıklama ve çalışma çözümü: Nasıl: onclick javascript ile başka bir div içinde onclick ile div

bu komut dosyasını iç tıklama işleyicinizde çalıştırarak:

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

Bir bağlantının içine düğme öğesi gömmek HTML5'te yasa dışıdır.

Varsayılan ve: aktif (basılı) durumlarında CSS kullanmak daha iyidir:

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>

Javascript çözümlerinizi deneyin, ancak iş için e.preventDefault();benim javascript işlevi eklemek gerekir .

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

Düğmenin içindeki formaction özelliğini kullanma

PS! Yalnızca düğme türünüz = "gönder" durumunda çalışır

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