Cómo crear un bonito formulario con entrada CSS

Escrito por robert schrader | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear un bonito formulario con entrada CSS
Cómo crear un bonito formulario con entrada CSS. (Hemera Technologies/AbleStock.com/Getty Images)

Puedes hacer que un formulario Web básico sea más atractivo visualmente dándole estilo con una hoja de estilos en cascada, o documento CSS, en tu sitio sitio. Aplicar estilos con CSS te permite personalizar aspectos visuales sobre la forma sin necesidad de realizar modificaciones en tu código HTML, lo que hace que código sea más voluminoso y que la página se cargue más lentamente. Una vez que hayas introducido el código CSS para el formulario, las futuras modificaciones de tu diseño implicarán sólo sustituciones simples y reemplazos.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Entra en el Administrador de Archivos de tu sitio. Navega al archivo HTML de la página donde quieres que aparezca el formulario y pega el siguiente código HTML si no lo has hecho ya:

    <form action="#"> <p><label for="Field 1">Field 1</label> <input type="text" id="Field 1" /></p> <p><label for="Field 2">Field 2</label> <input type="text" id="Field 2" /></p> <p class="submit"><input type="submit" value="Submit" /></p> </form>

    Guarda el documento HTML y vuelve a tu Administrador de Archivos.

  2. 2

    Abre la hoja de estilos en cascada "Style.css" y pega este código:

    label { width: 4em; float: left; text-align: right; margin-right: 0.5em; display: block }

    .submit input { margin-left: 4.5em; }

    input { color: #781351; background: #fee3ad; border: 1px solid #781351 }

    .submit input { color: #000; background: #ffa20f; border: 2px outset #d7b9c9 }

  3. 3

    Modifica el texto y los valores numéricos dentro del código CSS para que afecte a la apariencia de la forma. Cambia el valor detrás "background:" dentro de la clase "input" para cambiar el color de fondo del formulario. También puedes utilizar un valor de píxel diferente detrás "border:" en "submit input" para que el borde que rodea el botón "Submit" sea más estrecho o más ancho.

  4. 4

    Guarda el documento y mira la página en una nueva pestaña o ventana. Vuelve al documento style.css y haz los cambios necesarios hasta que la forma se ajuste a las especificaciones visuales de la página.

No dejes de ver

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