25 Abr Estilizar un formulario html con css
Publicado a las 07:30h en Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web., Ejercicios CSS 0 Comentarios
En este ejercicio vamos a crear un formulario html sencillo y a estilizarlo.
Para ello es necesario dominar algunos conceptos importantes:
- Elementos bloque, en línea y en línea bloque.
- Como crear formularios html.
- Algunas propiedades útiles como
resize: vertical | horizontal | none | both;
Vayamos al enunciado.
Enunciado
Genera un formulario html según la imagen adjunta y que cumpla las siguientes especificaciones:
- El formulario web debe pedir por los datos nombre, apellidos, email, asunto y mensaje.
- El destino de los datos rellenados en el formulario una vez enviados debe ser la propia página.
- No contiene php ni otros lenguajes distintos a html o css (no es funcional).
- El campo email es de obligado relleno.
- El formulario es usable. Cuando un usuario haga click en el texto que acompaña cada campo, el cajetín correspondiente debe seleccionarse.
- El cajetín de mensaje puede contener como máximo 300 caracteres.
- Cuando se pase el cursor por encima del botón de enviar, el cursor debe cambiar de icono.
- El color de fondo es el #ccc y el color de los cajetines el #f6f6f6;
Solución del ejercicio
En primer lugar se indica el html.
En segundo lugar se indica el css.
Como curiosidad, la propiedad resize de css sirve para indicar si <textarea> se puede expandir verticalmente, horizontalmente o en ningún sentido. Esta propiedad en realidad también podría usarse con otras etiquetas como <div>.
¿Como queda el documento html?
<!DOCTYPE html>
<html>
<head>
<title>Introducción formularios web</title>
<meta charset="utf-8"/>
<meta name="description" content="Un formulario sirve para enviar datos a otra página que los recoge para usarlos o almacenarlos."/>
<style>
</style>
</head>
<body>
<form action="#" target="" method="get" name="formDatosPersonales">
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" placeholder="Escribe tu nombre"/>
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" placeholder="1r Apellido"/>
<label for="email" />Email</label>
<input type="email" name="email" id="email" placeholder="email" required />
<label for="asunto">Asunto</label>
<input type ="text" name="asunto" id="asunto" placeholder="titular de la consulta"/>
<label for="mensaje">Mensaje</label>
<textarea name="mensaje" for="mensaje" placeholder="describe brevemente en menos de 300 carácteres" maxlength="300"></textarea>
<input type="submit" name="enviar" value="enviar datos"/>
</form>
</body>
</html>¿Como queda el css?
*{box-sizing:border-box;}
form{
width:300px;
padding:16px;
border-radius:10px;
margin:auto;
background-color:#ccc;
}
form label{
width:72px;
font-weight:bold;
display:inline-block;
}
form input[type="text"],
form input[type="email"]{
width:180px;
padding:3px 10px;
border:1px solid #f6f6f6;
border-radius:3px;
background-color:#f6f6f6;
margin:8px 0;
display:inline-block;
}
form input[type="submit"]{
width:100%;
padding:8px 16px;
margin-top:32px;
border:1px solid #000;
border-radius:5px;
display:block;
color:#fff;
background-color:#000;
}
form input[type="submit"]:hover{
cursor:pointer;
}
textarea{
width:100%;
height:100px;
border:1px solid #f6f6f6;
border-radius:3px;
background-color:#f6f6f6;
margin:8px 0;
/*resize: vertical | horizontal | none | both*/
resize:none;
display:block;
}Si juntamos todas las piezas resolvemos el ejercicio.
¡Hola!
Querido lector,
¿Como podríamos hacer para que este formulario fuera además responsive?
Es un buen ejercicio que te invito a practicar.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Estilizar una lista usando iconos
Si no te atrae la idea de usar list-style-image para decorar listas, entonces puedes hacerlo con ::before y el uso de iconos de fontawesome.
Si no te atrae la idea de usar list-style-image para decorar listas, entonces puedes hacerlo con ::before y el uso de iconos de fontawesome.
Ejemplo de centrado horizontal de una caja con CSS
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Box Sizing, como modificar el modelo de cajas convencional
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Resumen de como comentar código en html, css y javascript
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Ejercicio diferencia entre centrado de texto y de cajas en css
Ejercicio css dónde se compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.
Ejercicio css dónde se compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.
Veo veo ¿de qué color se verá? | ejercicio sobre especificidad css
Los selectores css a veces son intuitivos y otras veces no. ¿Tienes una buena intuición?. ¿De qué color ser verá? Incluye solución.
Los selectores css a veces son intuitivos y otras veces no. ¿Tienes una buena intuición?. ¿De qué color ser verá? Incluye solución.
No hay comentarios