Html semántica de la estructura de páginas de datos
-
11-09-2019 - |
Pregunta
¿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
Solución
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.
Otros consejos
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.