web-dev-qa-db-ja.com

<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に依存しない、角が丸いボタンを作成したいと思います。 button要素に3つのdivを作成しました。各divには独自のスプライトがあり、丸みを帯びて表示され、さまざまな幅に対応できます。他のリソースでは、ボタン要素に画像などのサブ要素を含めることを望んでいたユーザー向けにボタン要素が作成されたが、何らかの理由でdivが無効になっているようです。

Divがボタン要素内で許可されないのはなぜですか？

この問題の望ましい解決策は何ですか？

編集2：

なぜ入力を使用しないのですか？入力は目的のレイアウトにできないため

なぜdivを使用しないのですか？ JavaScriptを持たないユーザーはフォームを送信できないためです。

htmlhtml5w3c-validation
18
TFennis

カスタムボタンを使用する場合は、ボタンタグをdivまたは入力に置き換える必要があります。この場合、divが必要なようです。必要なイベントハンドラーを追加するだけです（送信用）。

これ は物事を少し明確にするのに役立つかもしれません。

2
Jlange

さて、コメントを投稿しましたが、愛はありません。

ボタン内に画像を配置するだけで、W3Cの有効なボタンを実現できます。

フィドル

画像を作成し、それらにテキストを追加する必要があります。ただし、コーナー用の画像をすでに作成しているので、それほど難しくないはずです。

また、 image sprites は素晴らしいことです。

.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つの画像を使用したい場合は、ここに更新されたバージョンがあります。

button {
  margin: 0;
  padding: 0;
  border: none;
}
<button>
  <img src="http://placehold.it/50x50" /><img src="http://placehold.it/50x50" /><img src="http://placehold.it/50x50" />
</button>

また、追加のCSSがなければ、<img />タグを同じ行に追加するか、画像の間にスペースがあるものとして処理します。

2
Wild Beard

フォームを使用している場合は、代わりにボタンをクリック可能なdivに変更できます。例えば：

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

または、フォーム名またはIDがわかっている場合は、インラインjavascriptをdocument.getElementById("form-id").submit()などのように変更できます

0
Jonathan