la sémantique de la structure pour les pages Html de données

Question

Quelle est la meilleure structure à utiliser lors de la conception d'une forme / vue détaillée pour une lisibilité maximale (accessibilité) et la polyvalence?

À titre d'exemple, l'échafaudage de framework ASP.NET MVC crée un fieldset avec une légende en haut et tous les champs de p (une étiquette et l'ensemble d'entrée / éditeur).

Quelle est la structure la plus polyvalente à utiliser, pensez-vous?

Par exemple, si je veux changer la mise en page plus tard d'avoir deux ou trois champs côte à côte au lieu de haut en bas, je voudrais seulement faire que via CSS, car il est pas structurellement pertinent.

Merci,
Kieron

EDIT: Une recommandation d'amis était d'utiliser dl, dt et ... dds que quelqu'un a des pensées sur cette

Answer 1

J'utilise une structure très similaire à celle générée par un échafaudage ASP.NET, sauf que j'utilise divs au lieu de ps:

<form>
    <fieldset>
        <legend>Legendary Fieldset</legend>
        <div>
            <label for="textBox">Text Input</label>
            <input name="textBox" id="textBox" />
        </div>
        <div>
            <label for="selectBox">Select box</label>
            <select name="selectBox" id="selectBox">
                <option>1</option>
                <option>2</option>
            </select>
        </div>
    </fieldset>
    <!-- more fieldsets if required -->
</form>

J'utilise divs parce que thats me plus sémantiquement correct que p éléments car ils sont destinés aux paragraphes du texte.

Quand il vient coiffer son aussi une structure polyvalente parce que vous pouvez par exemple faire le fieldset 500px de large et le fieldset div 250px de large et flottaient, réalisant ainsi côte à côte. Ou vous pourriez avoir la même largeur pour que le fieldset fieldset div. OU vous pourriez avoir le fieldset et fieldset div la même largeur et puis coller une classe sur certains divs (disons « la moitié ») qui sont la moitié de la largeur et flottaient. Les possibilités sont vraiment infinies.

Dans tous les cas, c'est exactement ce que j'utilise pour jour pour farcir jour -. Mais sa polyvalence, il peut ne pas convenir à toutes les exigences

EDIT En ce qui concerne les listes de définition sont concernés, ils sont des éléments spécialisés qui sémantiquement ne doivent pas être utilisés pour mettre un formulaire.

Answer 2

Je viens de créer une forme de base et laisser la structure se développer autour de cela.

<form>
  <input>
  <input>
  <input>
</form>

Et puis quand vous avez besoin groupes

<form>
  <div>
    <input>
    <input>
  </div>
  <input>
</form>

Et puis faire tout votre présentation en CSS. La meilleure façon de tester l'accessibilité est de désactiver toutes les feuilles de style et de voir si le site est logique.

Les formulaires sont les éléments de niveau de bloc afin qu'ils soient sémantiquement correcte pour contenir d'autres éléments.