Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

Porque tanto el label y el input están en la misma linea si tienen display block?

Tenía entendido que el inline solo ocupaba el espacio segun su contenido y el block ocupa todo el ancho de la linea, porque si ambos están con display block están uno al lado del otro? No debería ser inline-block para esto?

3 respuestas

Justamente, los inputs vienen con inline por default y lo que hizo fue usar block para que ocupen todo el ancho, sin embargo le asigo una clase a los inputs TEXTO para que no afecten a los RADIO, y luego introdujo los inputs radio dentro de los LABEL para que se invirtieran en cuanto a orden, sin especificarlos en el CSS porque ya van con INLINE. Espero no haberte confundido o quizás yo soy el confundido :D

Saludos!

Hola Emmanuel, entonces entiendo que ya no estaría bloqueado (display: block) para el form input ¿cierto? Y por ello regresaría al default que es in-line. Ahora el bloqueo solo sería para la clase input-padron.

A´si es, de hecho el código quedo así:

HTML

            <form><!--Always that we create an input is important add a label to know
                we have to do-->
                <label for="nombreapellido">Nombre y Apellido</label>
                <input type="text" id="nombreapellido" class="input-padron" required>

                <label for="correoelectronico">Correo electrónico</label>
                <input type="email" id="correoelectronico" class="input-padron" required 
                placeholder="email@dominio.com">

                <label for="telefono">Teléfono</label>
                <input type="tel" id="telefono" class="input-padron" required 
                placeholder="(XX) XXXX XXXX">

                <label for="mensaje">Mensaje</label>
                <textarea cols="70" rows="10" id="mensaje" class="input-padron" required></textarea>

                <fieldset><!--We can use FIELDSET for a form with the same type of fields.-->
                    <legend>¿Cómo le gustaría que lo contactemos?</legend><!--At the same time
                        we can use LEGEND tag no P-->
                    <label for="radio-email"><input type="radio" name="contacto"
                        value="email" id="radio-email">Email</label>

                    <label for="radio-telefono"><input type="radio" name="contacto" 
                        value="telefono" id="radio-telefono">Teléfono</label>

                    <label for="radio-whatsapp"><input type="radio" name="contacto" 
                        value="whatsapp" id="radio-whatsapp" checked>WhatsApp</label>
                </fieldset>

SE ESE ESE TRES

No sé si ya llegaste hasta modificar el botón de ENVIAR, pero de todas formas te adjunto el código, fijate que cuando le haces HOVEr al botón se sale a la izquierda, te garego cómo arreglé eso.

form{
    margin: 40px 0;
}

form label, 
form legend{
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-padron{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox{
    margin: 20px 0;
}

.enviar{
    width: 40%;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: orange;
    border:none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}

.enviar:hover{
    background: darkorange;
    transform-origin: 0% 10%;
    transform: scale(1.2);
}