Estilizando Formularios con CSS
Ahora que sabes cómo crear formularios en HTML, el siguiente paso es aprender a darles estilo usando CSS. Con CSS, puedes mejorar la apariencia de tus formularios y hacerlos más atractivos y fáciles de usar.
Formulario con Estilo Básico
Vamos a aplicar estilos básicos a un formulario para mejorar su apariencia.
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Enviar">
</form>
Con CSS, podemos estilizar los elementos de entrada, las etiquetas y el botón de envío:
form {
display: flex;
flex-direction: column;
gap: 10px;
}
label {
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
width: 100%;
}
input[type="submit"] {
background-color: #354f88;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
input[type="submit"]:hover {
background-color: #2c3e70;
}
Ejemplo Completo
Aquí tienes el formulario completo con el CSS aplicado:
<!DOCTYPE html>
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"></meta>
<title>Formulario Estilizado</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
label {
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
width: 100%;
}
input[type="submit"] {
background-color: #354f88;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
input[type="submit"]:hover {
background-color: #2c3e70;
}
</style>
</head>
<body>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Resumen
En esta lección, hemos aprendido cómo estilizar formularios HTML utilizando CSS para mejorar su apariencia y funcionalidad. En la próxima lección, exploraremos más a fondo las técnicas avanzadas de CSS para formularios.
No hay comentarios:
Publicar un comentario