Formularios: ¿Su CSS admite su marcado o viceversa?

Question

En cuanto a los formularios HTML, un patrón de marcas muy común es:

<form ...> 
    <p> 
    <label>Name:</label> 
    <input .../> 
    </p> 
    <p> 
    <label>Birthdate:</label> 
    <input .../> 
    </p> 
    .. 
    <input type=submit/> 
</form> 

¿Cuánto (clases, etc.) marcado haces normalmente se proporciona para permitir el formato visual más flexible de la forma? Es decir, ¿cuánto marcado agrega para ayudar con sus selectores CSS y utiliza selectores genéricos?

<form ...> 
    <p class='name'> 
    <label>Name:</label> 
    <input .../> 
    </p> 
    <p class='birthdate'> 
    <label>Birthdate:</label> 
    <input .../> 
    </p> 
    .. 
    <input type=submit/> 
</form> 

vs

<form class='person' ...> 
    <p class='name string'> 
    <label>Name:</label> 
    <input .../> 
    </p> 
    <p class='birthdate date'> 
    <label>Birthdate:</label> 
    <input .../> 
    </p> 
    .. 
    <input type=submit/> 
</form> 

En el segundo caso, la adición de tipos genéricos ("fecha") directamente de la base de datos puede hacer que sea más fácil de los campos de fecha de formato consistente. Envolver una agrupación ("persona") para mostrar el modelo del que provienen los campos también puede ayudar. (O podría haber usado un DIV interno.) Sin embargo, para aumentar la reutilización de css, me encuentro agregando marcas adicionales. En algunos libros que he leído, oigo que cuanto menos marcado, mejor (y esa línea puede ser muy gris, aunque suena fiel a mí). Por ejemplo, podría haber usado el marcado de uno de los bloques anteriores y haber agregado muchos más selectores al CSS.

¿Cuáles son sus principios para decidir cuánto margen de beneficio tiene sentido? ¿O cuánto poner en el lado css?

Además, sé que puedo seleccionar el nombre de la entrada, pero como es un elemento anidado, pierdo mi capacidad para controlar el formato desde el contenedor externo ("p"), que es donde normalmente quiero ese control adicional .

Answer 1

Intento mantener el marcado html al mínimo.

formularios HTML son lo más difícil de mantener a HTML y CSS a un mínimo, ya que es muy difícil de dirigirse a todos los diversos insumos en todos los navegadores sin añadir clases a ellos, tales como cuadros de texto del cuadro de texto para etc.

Si todos sus formularios para ese sitio usan cuadros de texto simples y no mucho más, el enfoque de marcado mínimo funciona bien. Sin embargo, los controles con marcado complejo, como los controles telerik RAD, no se reproducen con márgenes simples y, a menudo, se necesitan marcas adicionales y clases.

Estos pequeños trucos agregan margen de ganancia, pero también hacen que el CSS sea mucho más limpio y, sin duda, harán que estilizar esos elementos sea mucho más fácil.

Por otro general HTML/CSS, que tienden a utilizar el menor número posible de clases, tales como

.Menu {} 
.Menu li {} 
.Menu li a {} 

Este tipo de patrón puede ser reutilizado una gran cantidad de datos repetidos, y las plantillas se pueden hacer y diseñado con muy poco margen de beneficio HTML.

A veces es inevitable agregar clases y otras cosas, pero creo que si piensas en general tanto en css como en html, deberías terminar con un marcado marcado.

De sitio en sitio, rara vez vuelvo a usar CSS. Es tan rápido y fácil de llamar estilos para lo que desees, rediseñar una piel existente para adaptarse a un nuevo sitio a menudo no vale la pena IMO.

Principalmente con CSS que tienden a tomar el conocimiento que he aprendido de los sitios anteriores y aplicarlo a los nuevos sitios, para hacer la codificación para todos los navegadores fáciles :)

Answer 2

que tienden a utilizar las etiquetas de lista definición de estilo mis formas

<form> 
    <dl> 

    <dt><label for="name">Name:</label></dt> 
    <dd><input name="name" /></dd> 

    <dt><label for="birthdate">Birthdate:</label></dt> 
    <dd><input name="birthdate" /></dd> 

    ... 
    </dl> 
</form> 

También uso el siguiente CSS:

FORM DT { 
    clear:both; 
    width:33%; 
    float:left; 
    text-align:right; 
} 

FORM DD { 
    float:left; 
    width:66%; 
    margin:0 0 0.5em 0.25em; 
} 

Más información aquí: http://www.clagnut.com/blog/241/

Es una gran cantidad de marcas, pero el efecto es coherente y eficaz.

Otro método razonablemente aceptable de diseñar formas es usar tablas. Solo piense en el formulario como "datos tabulares interactivos".

Answer 3

No utilizaría una etiqueta <p> para agrupar una etiqueta y su campo, ya que no es un párrafo. Si no tiene otro uso para <fieldset>, podría usar uno por "fila". Si tiene tres entradas para cumpleaños, entonces un lote de campo es totalmente apropiado.

Una lista de definiciones como la sugerida por Gavin no es una mala idea, pero parece un marcado innecesario: simplemente puede peinar las etiquetas y entradas en los anchos correctos y flotarlos.

Agregar clases contenedoras también es perfectamente válido; recuerde que no tiene que usarlas en CSS, sino que agregan una capa semántica. Incluso puede haber un microformat que puede usar en algunos casos.

También puede utilizar selectores de atributos a las entradas de estilo Nicely:

input[type="text"], input[type="password"] { 
    border: 1px solid #ccc; 
    background: #fff; 
} 
input[type="submit"], input[type="reset"] { 
    border: 1px solid #666; 
    background: #ccc; 
} 

Answer 4

personalmente acabo de hacer:

<form> 
    <label for="foo">Foo</label> 
    <input type="text" id="foo" name="foo" /> 
    <br /> 
    <label for="foo2" class="block">Foo 2</label> 
    <textarea id="foo2" name="foo2"></textarea> 
    <br /> 

Luego de css Depende de si o no quiero que el elemento sea en línea con o no

form label.block{ 
    display: block; 
} 

O puede bloquear + flotar como @DisgruntledGoat escribió. (Realmente odio marcado adicional)

Answer 5

Después de muchos años, he llegado a:

 
<fieldset> 
    <div> 
    <label for="Whatever">A text field</label> 
    <input type="text" id="Whatever" /> 
    </div> 
    <div class="required"> 
    <label for="RequiredField">A required field</label> 
    <input type="text" id="RequiredField" /> 
    </div> 
    <div class="stretch"> 
    <label for="LongField">A long field (stretched across 100% form width)</label> 
    <input type="text" id="LongField" /> 
    </div> 
    <div class="cmd"> 
    <button type="submit">Do whatever</button> 
    </div> 
<fieldset> 

Además, tengo dos clases CSS que puedo aplicar:

 
fieldset div { 
    clear: both; 
} 

fieldset.block label { 
    display: block; 
    font-weight: bold; /* labels above fields */ 
} 

fieldset.aligned label:first-child { 
    width: 20%; 
    float: left; 
} 

fieldset.block .stretch input, 
fieldset.block .stretch textarea, 
fieldset.block .stretch select { 
    width: 100%; 
} 

fieldset.aligned .stretch input, 
fieldset.aligned .stretch textarea, 
fieldset.aligned .stretch select { 
    width: 79%; /* leave space for the label */ 
}