Después de ingresar a eYou.com, inmediatamente tuve que convertir la nueva versión de la interfaz de correo electrónico a XHTML+CSS. Afortunadamente, mis habilidades básicas aún son lo suficientemente sólidas, así que lo hice de manera ordenada. Por supuesto, encontrará nuevos problemas. Por ejemplo, cuando crea páginas web habitualmente, rara vez utiliza formularios porque no tiene experiencia con programas. Afortunadamente, el mundo todavía tiene Google, lo que me permite afrontar fácilmente nuevos desafíos. Anota algunas experiencias y compártelas con todos.
Según consideraciones de accesibilidad, la forma estándar de escribir un formulario debe incluir un conjunto de campos y una leyenda (descripción) en <form> y </form> para permitir a los usuarios comprender el resumen del campo del formulario. La estructura simple es la siguiente:
| El siguiente es el contenido citado: <formulario> <conjunto de campos> <leyenda></leyenda> ... </conjunto de campos> </formulario> |
En algunos casos, es posible que no desee que el conjunto de campos y la leyenda afecten la estética de su diseño. Es fácil de manejar. Simplemente establezca el borde del conjunto de campos en 0 y la visualización de la leyenda en ninguno.
En la mayoría de los casos, el diseño del formulario se divide en dos columnas, con la etiqueta a la izquierda y el cuadro de entrada (tipo de entrada="texto"...) a la derecha. Con un diseño de dos columnas tan simple, recomiendo encarecidamente no utilizar tablas. Referencia http://stylephreak.frogrun.com/uploads/source/cssform.php y http://www.aplus.co.yu/css/forms/?css=1 (dos referencias definitivamente valiosas, ya no No es necesario seguir leyendo), descubrimos que la solución común para los estándares web es agregar un div alrededor de la etiqueta e ingresar el tipo="text"..., y configurar la visualización del div en bloque. Configure la etiqueta para que flote: izquierda; (esta es también la razón por la cual el div está configurado para mostrar: bloque;) y luego la etiqueta se puede colocar en la misma línea que el cuadro de entrada. Un pequeño truco para alinear etiquetas es fijar el ancho de la etiqueta y luego usar text-align para alinearla hacia la izquierda o hacia la derecha según sea necesario. Un consejo para configurar el ancho es usar la unidad em para establecer el ancho según el recuento máximo de palabras de la etiqueta, sin tener que probar laboriosamente px.
Para que mi explicación sea más fácil de entender, simplemente escribo un código:
| El siguiente es el contenido citado: XHTML: (parcial) <formulario> cuerpo {/*No tiene nada que ver con el formulario, establece el efecto de visualización de la página*/ |