Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Fomulario no toma el css

Referente al curso HTML5 y CSS3 parte 3: Trabajando con formularios y tablas, en el capítulo Comenzando un formulario y actividad Haz lo que hicimos en el aula

por Stiven Andrey La Rotta L�pez
| 36.3k xp | 21 posts
Socio

hola, compañeros alguien sabe por que los formularios pueden no cambiar comportamiento? este es mi codigo quedo atento

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contacto - Barberia Alura</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header> ...
    </header>
    <main>
        <label for="nombreApellido">Nombre y Apellido</label>
        <input type="text" id="nombreApellido">

        <label for="correoElectronico">Correo Electrónico</label>
        <input type="text" id="correoElectronico">

        <label for="celular">Celular</label>
        <input type="text" id="celular">

        <input type="submit" value="Enviar Formulario">
    </main>
    <footer>...
    </footer>
</body>
</html>

y el css de los formularios 

main{
    margin: 0 auto;
    width: 940px;
}
form {
    margin: 40px;
}

form label{
    display: block;
    font-size: 20px0;
    margin: 0 0 10px;
}
form input{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

no tengo problema con el resto del css si hago cambios en el header o el footer si me los hace, gracias de ante mano.

2 respuestas
solución!
por Bruno Botelho de Souza
| 3918.7k xp | 14872 posts
Alura Scuba Team Scuba Team | Front-end

Hola Stiven, revisando tu código, noté algunos aspectos que podrían estar causando problemas en el comportamiento de tus formularios.

  1. Falta de etiqueta <form>: En tu HTML, los inputs y el botón de submit están colocados directamente dentro de la etiqueta <main> sin estar envueltos en una etiqueta <form>. Esto es crucial porque los inputs y el botón de submit deben estar dentro de una etiqueta <form> para que el formulario funcione correctamente. Deberías tener algo así:
<main>
    <form>
        <!-- Tus inputs y botón de submit aquí -->
    </form>
</main>

  1. Error tipográfico en CSS: En la definición de tu CSS para form label, tienes un error tipográfico en font-size: 20px0;. Probablemente quieras decir font-size: 20px;. Este tipo de errores puede hacer que el estilo no se aplique correctamente.

  2. Selectores CSS: Como tus elementos de entrada (inputs) y el botón de envío no están actualmente dentro de una etiqueta <form>, los estilos definidos bajo el selector form input no se aplicarán. Una vez que muevas tus inputs y el botón de submit dentro de una etiqueta <form>, deberían comenzar a aplicarse los estilos definidos.

Corrigiendo estos puntos, tu código debería empezar a comportarse como esperas. Si después de estos cambios sigues teniendo problemas, podría ser útil revisar si hay más errores en el resto del CSS o en cómo se están cargando tus archivos de estilo.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!
por Stiven Andrey La Rotta L�pez
| 36.3k xp | 21 posts
Socio

gracias, si vi mi error un rato después, muchas gracias por responder y de forma tan completa.