Ejercicio creación de un formulario html a partir de especificaciones

Ejercicio creación de un formulario html a partir de especificaciones

0
(0)

En este ejercicio se propone un formulario web para el que se debe escribir el html en base a una serie de especificaciones.

A modo de repaso te sugiero leer esta entrada dónde se explica la teoría y encontrarás ejemplos.

Pasemos al enunciado.

Enunciado

Escribe el html de un formulario web según las especificaciones descritas al final del enunciado.

enunciado ejercicio formulario web
enunciado ejercicio formulario web

Como observación, en este ejercicio no se te pide que escribas css. En consecuencia el resultado final que deberías obtener es el de la siguiente imagen.

Resultado final real
Resultado final real

Especificaciones del formulario web

El formulario debe preguntar:

  • Nombre. El campo debe aceptar un máximo de 30 caracteres.
  • Apellidos. El campo debe aceptar un máximo de 30 caracteres.
  • Email. Campo de relleno obligado.
  • Asunto a elegir una opción entre pedir presupuesto, solicitar cita previa, otros. Deben mostrarse las 3 opciones en un cajetín según la imagen (usa el atributo size).
  • Cómo nos a escogido a elegir una o más opciones entre un amigo, googleando, buzoneo, otros. Siendo la elección simple o múltiple.
  • Un mensaje. Debe tener una longitud máxima de 300 caracteres
  • Aceptación de cláusula rgpd. De obligada selección antes de enviar el currículum.

Solución del ejercicio

<form action="#" name="solucionFormulario">
	<label for="nombre">Nombre:</label>
	<input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre" maxlength="30">

	<label for="email">Email:</label>
	<input type="text" id="email" name="email" placeholder="correo@empresa.com" required maxlength="30">

	<label for="asunto">Asunto</label>
	<select name="asunto" id="asunto" size="3">
		<option value="PresupuestoWeb">Pedir presupuesto web</option>
		<option value="CitaPrevia">Solicitar cita previa</option>
		<option value="Otros">Otros</option>
	</select>

	<label for="marketing">¿Cómo nos ha conocido?</label>
	<div class="marketing">		
		<input type="checkbox" value="amigo" id="amigo"><label for="amigo">Un amigo</label>
		<input type="checkbox" value="google" id="googleando"><label for="googleando">Googleando</label>
		<input type="checkbox" value="buzoneo" id="buzoneo"><label for="buzoneo">Buzoneo</label>
		<input type="checkbox" value="otros" id="otros"><label for="otros">Otros</label>
	</div>

	<label for="mensaje">Escribe tu mensaje</label>
	<textarea name="mensaje" id="mensaje" maxlength="300"></textarea>

	<input type="checkbox" value="Acepta_RGPD" id="rgpd" required><label for="rgpd" class="rgpd">He leído y acepto el <a href="#" target="_blanck">aviso legal y la política de privacidad</a>.</label>

	<mark>@FrancescRicart</mark>
</form>

Para profundizar se adjunta el css de la solución presentada

*{
	box-sizing:border-box;
	margin:0;padding:0;
}
form{
	width:400px;
	padding:32px;
	border:1px solid #000;
	border-radius:10px;
	margin:32px auto;
	background-color:#b2ccff;
}
input[type="text"],select,textarea{
	display:block;
	padding:4px 8px;
	width:100%;
	margin:8px 0;
}
textarea{height:96px;resize:none;}


label{
	font-weight:bold;
	display:block;
	margin:8px 0;
}

.marketing label,.rgpd{display:inline-block;font-weight:normal;}
.rgpd{width:90%;}
mark{float:right;}

¡Hola!

Querido lector,

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

Puntuación media 0 / 5. Votos: 0

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

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

No Comments

Post A Comment

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.