Estilizar un formulario html con css

3.8
(12)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

portada ejercicio estilizar formulario web con css

En este ejercicio vamos a crear un formulario html sencillo y a estilizarlo.

Para ello es necesario dominar algunos conceptos importantes:

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;

Estilizar un formulario html con css 1

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>.[vc_custom_heading text=»¿Como queda el documento html?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

<!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>

[vc_custom_heading text=»¿Como queda el css?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

*{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!

  1. Avatar de Haile
    Haile

    como se puede insertar un imagen dentro de label en el formulario en html y css?

    1. Avatar de Francesc Ricart

      hola haile,
      no sé si termino de entender a que te refieres.

      <label for=""><img src="url de tu imagen"/></label>

      ¿y en todo caso luego le aplicas estilos?

      o te refieres a algo del tipo:

      <style>
      .icono::before{
        content:url("https://via.placeholder.com/30x30");
        display:inline-block;
        width:30px;
        height:30px;
        margin-right:10px;
      }
      </style>
      <label class="icono">Texto</label>

      dónde la imagen es la que tu necesites…

  2. Avatar de diego moretti

    lo haces con style background-image y url

    1. Avatar de Francesc Ricart

      Hola Diego,
      Gracias por tu comentario.
      Entonces quedaría como fondo por detrás del texto.

      Saludos,

  3. Avatar de Irwin Concha
    Irwin Concha

    Muchas gracias me faltaba / en la siguiente declaración

    1. Avatar de Francesc Ricart

      Creo que el sistema de comentarios automático de wordpress no ha aceptado el html.
      En cualquier caso gracias. ¡A otras personas les puede ayudar!
      Saludos,

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *