Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

He tells me that I do not comply with the conditions but I do comply with them.

  • Passed:1. You should have an h1 element with an id of title.

  • Passed:2. Your #title should not be empty.

  • Passed:3. You should have a p element with an id of description.

  • Passed:4. Your #description should not be empty.

  • Passed:5. You should have a form element with an id of survey-form.

  • Failed:6. You should have an input element with an id of name.

  • Failed:7. Your #name should have a type of text.

  • Failed:8. Your #name should require input.

  • Failed:9. Your #name should be a descendant of #survey-form.

  • Failed:10. You should have an input element with an id of email.

  • Failed:11. Your #email should have a type of email.

  • Failed:12. Your #email should require input.

  • Failed:13. Your #email should be a descendant of #survey-form.

  • Failed:14. You should have an input element with an id of number.

  • Failed:15. Your #number should be a descendant of #survey-form.

  • Failed:16. Your #number should have a type of number.

  • Failed:17. Your #number should have a min attribute with a numeric value.

  • Failed:18. Your #number should have a max attribute with a numeric value.

  • Failed:19. You should have a label element with an id of name-label.

  • Failed:20. You should have a label element with an id of email-label.

  • Failed:21. You should have a label element with an id of number-label.

  • Failed:22. Your #name-label should contain text that describes the input.

  • Failed:23. Your #email-label should contain text that describes the input.

  • Failed:24. Your #number-label should contain text that describes the input.

  • Passed:25. Your #name-label should be a descendant of #survey-form.

  • Passed:26. Your #email-label should be a descendant of #survey-form.

  • Passed:27. Your #number-label should be a descendant of #survey-form.

  • Failed:28. Your #name should have a placeholder attribute and value.

  • Failed:29. Your #email should have a placeholder attribute and value.

  • Failed:30. Your #number should have a placeholder attribute and value.

  • Passed:31. You should have a select field with an id of dropdown.

  • Passed:32. Your #dropdown should have at least two selectable (not disabled) option elements.

  • Passed:33. Your #dropdown should be a descendant of #survey-form.

  • Passed:34. You should have at least two input elements with a type of radio (radio buttons).

  • Passed:35. You should have at least two radio buttons that are descendants of #survey-form.

  • Failed:36. All your radio buttons should have a value attribute and value.

  • Passed:37. All your radio buttons should have a name attribute and value.

  • Passed:38. Every radio button group should have at least 2 radio buttons.

  • Passed:39. You should have at least two input elements with a type of checkbox (checkboxes) that are descendants of #survey-form.

  • Failed:40. All your checkboxes inside #survey-form should have a value attribute and value.

  • Passed:41. You should have at least one textarea element that is a descendant of #survey-form.

  • Failed:42. You should have an input or button element with an id of submit.

  • Failed:43. Your #submit should have a type of submit.

  • Failed:44. Your #submit should be a descendant of #survey-form.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Encuesta</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <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>

</html>


/* file: styles.css */
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;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hi @Inaki-lara

Your code needs to include specific attributes and their values.

Happy coding