Skip to content

CSS Forms: Diseño y Estilizado de Formularios

Introducción

Los formularios son una parte fundamental de cualquier página web, ya que permiten la interacción entre el usuario y el sitio. A través de los formularios, los usuarios pueden enviar datos, registrarse, iniciar sesión y realizar diversas acciones. Sin embargo, sin un diseño adecuado, los formularios pueden resultar poco atractivos y difíciles de usar.

Con CSS, podemos mejorar la apariencia de los formularios, haciéndolos más atractivos y accesibles. En este tema, aprenderemos a estilizar formularios utilizando CSS para mejorar la experiencia del usuario.

Formulario HTML

1. Diseño Básico de Formularios

Un formulario HTML básico se compone de etiquetas como <input>, <textarea>, <select> y <button>. A continuación, un ejemplo de un formulario sin estilos:

<form>
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre">

  <label for="email">Correo Electrónico:</label>
  <input type="email" id="email" name="email">

  <label for="mensaje">Mensaje:</label>
  <textarea id="mensaje" name="mensaje"></textarea>

  <button type="submit">Enviar</button>
</form>

Este formulario funciona, pero su apariencia es muy simple. A continuación, veremos cómo estilizarlo con CSS.

2. Estilizando Campos de Entrada (<input> y <textarea>)

Los campos de entrada deben ser fáciles de leer y usar. Podemos mejorar su apariencia con padding, border, font-size, y width.

input, textarea {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

textarea {
  height: 100px;
  resize: vertical;
}

Con este estilo: - Los campos ocupan el 100% del ancho del formulario. - Se agrega un espaciado interno (padding) para mejorar la lectura. - Se define un borde redondeado (border-radius). - Se permite redimensionar (resize: vertical) el campo textarea solo verticalmente.

3. Estilizando Etiquetas (<label>)

Las etiquetas son clave para mejorar la accesibilidad y usabilidad de los formularios. Podemos mejorar su apariencia con font-size, font-weight y display.

label {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

Este estilo: - Hace que las etiquetas sean más legibles. - Usa display: block; para que cada etiqueta ocupe su propia línea. - Agrega un margen inferior para separar del campo de entrada.

4. Estilizando Botones (<button>)

Los botones deben ser atractivos y fáciles de identificar. Podemos personalizarlos con background-color, border, padding, y cursor.

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

Con este estilo: - El botón tiene un color de fondo verde. - Al pasar el ratón (:hover), cambia a un verde más oscuro. - Se redondean los bordes y se mejora la tipografía. - cursor: pointer; cambia el cursor al pasar sobre el botón.

5. Estilizando Listas Desplegables (<select>)

Los select pueden estilizarse para que luzcan mejor y sean más fáciles de usar.

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  background-color: white;
}

Con este estilo: - La lista desplegable ocupa todo el ancho disponible. - Se mejora la visibilidad con font-size. - Se asegura un fondo blanco.

6. Agrupar Elementos (fieldset y legend)

Para organizar mejor los formularios, podemos agrupar elementos con <fieldset> y <legend>.

fieldset {
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

legend {
  font-size: 18px;
  font-weight: bold;
}

Este estilo: - Define un borde para diferenciar las secciones. - Usa legend para resaltar la descripción del grupo.

7. Formularios Responsivos

Para hacer que los formularios se adapten a diferentes tamaños de pantalla, usamos max-width y media queries.

form {
  max-width: 500px;
  margin: auto;
}

@media (max-width: 600px) {
  input, textarea, select {
    font-size: 14px;
  }
}

Con este estilo: - El formulario se centra en la página. - Se usa max-width para evitar formularios demasiado anchos en pantallas grandes. - Se ajusta el tamaño de fuente en dispositivos pequeños.

8. Ejercicio Práctico: Crear un Formulario Estilizado

Objetivo: Construir un formulario completo con distintos tipos de campos, incluyendo texto, selección, botones de opción (radio), casillas de verificación (checkbox), y un botón de envío.

Crear Formulario Estilizado

Crea un formulario con los siguientes campos:

  • Nombre (text)
  • Correo electrónico (email)
  • Edad (number)
  • Género (radio con opciones: Masculino, Femenino, Otro)
  • Preferencias (checkbox con opciones como "Noticias", "Ofertas", "Eventos")
  • País (select con varias opciones)
  • Un campo de comentarios (textarea)
  • Un botón de envío.
  • Un botón de reset.

Aplica estilos para que sea visual y responsivo, siguiendo los conceptos vistos en esta unidad.

Solución HTML 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<form>
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" required>

<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" min="1" max="100">

<label>Género:</label>
<input type="radio" id="masculino" name="genero" value="masculino">
<label for="masculino">Masculino</label>

<input type="radio" id="femenino" name="genero" value="femenino">
<label for="femenino">Femenino</label>

<input type="radio" id="otro" name="genero" value="otro">
<label for="otro">Otro</label>
</fieldset>

<fieldset>
    <legend>Preferencias</legend>
    <input type="checkbox" id="noticias" name="preferencias" value="noticias">
    <label for="noticias">Noticias</label>

    <input type="checkbox" id="ofertas" name="preferencias" value="ofertas">
    <label for="ofertas">Ofertas</label>

    <input type="checkbox" id="eventos" name="preferencias" value="eventos">
    <label for="eventos">Eventos</label>
</fieldset>

<fieldset>
    <legend>Ubicación</legend>
    <label for="pais">País:</label>
    <select id="pais" name="pais">
    <option value="espana">España</option>
    <option value="mexico">México</option>
    <option value="argentina">Argentina</option>
    <option value="colombia">Colombia</option>
    <option value="otro">Otro</option>
    </select>
</fieldset>

<fieldset>
    <legend>Comentarios</legend>
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje"></textarea>
</fieldset>

<button type="submit">Enviar</button>
</form>
Solución CSS 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
form {
max-width: 500px;
margin: auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

fieldset {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}

label {
display: block;
margin-top: 5px;
font-weight: bold;
}

input, select, textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}

button:hover {
background-color: #45a049;
}

Conclusión

Estilizar formularios con CSS mejora la experiencia del usuario y la accesibilidad. A través de padding, border-radius, background-color, y media queries, podemos crear formularios más modernos y funcionales.

Ahora que hemos visto cómo mejorar los formularios con CSS, estamos listos para integrarlos con Bootstrap en la siguiente unidad.