Могу ли я вставить элемент <button> внутри <a>с помощью HTML5?

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

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

Это работает хорошо, но я получаю ошибку проверки HTML5, в которой говорится: "Элемент 'button' не должен быть вложен в элемент" a button ".

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

Ответ 1

Нет, это недействительно HTML5 в соответствии с HTML5 Spec Document от 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> и создайте его так же.

Ответ 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>

Ответ 3

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

Ответ 4

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

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

Ответ 5

Нет.

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

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

Вы можете добавить класс к кнопке и перенести его script.

Я делаю так:

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

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

Ответ 9

почему бы и нет.. вы также можете добавить изображение на кнопку

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

Ответ 10

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

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

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

Ответ 11

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

Ответ 12

Я использую 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>

Ответ 13

Использовать атрибут форматирования внутри кнопки

PS! Он работает только, если ваша кнопка type = "submit"

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

Ответ 14

<a href="index.html">
  <button type="button">Submit</button>
</a>