Почему элемент <button> не может содержать <div>?

Моя компания строит веб-сайт, и у нас были некоторые проблемы с библиотекой JavaScript, которая не заменила что-то. Мы решили бросить наш HTML-код в валидатор W3C, и он сообщил нам, что это незаконно иметь тег <div> внутри тега <button>.

<button class="button" type="submit">
    <div class="buttonNormalLargeLeft"><!--#--></div>
    <div class="buttonNormalLargeCenter">Search Flights</div>
    <div class="buttonNormalLargeRight"><!--#--></div>
</button>

Результаты в:

Line 287, Column 46: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

Изменить: уточнить, что мы пытаемся сделать здесь. Мы хотим сделать кнопку с закругленными углами, которая не полагается на box-radius. Мы сделали 3 divs в элементе кнопки, каждый из которых имеет свой собственный спрайт, чтобы он выглядел закругленным и позволял различную ширину. В других ресурсах указывается, что элемент кнопки был создан для пользователей, которые хотели, чтобы кнопка содержала вспомогательные элементы, такие как изображения, но по какой-либо причине деления оказались некорректными.

Почему divs не допускаются внутри элементов кнопки?

Какое желаемое решение этой проблемы?

Edit2:

Почему бы не использовать ввод? Поскольку входы не могут иметь желаемый макет

Почему бы не использовать div? Поскольку пользователи без JavaScript не смогут отправить форму.

Ответ 1

Если вы хотите использовать пользовательскую кнопку, вам придется заменить тег кнопки на div или на вход. Похоже, что div - это то, что вы хотите в этом случае. Вам просто нужно добавить все необходимые обработчики событий (для вашей отправки).

Это может помочь немного прояснить ситуацию.

Ответ 2

Ну, я написал комментарий, но не люблю.

Вы можете получить действительную кнопку W3C, просто поместив изображение внутри кнопки.

скрипка

Конечно, вам придется создавать свои изображения и добавлять к ним текст. Но так как вы уже создали изображения для углов, это не должно быть слишком сложно.

Также спрайты изображений - отличная вещь.

.test {
  width: 258px;
  height: 48px;
  background: none;
  border: 1px solid transparent;
}
.test:active {
  outline: 0;
}
.test > img {
  width: 258px;
  height: 45px;
  opacity: 1;
  background: url('http://www.copygirlonline.com/wp-content/plugins/maxblogpress-subscribers-magnet/lib/include/popup1/images/btn/blue-button.png');
  background-position: -3px 0px;
}
.test > img:hover {
  background-position: -3px -50px;
}

<button class="test">
  <img src="http://alistapart.com/d/cssdropshadows/img/shadowAlpha.png" />
</button>

Ответ 3

Если вы используете форму, вместо нее вы можете изменить кнопку, чтобы она была интерактивной. Например:

<div role="button" onclick="$(this).closest('form').submit()">
    <!-- your child content here -->
</div>

В качестве альтернативы, если вы знаете имя или идентификатор формы, вы можете изменить встроенный JavaScript на что-то вроде document.getElementById("form-id").submit()