11

私の知る限り、<form></form>タグはWebページの一部としては見えないはずであり、フォームを設計するときは、物理的なフォーム構造を表すためにdivタグ（または同等のもの）を使用する必要があります。

（W3C標準に従って）CSSを<form></form>タグに適用することは許容されますか？そして、誰かがこの問題に関する文献の正しい方向に私を向けることができますか？

4

5 に答える 5

17

私の知る限り、<form></form>タグはWebページの一部として非表示になっているはずです

フォームを表すことになっています。それは間違いなく目に見えるものです

また、フォームを設計するときは、物理的なフォーム構造を表すためにdivタグ（または同等のもの）を使用する必要があります。

<div>最後の手段のタグです。より適切なもの（<form>またはなど<fieldset>）が存在しない場合に使用します。

（W3C標準に従って）CSSを<form></form>タグに適用することは許容されますか？

ブラウザのバグを除いて、ドキュメント内の任意の要素のスタイルを設定できます。

そして、誰かがこの問題に関する文献の正しい方向に私を向けることができますか？

要素について特別なことは何もないので、特定のドキュメントは必要ありません。

私が考えることができる最も近いものは、CSS2.1仕様からのこの警告です：

ノート。CSSは「クラス」属性に非常に大きな力を与えるため、作成者は、関連するプレゼンテーションがほとんどない要素（HTMLのDIVやSPANなど）に基づいて独自の「ドキュメント言語」を設計し、「クラス」属性を介してスタイル情報を割り当てることができます。 。ドキュメント言語の構造要素は意味を認識して受け入れていることが多く、作成者が定義したクラスは認識していない可能性があるため、作成者はこの方法を避ける必要があります。

…しかし、セマンティックマークアップの使用を提案しているので、それを質問に関連付けるのは簡単ですが、純粋にスタイリングのために不要なdivを追加します。

于 2012-07-23T14:42:29.150 に答える
4

フォームはページの単なる別の要素です（入力/その他の要素を含むことができるdivと考えてください）。他の要素と同じようにCSSでスタイルを設定できます。すべて完全に有効です。

于 2012-07-23T14:41:30.530 に答える
1

場合によっては、フォームタグのスタイルを設定すると便利です。フォームタグをレイヤーのように機能させるようにしてください。する必要はありません <div id="myform"><form></form></div>

{display：block;}を形成するだけで、divのように機能します。

セマンティクスについて、そしてそれを適切に行うように求めているので：よくある間違いは、ラベルにdivを使用すると、使い勝手が悪くなることです。

HTMLを使用して、設計された目的に合わせてください。例として、これは、標準に従ってHTMLで基本的なフォームがどのように見えるかを示しています。

<form method="post" action="http://www.someurl.com/formHandler.php">
    <fieldset>
        <legend>Personal info</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" class="text" />
        <label for="email">Email</label>
        <input type="text" id="email" class="text" />
    </fieldset>
    <fieldset>
        <legend>Optional</legend>
        <label for="info">Comments?</label>
        <textarea id="info"></textarea>
        <input type="submit" value="submit" class="submit" />
    </fieldset>
</form>

このようにHTMLを使用すると、ユーザーはラベルをクリックするか、Tabキーを押して、目的のフィールドにフォーカスを合わせることができます。

これをスタイリングするのは難しいかもしれませんが、自分が何をしているのかを知っていれば、多くのコードは必要ありません。

form { display:block; background-color: #9e9e9e; padding: 20px; width: 540px; /*200 + 300 + (20 * 2)*/ }
legend { font-weight: bold; }
label { display: inline-block; width: 200px; float: left; clear: left; }
input.text { display: block; width: 300px; float: left; }
input.submit { margin:20px 0 0 200px; width: auto; }

例： http： //jsfiddle.net/tive/BB85w/

于 2012-07-23T16:12:14.713 に答える
1

form要素は他の要素と同じようにスタイル設定でき、ブラウザのデフォルトスタイルシートにデフォルトのスタイルがあります。CSS2.1仕様のHTML4のデフォルトスタイルシートを参照してください。最も重要な機能は、デフォルトでは、form要素が空の行に対応する上下の余白を持つブロックとしてレンダリングされることです。（ただし、ブラウザーが実際にこれらのマージンを抑制する場合もあります。）

于 2012-07-23T17:47:45.177 に答える
0

はい、他のタグと同じようにフォームのスタイルを設定できます。HTMLを最小限に抑えようとしているので、divを追加するよりも、フォーム要素のスタイルを設定したいと思います。

また、SitePointには、フォームタグ自体のスタイリングから始まるフォームのスタイリングに関する比較的最近の記事があります。

于 2012-07-23T14:45:08.280 に答える