tablas - formulario html ejemplo

Estilo CSS de etiquetas de formulario

Question

Hasta donde yo sé, se supone que una etiqueta <form></form> es invisible como parte de una página web, y que cuando se diseña una forma, se deben usar etiquetas div (o equivalentes) para representar la estructura de la forma física.

¿Es aceptable (según los estándares W3C) aplicar CSS a una etiqueta <form></form> ? y ¿alguien puede señalarme en la dirección correcta para la literatura sobre este tema?

Answer 1

Por lo que sé, se supone que una etiqueta <form></form> es invisible como parte de una página web

Se supone que representa una forma. Eso es algo definitivamente visible

y que al diseñar un formulario, uno debe usar etiquetas div (o equivalentes) para representar la estructura de la forma física.

<div> es la etiqueta de último recurso. Úselo cuando no exista algo más adecuado (como <form> o <fieldset> ).

¿Es aceptable (según los estándares W3C) aplicar CSS a una etiqueta <form></form> ?

Al mostrar errores en los navegadores, es aceptable personalizar cualquier elemento del documento.

y ¿alguien puede señalarme en la dirección correcta para la literatura sobre este tema?

Como no hay nada especial sobre el elemento, no necesita documentación específica.

Lo más cerca que puedo pensar es esta advertencia de la especificación CSS 2.1 :

Nota. CSS le da tanto poder al atributo "clase", que los autores podrían concebir su propio "lenguaje de documentos" basado en elementos con casi ninguna presentación asociada (como DIV y SPAN en HTML) y asignar información de estilo a través del atributo "clase" . Los autores deben evitar esta práctica ya que los elementos estructurales de un lenguaje documental a menudo tienen significados reconocidos y aceptados, y las clases definidas por el autor pueden no tenerlos.

... pero relacionar eso con la pregunta es un estiramiento ya que está sugiriendo usar el marcado semántico, pero agregando divisiones innecesarias solo para el estilo.

Answer 2

Diseñar la etiqueta de formulario en algunas ocasiones puede ser útil. Solo asegúrate de hacer que la etiqueta de formulario actúe como si fuera una capa. No es necesario hacer <div id="myform"><form></form></div>

Solo forma {display: block;} y actúa como si fuera un div.

Sobre la semántica y ya que está pidiendo que lo haga correctamente: un error común es usar divs para las etiquetas y luego perder su usabilidad.

¡Utiliza HTML para lo que está diseñado! A modo de ejemplo, así es como se vería una forma básica en HTML de acuerdo con el estándar.

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

El uso de HTML como este le permite al usuario hacer clic en las etiquetas o presionar la pestaña para enfocarse en el campo deseado.

Diseñar esto puede ser complicado, sin embargo, no necesitas mucho código si sabes lo que estás haciendo.

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

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

Answer 3

Un elemento de form se puede diseñar como cualquier otro elemento y tiene un estilo predeterminado en las hojas de estilo predeterminadas del navegador. Consulte Hoja de estilos predeterminada para HTML 4 en la especificación CSS 2.1. La característica más importante es que, de form predeterminada, un elemento de form se representa como un bloque con los márgenes superior e inferior correspondientes a una línea vacía. (En realidad, los navegadores suprimen estos márgenes en algunos casos).

Answer 4

Una forma es solo otro elemento de la página (piénselo como un div que puede contener entrada / otros elementos). Puede diseñarlo con CSS al igual que cualquier otro elemento; todo es completamente válido.

Answer 5

Yo diría que sí, puedes darle estilo a la forma al igual que puedes diseñar cualquier otra etiqueta. Prefiero el estilo del elemento de formulario que agregar un div adicional mientras trato de mantener mi HTML mínimo.

Además, SitePoint tiene un artículo relativamente reciente sobre estilos de formularios que comienza con el diseño de la etiqueta del formulario.