Mejores prácticas de diseño de formulario

Question

He creado un bonito conjunto de elementos de formulario en Photoshop y estoy buscando convertirlos en HTML y CSS. El formulario de texto de entrada simple tendrá una imagen de fondo, ya que el campo no cambia de tamaño. Sin embargo, el formulario de área de texto cambiará dinámicamente el tamaño a medida que el usuario escribe.

Normalmente, para construir este tipo de estilo, me envuelvo el campo de formulario en divs, tales como:

<div class = "textarea-top"> 
    <div class = "textarea-bottom"> 
    <textarea></textarea> 
    </div> 
</div> 

o utilizando múltiples imágenes en background-div una envoltura:

<div class = "textarea"> 
    <textarea></textarea> 
</div> 

¿Hay una mejor manera de abordar esto? Para replantear, los estilos de campo son imágenes avanzadas que se pueden repetir (para el cuerpo del campo) y tienen un estilo para la parte superior e inferior. La pregunta es, ¿cuál es la mejor práctica al tratar con este estilo de formulario avanzado?

Answer 1

No estoy del todo seguro de lo que quiere decir con "mejores prácticas", pero una cosa que mejoraría es la semántica. Puede (¿debería?) Usar <fieldset> en lugar de un, más bien sin sentido, <div>.

Y no es necesario utilizar dos <div> 's alrededor del textarea, o incluso múltiples imágenes de fondo en una sola <div> (que es una propiedad de CSS3, y no se admite ampliamente).

lugar, se debe envolver el <textarea> en un elemento de <label>, y sus nidos fondo-imágenes que he descrito a continuación:

Prueba esto:

<fieldset class="expandableInput"> 
    <label> 
    Semantic text: 
    <textarea></textarea> 
    </label> 
</fieldset> 

Bono: elementos de formulario envoltura en <label> de esta manera, ofrece un área de clic más grande, para que el usuario se centre en el elemento de formulario a mano. Sólo tenga cuidado con los <select> 's, que no juega muy bien (aunque es HTML válido)

El CSS sería algo así como:

.expandableInput {background: url(/path/to/first/img);} 
    .expandableInput label {display: block; background: url(/path/to/second/img);} 
    .expandableInput textarea {display: block; margin-top: 3px; background: url(/path/to/third/img);} 

también; Para obtener una apariencia coherente en los elementos del formulario, en todas las plataformas del navegador &, puedo recomendar encarecidamente el Formalize CSS de Nathan Smith (se necesita JS para compatibilidad con HTML5 en los navegadores más antiguos).