freeCodeCamp/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-ca.../5efb23e70dc218d6c85f89b1.md

3.3 KiB

id title challengeType dashedName
5efb23e70dc218d6c85f89b1 Paso 37 0 step-37

--description--

Hay diferentes tipos de elementos input, los cuales los puedes crear con el atributo type. Puedes crear fácilmente un campo de contraseña (password), un botón de reinicio (reset) o un control para permitir a los usuarios seleccionar un archivo desde su computadora.

Crea un campo de texto, para permitir la entrada de texto de un usuario, añadiendo el atributo type con el valor text al elemento input.

--hints--

Has eliminado el elemento input o tiene una sintaxis inválida. Si has añadido los atributos, asegúrate de que sus valores están entre comillas.

assert($('input').length);

Tu elemento form solo debe contener el elemento input. Elimina cualquier elemento HTML o texto extra que tengas entre las etiquetas del elemento form.

assert(
  $('form')[0].children.length === 1 &&
    $('form')[0].innerText.trim().length === 0
);

Tu elemento input no tiene un atributo type con el valor text. Comprueba que hay un espacio después del nombre de la etiqueta de apertura y/o que hay espacios antes de todos los nombres de los atributos.

assert($('input')[0].hasAttribute('type'));

Tu elemento input debe tener un atributo type con el valor text. Probablemente no has añadido el valor o tienes un error tipográfico. Recuerda que los valores de los atributos deben estar entre comillas.

assert(
  $('input')[0]
    .getAttribute('type')
    .replace(/\s+/g, ' ')
    .match(/^text$/i)
);

Aunque al atributo type del elemento input le hayas dado el valor text, se recomienda siempre poner el valor de un atributo entre comillas.

assert(!/\<input\s+type\s*=\s*text/.test(code));

--seed--

--seed-contents--

<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
--fcc-editable-region--
          <input>
--fcc-editable-region--
        </form>
      </section>
    </main>
  </body>
</html>