Le style CSS des balises de formulaire

Autant que je suis conscient, un <form></form> balise est censé être invisible, comme une partie d'une page web

Il est censé représenter une forme. Qui est certainement visible chose

et lors de la conception d'un formulaire, il faut utiliser les balises div (ou équivalent) pour représenter la forme physique de la structure.

<div> est la balise de dernier recours. L'utiliser quand quelque chose de plus approprié (comme <form> ou <fieldset>) n'existe pas.

Est-il acceptable (selon les normes du W3C) pour appliquer le style CSS à un <form></form> tag?

Baring bugs dans les navigateurs, il est acceptable de style de n'importe quel élément dans le document.

et quelqu'un peut me pointer dans la bonne direction pour la littérature sur cette question?

Car il n'y a rien de spécial à propos de l'élément, il n'a pas besoin de la documentation spécifique.

Le plus proche que je peux penser à est de cet avertissement a partir de la spécification CSS 2.1:

Note. CSS donne autant de pouvoir à l'attribut "class", que les auteurs, on pourrait concevoir un design qui leur est propre "langue du document" sur la base des éléments avec presque pas de présentation associés (tels que les DIV et SPAN en HTML) et en attribuant des informations de style par le biais de l'attribut "class". Les auteurs doivent éviter cette pratique car les éléments de structure d'un document en langue ont souvent reconnu et accepté de significations et de l'auteur-défini les classes peut pas.

... mais que la question est un tronçon puisque vous êtes suggérant l'aide d'un balisage sémantique, mais l'ajout inutile divs purement pour le style.

OriginalL'auteur Quentin

Style de la forme-tag dans certaines occasions, peut être utile.
Assurez-vous que vous faites le formulaire balise agir comme si c'était une couche.
Pas besoin de le faire
<div id="myform"><form></form></div>

Juste ne forme {display:block;} et il agit comme s'il est un div.

Sur la sémantique et puisque vous me demandez de le faire correctement:
Une erreur commune est d'utiliser des divs pour les étiquettes, et puis perdre votre facilité d'utilisation.

Utiliser le langage HTML pour quoi il est conçu pour!
Comme un exemple de ceci est la façon dont la forme de base pourrait ressembler dans HTML conformément à la norme.

<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>

À l'aide de HTML comme ceci permet à l'utilisateur de cliquer sur les étiquettes ou appuyez sur tab pour obtenir le focus sur le champ souhaité.

Style cela peut être difficile, néanmoins, vous n'avez pas besoin de beaucoup de code si vous savez ce que vous faites.

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; }

exemple: http://jsfiddle.net/tive/BB85w/

OriginalL'auteur Tim Vermaelen

Je dirais oui, vous pouvez le style de la forme comme vous pouvez le style de toute autre balise. Je préfère le style de l'élément de formulaire que d'ajouter une div que j'essaie de garder mon HTML minime.

Aussi, SitePoint a un relativement récent article sur le style des formes qui commence avec le style de la balise form.

OriginalL'auteur Ana