1
respuesta

Haz lo que hicimos en el aula

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

Gracias por compartir tu código con nosotros.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartatucodigo) y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios