Html semántica de la estructura de páginas de datos

Question

¿Cuál es la mejor estructura para utilizar en el diseño de un formulario / vista de detalles para facilitar la lectura máxima (accesibilidad) y versatilidad?

Como ejemplo, andamios del marco ASP.NET MVC crea un fieldset con una leyenda en la parte superior y todos los campos en p de (una etiqueta y entonces la entrada / set editor).

¿Cuál es la estructura más versátil para usar, qué te parece?

Por ejemplo, si quiero cambiar el diseño después de tener dos o tres campos de lado a lado en lugar de arriba hacia abajo, solo quisiera hacer eso a través de CSS, ya que no es estructuralmente relevante.

Gracias,
Kieron

EDIT:? Una recomendación amigos era utilizar dl, dt y DDS ... ¿alguien tiene alguna idea de que

Answer 1

utilizo una estructura muy similar a la generada por ASP.NET andamios, excepto que utilizo divs en lugar 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>

Yo uso divs debido a thats me más semánticamente correcta de p elementos, ya que están destinados a los párrafos de texto.

Cuando se trata de estilo también es una estructura versátil, ya que podría, por ejemplo, hacer que el conjunto de campos 500 píxeles de ancho y 250 píxeles de la div de campos de ancho y flotaba, logrando de esta manera al lado del otro. O podría tener el mismo ancho de conjunto de campos como el div de campos. O usted podría tener el conjunto de campos y de campos div la misma anchura y luego se adhieren a una clase sobre algunos divs (por ejemplo "media"), que son la mitad de la anchura y flotaba. Las posibilidades son realmente infinitas.

En cualquier caso, esto es sólo lo que yo uso para el día a día cosas -. Aunque su versatilidad, puede no ajustarse a todos los requisitos

Editar En lo que se refiere a las listas de definiciones, que son elementos especializados que semánticamente no deben ser utilizados para diseñar un formulario.

Answer 2

Me acabo de crear una forma básica y dejar que crezca la estructura alrededor de eso.

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

Y a continuación, cuando se necesita agrupaciones

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

Y a continuación, hacer todo su presentación en CSS. La mejor manera de probar la accesibilidad es apagar todas las hojas de estilo y ver si el sitio tiene sentido.

Las formas son elementos de bloque por lo que son semánticamente correcta para contener otros elementos.