Portales de InformaciónCSS: Formularios2009 - 2010
Estilos básicosMostrar un botón como un enlaceComo ya se vio anteriormente, el estilo por defecto de losenlaces se puede m...
Estilos básicosMejoras en los campos de textoPor defecto, los campos de texto de los formularios no incluyenningún espacio...
Estilos básicos
Estilos básicosLabels alineadas y formateadasLos elementos <input> y <label> de los formularios son elementos enlínea, por...
Estilos básicosAprovechando los elementos <label>, se pueden aplicar unosestilos CSS sencillos que permitan mostrar el for...
Estilos básicosEn primer lugar, se muestran los elementos <label> comoelementos de bloque, para que añadan una separación ...
Estilos básicosEn ocasiones, es más útil mostrar todos los campos delformulario con su <label> alineada a la izquierda y e...
Estilos básicosPara mostrar un formulario tal y como aparece en la imagenanterior no es necesario crear una tabla y contro...
Estilos básicos
Estilos avanzadosFormulario en varias columnasLos formularios complejos con decenas de campos puedenocupar mucho espacio e...
Estilos avanzadosLa solución consiste en aplicar lasiguiente regla CSS a los<fieldset> del formulario:Si se quiere mostrar...
Estilos avanzadosResaltar el campo seleccionadoUna de las mejoras más útiles para los formularios HTMLconsiste en resaltar...
Estilos avanzados
Estilos avanzadosAñadiendo la pseudo-clase :focus después del selector normal,el navegador se encarga de aplicar esos esti...
Upcoming SlideShare
Loading in …5
×

Impi css-11. formularios

308 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
308
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Impi css-11. formularios

  1. 1. Portales de InformaciónCSS: Formularios2009 - 2010
  2. 2. Estilos básicosMostrar un botón como un enlaceComo ya se vio anteriormente, el estilo por defecto de losenlaces se puede modificar para que se muestren como botonesde formulario.Ahora, los botones de formulario también se pueden modificarpara que parezcan enlaces.
  3. 3. Estilos básicosMejoras en los campos de textoPor defecto, los campos de texto de los formularios no incluyenningún espacio de relleno, por lo que el texto introducido por elusuario aparece pegado a los bordes del cuadro de texto.Añadiendo un pequeño padding a cada elemento <input>, semejora notablemente el aspecto del formulario:
  4. 4. Estilos básicos
  5. 5. Estilos básicosLabels alineadas y formateadasLos elementos <input> y <label> de los formularios son elementos enlínea, por lo que el aspecto que muestran los formularios por defecto,es similar al de la siguiente imagen:
  6. 6. Estilos básicosAprovechando los elementos <label>, se pueden aplicar unosestilos CSS sencillos que permitan mostrar el formulario con elaspecto de la siguiente imagen:
  7. 7. Estilos básicosEn primer lugar, se muestran los elementos <label> comoelementos de bloque, para que añadan una separación paracada campo del formulario.Además, se añade un margen superior para no mostrar juntastodas las filas del formulario:El botón del formulario también se muestra como un elementode bloque y se le añade un margen para darle el aspecto finaldeseado:
  8. 8. Estilos básicosEn ocasiones, es más útil mostrar todos los campos delformulario con su <label> alineada a la izquierda y el campo delformulario a la derecha de cada <label>, como muestra lasiguiente imagen:
  9. 9. Estilos básicosPara mostrar un formulario tal y como aparece en la imagenanterior no es necesario crear una tabla y controlar la anchurade sus columnas para conseguir una alineación perfecta.Sin embargo, sí que es necesario añadir un nuevo elemento(por ejemplo un <div>) que encierre a cada uno de los camposdel formulario (<label> y <input>).El esquema de la solución propuesta es el siguiente:
  10. 10. Estilos básicos
  11. 11. Estilos avanzadosFormulario en varias columnasLos formularios complejos con decenas de campos puedenocupar mucho espacio en la ventana del navegador.Además del uso de pestañas para agrupar los camposrelacionados en un formulario, también es posible mostrar elformulario a dos columnas, para aprovechar mejor el espacio.
  12. 12. Estilos avanzadosLa solución consiste en aplicar lasiguiente regla CSS a los<fieldset> del formulario:Si se quiere mostrar el formulariocon más de dos columnas, seaplica la misma regla peromodificando el valor de lapropiedad width de cada<fieldset>.Si el formulario es muy complejo,puede ser útil agrupar los<fieldset> de cada fila medianteelementos <div>.
  13. 13. Estilos avanzadosResaltar el campo seleccionadoUna de las mejoras más útiles para los formularios HTMLconsiste en resaltar de alguna forma especial el campo en elque el usuario está introduciendo datos.Para ello, CSS define la pseudo-clase :focus, que permite aplicarestilos especiales al elemento que en ese momento tiene el focoo atención del usuario.La siguiente imagen muestra un formulario que resaltaclaramente el campo en el que el usuario está introduciendo lainformación:
  14. 14. Estilos avanzados
  15. 15. Estilos avanzadosAñadiendo la pseudo-clase :focus después del selector normal,el navegador se encarga de aplicar esos estilos cuando elusuario activa el elemento:Desafortunadamente, la pseudo-clase :focus no funciona ennavegadores obsoletos como Internet Explorer 6, por lo que sila página debe visualizarse de la misma forma en todos losnavegadores, es preciso recurrir a soluciones con JavaScript.

×