Чи можна вкласти елемент <кнопка> всередині <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>(якщо атрибут типу не знаходиться в прихованому стані)

• <keygen>

• <label>

• <menu>(якщо атрибут типу знаходиться в режимі панелі інструментів )

• <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" на "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> 

Пояснення та робоче рішення тут: 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>

Я спробую ваші рішення JavaScript, але для роботи мені потрібно вставити e.preventDefault();функцію javascript.

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

Використовуйте атрибут формації всередині кнопки

PS! Він працює лише в тому випадку, якщо ваша кнопка type = "submit"

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