Cómo dar formato a un formulario con CSS

Escrito por kevin lee | Traducido por blas isaguirres
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo dar formato a un formulario con CSS
Dale estilo a tus formularios web usando CSS para maximizar su apariencia visual. (Comstock/Comstock/Getty Images)

Antes de que Cascading Style Sheets haya existido, los desarrolladores web colocaban las definiciones de estilo visual dentro de sus etiquetas HTML. Estas definiciones, como el color y tamaño de fuente, controla la forma en que los elementos de formulario aparecen en los navegadores. Los desarrolladores de hoy en día usan CSS para dar formato a las formas mediante la creación de definiciones de clase en las secciones centrales de los documentos HTML. Después de establecer las clases CSS para las casillas del formulario de texto, etiquetas y controles textarea, puedes cambiar sus características visuales de forma rápida y eficiente simplemente actualizando el código CSS.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Inicia el Bloc de notas o un editor HTML. Crea un formulario pegando el siguiente texto en la sección de cuerpo del documento:

    <div id="formDiv"> <form method="post" action=”exampleAction.php">

    <label for="Name">Name:</label> <input type="text" name="Name" id="Name" />

    <label for="Email">Email:</label> <input type="text" name="Email" id="Email" />

    <label for="Note">Note:</label>

    <textarea name="Note" rows="5" cols="30" id="Note"></textarea>

    <input type="submit" name="submitButton" value="Submit Form" />

    </form> </div>

    Esto crea un formulario que contiene cuadros de texto, etiquetas, un control área de texto y un botón de "Enviar". El formulario existe en el interior de un elemento div cuyo identificador es "formDiv"

  2. 2

    Agrega el siguiente código CSS a la sección principal del documento:

    formDiv {

    width: 600px; margin-top: 25px; }

    formDiv label {

    color:Blue; font-size: 1.2em; margin-right: 10px; margin-top: 15px; width: 100px; text-align: right; float: left; }

    La definición "#formDiv" establece el ancho del formulario y el margen superior. Ajuste el valor "margin-top" si lo deseas. El aumento de su valor aumenta la distancia entre la parte superior de la forma y el elemento que precede a la forma. Disminuye el valor para disminuir esa distancia.

    La "etiqueta #formDiv" define los atributos de todas las etiquetas del formulario. En este ejemplo, el color de la etiqueta es de color azul y el tamaño de fuente es 1.2em. Cambia esos valores si lo deseas. Los valores del margen controlan los márgenes superior e inferior de la etiqueta.

  3. 3

    Pega el siguiente código CSS por debajo del último bloque de código que se muestra en el paso anterior:

    formDiv textarea, #formDiv input {

    font-size: 1.1em; margin-top: 15px; border-style:solid; border-width:1px; padding: 5px; width: 440px; }

    Esta definición establece los atributos para el control área de texto y los cuadros de texto. El atributo "font-size" establece el tamaño de fuente de los cuadros de texto para 1.1em y los atributos "border" controlan la apariencia de loa bordes alrededor de los cuadros de texto. El atributo "padding" te permite ajustar la distancia entre los bordes de los cuadros de texto y el texto dentro de los cuadros de texto.

  4. 4

    Pega esta última definición CSS a continuación el código que aparece en el último paso:

    formDiv textarea {

    background-color:Yellow; }

    Esto define un atributo adicional para el control área de texto. Hace tu fondo amarillo.

  5. 5

    Guarda el documento HTML y ábrelo en un navegador. El formulario aparece y muestra las características físicas definidas en el código CSS.

Consejos y advertencias

  • Dos de los más importantes atributos de etiquetas CSS, que se encuentra en la clase "etiqueta" son "text-align" y "margin-right". El valor "text-align", cuando se establece en "left", alinea el texto de todas las etiquetas de la izquierda. Esto hace que los navegadores alineen los bordes izquierdos de las etiquetas. Cambia el valor a "right" para alinear tus bordes a la derecha. El atributo "margin-right", "10px" en este ejemplo, determina la distancia entre el lado derecho de una etiqueta y la parte izquierda del cuadro de texto al lado de esa etiqueta. Ajusta estos valores para conseguir el diseño visual que se vea mejor.

No dejes de ver

Recursos

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles