Могу ли я вложить элемент <button>в <a>, используя HTML5?

Question

Я делаю следующее:

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

Это работает хорошо, но я получаю ошибку проверки HTML5, которая говорит, что «элемент» кнопка »не должна быть вложена в элемент« кнопка ».

Кто-нибудь может дать мне совет, что мне делать?

Answer 1

Нет , недопустимый HTML5 в соответствии с документом HTML5 от W3C :

Модель содержимого: Прозрачный , но не должно быть интерактивного контента потомка.

Элемент a может быть обернут вокруг целых абзацев, списков, таблиц и т. Д., Даже целых разделовпри условии, что внутри нет интерактивного содержимого (например, кнопок или других ссылок).

Другими словами, вы можете вкладывать любые элементы в <a>, кроме следующих:

• <a>

• <audio> (если присутствует атрибут controls )

• <button>

• <details>

• <embed>

• <iframe>

• <img> (при наличии атрибута usemap )

• <input> (если тип атрибут не находится в состоянии скрыто )

• <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> и стилизуйте его таким же образом.

Answer 2

Если вы используете 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>

Answer 3

Нет.

Следующее решение основано на JavaScript.

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

Если кнопка должна быть размещена внутри существующего <form> с method="post", убедитесь, что кнопка имеетатрибут type="button" в противном случае кнопка отправит операцию POST.Таким образом, вы можете получить <form>, который содержит комбинацию кнопок операций GET и POST.

Answer 4

Я только что столкнулся с той же проблемой и решил ее, заменив тег 'button' на тег 'span'.В моем случае я использую бутстрап.Вот как это выглядит:

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

Answer 5

Было бы очень странно, если бы это было допустимо, и я ожидал бы, что оно будет недействительным.Что должно означать иметь один кликабельный элемент внутри другого кликабельного элемента?Что это - кнопка или ссылка?

Answer 6

Другой вариант - использовать атрибут onclick кнопки:

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

Это работает, однако пользователь не увидит ссылку, отображаемую при наведении курсора, как если бы она находилась внутри элемента.

Answer 7

В наши дни, даже если спецификация не позволяет этого, «кажется» все еще работает встроить кнопку в тег <a href...><button ...></a>, FWIW ...

Answer 8

Объяснение и рабочее решение здесь: Howto: div с onclick внутри другого div с javascript onclick

, выполнив этот скрипт в вашем внутреннем обработчике кликов:

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

Answer 9

Я пробую ваши 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>   

Answer 10

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