Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

It won’t let me write my code on the page. I did it in Visual Studio Code but it won’t let me transfer it to the page. Help!!!

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

2

I guess you re trying to copy and past the code? It should work.

What happens when you try

3

I don’t know where I have to paste it to my code.

4

I was able to send it, I had to pay for it from F12 and I could.

But now I get errors that I don’t understand why, if I did everything the instructions ask for.

5
Formulario de Encuesta 
<h1 id="title">Formulario Laboral</h1>

<p id="description">Estamos buscando empleados para la Empresa MaxPower cuentanos un poco de vos.</p>

<form id="survey-form" action="">

    <h2>Formulario de Contacto</h2>

    <!-- SIMPLE INPUTS -->

    <fieldset>

        <legend> INFORMACION BASICA</legend>
        <div class="form_input">
            <label for="name-label">Nombre Completo</label>
            <input type="text" name="" id="name-label" placeholder="Tu Nombre">
        </div>

        <div class="form_input">
            <label for="number-label">Edad</label>
            <input type="number" name="" id="number-label" placeholder="Tu edad" min="18" max="120">
        </div>

        <div class="form_input">
            <label for="email-label">Email</label>
            <input type="email" name="" id="email-label" placeholder="@example.com">
        </div>

    </fieldset>

    <!-- SELECT - OPTION - RADIOBUTTOM -->

    <fieldset>

        <legend> INFORMACION SECUNDARIA</legend>

        <div class="form_input">

            <label for="">Tipos de Usuario</label>

            <select name="type-of-user" id="dropdown">

                <option value="user1">Opcion 1</option>

                <option value="user2">Opcion 2</option>

                <option value="user3">Opcion 3</option>

            </select>
        </div>

        <div class="form_input">

            <p>¿Actualmente tenes empleo?</p>

            <label for="empleado">

                <input class="inline" type="radio" name="option" id="empleado" checked> Empleado

            </label>

            <label for="desempleado">

                <input class="inline" type="radio" name="option" id="desempleado"> Desempleado

            </label>

        </div>

    </fieldset>

    <!-- CHECKBOXES -->

    <fieldset>

        <legend>¿Para que pues to te postulas?</legend>

        <div class="form_input">

            <label for="camarero">

                <input class="inline" type="checkbox" name="" id="camarero" value="camarero"> Camarero/a

            </label>

            <br>

            <label for="jefe-de-cocina">

                <input class="inline" type="checkbox" name="" id="jefe-de-cocina" value="jefe-de-cocina"> Jefe de
                Cocina

            </label>

            <br>

            <label for="ayudante-de-cocina">

                <input class="inline" type="checkbox" name="" id="ayudante-de-cocina" value="ayudante-de-cocina">
                Ayudante de
                Cocina

            </label>

            <br>

            <label for="cajero">

                <input class="inline" type="checkbox" name="" id="cajero" value="cajero"> Cajero

            </label>

        </div>

    </fieldset>

    <div class="form_input">

        <label for="mensaje">Cuentanos tu experiencia</label>

        <textarea name="" rows="7" placeholder="Deja un breve texto con tu experiencia laboral..."
            id="mensaje"></textarea>

    </div>


    <div class="form_input">

        <label for="checkbox">Acepto los <a href="#" target="_blank">terminos y condiciones</a></label>

        <input type="checkbox" class="checkbox" name="" id="checkbox">

    </div>

    <div class="form_input">

        <input class="inline" type="submit" name="submit" id="" value="Submit">

    </div>

</form>


body {
  margin: 0;
  font-family: sans-serif;
  color: #ddd;
  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
}

#title {
  text-align: center;
  margin: 0;
  font-weight: 600;
  padding: 10px;
  font-size: 2em;
}

#description {
  text-align: center;
  margin: 0;
  font-weight: 100;
  font-size: 1.3em;
}

h2 {
  text-align: center;
  margin: 0;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 100;
  font-size: 1.3em;
  padding: 10px;
}

form {
  background-color: transparent;
  padding: 20px 0;
  max-width: 500px;
  margin: auto;
  box-shadow: 0px 0px 55px #ddd;
  margin-top: 50px;
  font-size: 16px;
}

.form_input {
  padding: 6px 20px;
}

.inline {
  width: unset;
  vertical-align: middle;
}

input,
textarea,
select {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  border: none;
  border: 1px solid #ddd;
  box-shadow: 0px 0px 15px #0003;
  background-color: transparent;
  border-radius: 8px;
  color: #ddd;
}

input::placeholder,
textarea::placeholder {
  color: #ddd;
}

option {
  background-color: #ddd;
}
textarea {
  min-width: 100%;
  resize: none;
  font-family: sans-serif;
}

label {
  font-size: 0.88em;
  line-height: 2;
}
.checkbox {
  width: auto;
  height: 10px;
}

fieldset {
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 8px 6px 20px 20px;
  margin: 20px;
}

legend {
  padding: 0 6px;
  color: #ddd;
}

a {
  color: #69f;
  text-decoration: none;
}
6

What error do you get?