Curso CSS Módulo 6

 

Módulo 6: Formularios en CSS

En este módulo aprenderás cómo dar estilo a los formularios usando CSS. Mejorar la presentación de los inputs, selects, checkboxes, radios y botones no solo hace que tu web luzca profesional, sino que también mejora la experiencia del usuario.

• ✔️ Cómo estilizar inputs y áreas de texto.
• ✔️ Cómo dar formato a botones y hacerlos más atractivos.
• ✔️ Cómo trabajar con select, checkbox y radio buttons.
• ✔️ Efectos “focus” y “hover” para una mejor interacción.

---

📋 Estilo básico para inputs

Por defecto, los campos de texto y contraseñas se ven simples y planos. Con CSS puedes agregarles bordes redondeados, colores y un mejor espaciado.

input[type="text"], input[type="email"], input[type="password"], textarea { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }

✅ Ahora los inputs tienen un diseño moderno y ocupan todo el ancho del formulario.

---

🎨 Efecto al enfocar (focus)

Cuando el usuario hace clic en un campo, puedes cambiar el color del borde o el fondo para que se note que está escribiendo allí.

input:focus, textarea:focus { border-color: #4CAF50; outline: none; }

✅ El borde se vuelve verde al hacer clic, guiando al usuario.

---

🖱️ Botones con estilo

Los botones pueden tener colores, sombras y efectos al pasar el mouse (hover) para llamar la atención y mejorar la usabilidad.

button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #45a049; }

✅ El botón cambia de color al pasar el mouse, dando un feedback visual.

---

🔽 Select, checkbox y radio

Los menús desplegables y casillas de verificación también pueden personalizarse. Aunque los navegadores limitan algunas modificaciones, puedes darles estilo básico y mejorar su integración con el diseño.

select { width: 100%; padding: 10px; border-radius: 5px; } input[type="checkbox"], input[type="radio"] { margin-right: 5px; }

✅ El menú select ahora es más amplio y cómodo; los checkboxes y radios están alineados.

---

✨ Ejemplo completo de formulario estilizado

form { max-width: 400px; margin: auto; background: #f4f4f4; padding: 20px; border-radius: 8px; } input, select, textarea, button { width: 100%; margin-bottom: 12px; }

✅ Con este ejemplo tienes un formulario completo, limpio y funcional.

---

📥 Preguntas de repaso

Pregunta 1

¿Qué pseudo-clase se usa para cambiar el estilo de un input cuando está activo?

• A) :active
• B) :hover
• C) :focus
• D) :checked

✅ Respuesta correcta: C) :focus

---

Pregunta 2

¿Qué propiedad elimina el contorno azul predeterminado en los inputs?

• A) border: none;
• B) outline: none;
• C) focus: 0;
• D) border-radius: 0;

✅ Respuesta correcta: B) outline: none;

---

Pregunta 3

¿Qué elemento HTML se usa para crear listas desplegables?

• A) <input>
• B) <select>
• C) <option>
• D) <textarea>

✅ Respuesta correcta: B) <select>

---

Este módulo forma parte del curso básico de CSS. En el siguiente módulo aprenderás a trabajar con elementos multimedia (videos, audios e imágenes) y a darles estilo.