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

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

Pasemos al enunciado.

Enunciado

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

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.

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;}

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!