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

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

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

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

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

Нет , это недопустимый HTML5 в соответствии со спецификацией HTML5 Spec Document от W3C :

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

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

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

• <a>

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

• <button>

• <details>

• <embed>

• <iframe>

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

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

• <keygen>

• <label>

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

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

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

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

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

Нет.

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

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

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

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

Другой вариант - использовать атрибут кнопки 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>

Используйте атрибут formaction внутри кнопки

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

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