La creación de formularios web es una tarea común en el desarrollo de sitios y aplicaciones. Si bien la funcionalidad es crucial, el diseño también desempeña un papel fundamental en la experiencia del usuario. En este artículo, exploraremos cómo diseñar un formulario flex CSS utilizando CSS Flexbox para lograr un aspecto simple, elegante y efectivo. Este diseño flexible se adapta a diferentes tamaños de pantalla y puede mejorar la interacción del usuario en tu sitio web.
El Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Formulario Flex CSS</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="contenedor-form">
<form>
<input class="nombre" type="text" placeholder="Nombre">
<input class="email" type="email" placeholder="Email">
<button class="enviar">Enviar</button>
</form>
</div>
</body>
</html>El Código CSS:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.contenedor-form {
max-width: 1400px;
width: 100%;
padding: 20px;
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
margin: 0 220px;
}
form {
display: flex;
flex-wrap: wrap;
}
input.nombre,
input.email,
button.enviar {
flex: 1 0 calc(33.33% - 10px);
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button.enviar {
background-color: blueviolet;
color: #fff;
border: none;
cursor: pointer;
}
Diseñando un Formulario Flexible:
En este ejemplo, hemos creado un formulario web utilizando CSS Flexbox para lograr un diseño flexible y atractivo. Aquí hay una explicación de las partes clave:
Conclusión:
Diseñar formularios web atractivos y funcionales es esencial para mejorar la experiencia del usuario en tu sitio web. Este ejemplo de formulario CSS Flexbox es un punto de partida sólido para crear formularios que sean simples, elegantes y efectivos. Personaliza los colores, los tamaños y otros estilos según tus necesidades específicas y haz que tu formulario destaque en tu sitio web.
