HTML
<main> <! –– Contenido entre el header y el footer, cuerpo ––>
<form class="formularioMain"> <! –– Campos de datos de contacto ––>
<label for="nombreyapellido" class="formularioLabel">Nombre y Apellido</label>
<input type="text" id="nombreyapellido" class="formularioInputDContacto" required>
<label for="correoelectronico" class="formularioLabel">Correo Electrónico</label>
<input type="email" id="correoelectronico" class="formularioInputDContacto" required placeholder="email@dominio.extension">
<label for="telefono" class="formularioLabel">Teléfono</label>
<input type="tel" id="telefono" class="formularioInputDContacto" required placeholder="(XX) XXXX XXXX">
<label for="mensaje" class="formularioLabel">Mensaje</label>
<textarea id="mensaje" cols="70" rows="10" class="formularioInputDContacto" required></textarea>
<fieldset> <! –– Medio a traves del cual se tomara contacto con la persosa ––>
<legend class="formularioLabel">¿Cómo le gustaría que lo contactemos?</legend>
<label for="radio-email" class="formularioLabel"><input type="radio" name="contacto" value="email" id="radio-email">Email</label>
<label for="radio-telefono" class="formularioLabel"><input type="radio" name="contacto" value="telefono" id="radio-telefono">Teléfono</label>
<label for="radio-whatsapp" class="formularioLabel"><input type="radio" name="contacto" value="whatsapp" id="radio-whatsapp" checked>Whatsapp</label>
</fieldset>
<fieldset> <! –– Menu desplegable de horarios de contacto ––>
<legend class="formularioLabel">¿En cuál horario prefiere ser atentido?</legend>
<select>
<option>Mañana</option>
<option>Tarde</option>
<option>Noche</option>
</select>
</fieldset>
<! –– De esta forma no es necesario referenciar desde el label al input ––>
<label class="formularioLabel"><input type="checkbox" class="formularioLabelCheckbox" checked>¿Le gustaría recibir novedades de la Barbería ALURA?</label>
<! –– Boton de envio de ofrmulario ––>
<input type="submit" value="Enviar formulario" class="formularioEnviar">
</form>
</main>
CSS
.formularioMain{
width: 940px;
margin: 40px auto;
}
.formularioLabel{
display: block;
font-size: 20px;
margin: 0 0 10px 0;
}
.formularioInputDContacto{
display: block;
margin: 0 0 20px 0;
padding: 10px 25px;
width: 50%;
}
.formularioInput{
display: block;
margin: 0 0 20px 0;
padding: 10px 25px;
width: 50%;
}
.formularioLabelCheckbox{
margin: 40px 0;
}
.formularioEnviar{
width: 25%;
margin: 0 0 0 100px;
}