2016-03-25 8 views
0

私はモバイルサイト用の簡単なボタンを作成しようとしています。私がこれを研究するほど、より少ない合意を見つけることができます。これは素晴らしいです:ボタンとdiv - どちらを使用しますか?

<a><button>text</button></a> 

しかし、コードの検証に失敗します。

<a><div>text</div></a> 

も素晴らしい作品とコードの検証に合格し、私はdivを憎む:

要素「ボタンは、」この「」要素

の子孫として現れてはなりませんこのためには、幅を指定する必要があり、ボタンのテキストがデータベースフィールドによって動的に生成されているので、これは最高で面倒です。

だから私はボタンのタグを間違ってコーディングしていますか?それとも、コードの検証エラーを無視するだけですか?

+0

あなたはそれが余分な内部タグなしで、ボタンのように見えるようにタグにスタイルを追加することができます。セレクターが:ホバーの場合は、表示:ブロック、余白、および背景が追加されます。 –

+0

何らかの理由でdivを使用しなければならない場合は、それを 'display:inline-block;'に設定するだけで、コンテンツに適合します。または、「」 –

+1

「...あなたは幅を指定する必要があります」を使用してください。私はあなたがdivが何であるかを理解しているとは思わない。 divは一般的なブロックレベルの要素です。幅を指定する必要はありませんが、デフォルトの幅はautoで、コンテナをいっぱいにします。インライン要素が必要な場合は、スパンを使用しますが、インライン要素は垂直マージンやパディングを持つことはできません。 ** that **が動作しない場合は、どちらかを使用して 'display:inline-block'に設定してください。幅を指定する必要はありません(折りたたまれます)。同時に、垂直方向の余白と余白がサポートされます。 –

答えて

3

何かにリンクしていますか? <a>要素を使用します。 <button>は使用しないでください。

フォームを送信していますか? <button>要素を使用し、<a>は使用しないでください。

JavaScriptをトリガーするだけのユーザーコントロールが必要ですか?上記の2つのオプションのうちどれがwhen JavaScript failsに最適かを決定してから使用してください。次に、JSで徐々に強化します。

あなたが選んだ選択肢をあなたが望むように見せるためにCSSを適用します。

2

ボタンでなければならない場合は、クリックすると(おそらくJavaScript経由で)何らかのアクションが実行され、<button>を使用します。

リンクの場合、クリックすると別のページまたは現在のページ内の別の場所に移動します。有効な値はhrefで、<a>を使用します。

意味論的HTMLが重要です。

0

これは、意見が多すぎます(複数の方法があります)が閉鎖に終わることがありますが、少なくとも私の意見の裏には何らかの推論を提供しようとすることができます。

aタグはそのままの形で機能します。彼らはどこにでも移動しなくてもURLを変更することが多く、JavaScriptではデフォルト動作と戦わなければなりません。あなたがそれらの多くを使っているのは、彼らのスタイリングだけです。

デフォルトのナビゲーション動作にhrefタグを使用している場合は、<a class="myprefixButton">と書いて、.buttonにCSSスタイルを設定すると、パディングと丸みのある境界線がボタンのように見えるように設定することをおすすめします。

フォームを送信する場合は<button type="submit">を使用するか、JavaScriptにのみリンクする場合は<button type="button">を使用してください。最後のものはどこからでも継承された振る舞いを全く持たず、何も取り消す必要なしにJSから土台まで構築するのに完璧です。

最後に、のフォームを送信する場合は、<button type="submit">を使用し、フォーム要素で「送信」イベントを待ち受けます。理由は、ユーザーがenterを押すか、アクセシビリティツールキットのような他の形式で提出したければ、提出することです。

関連する問題