Estilizar un formulario html con css

25 Abr Estilizar un formulario html con css

Publicado a las 07:30h en Ejercicios CSS, Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web. por Francesc Ricart 0 Comentarios

Valora esta entrada

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!

Entradas relacionadas:

Introducción al CSS. Que significa Cascading Style Sheets.
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.

Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicaci...

Ejercicio sobre selectores css (III)
Ejercicio css en que dadas varias propuestas de selectores se pide escribir para que html serviría. Incluye solución.

Como poner iconos flotantes de redes sociales en nuestra web con html y css
Ejercicio css dónde se muestra el código necesario para centrar verticalmente iconos flotantes en el lateral de una página web. Incluye solución.

Ejercicio css dar formato a una tabla de precios con display:table
Maquetar con display:table; tiene ventajas frente a las tablas html. A modo de ejercicio se propone una tabla de servicios. Incluye solución.

Síntesis de los selectores CSS avanzados más comunes
Síntesis de pseudoelementos y pseudoselectores más usados. ¿Sabes en que se diferencían? ::root, ::before, :firt-child, :not(), ...

Francesc Ricart

hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi