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

3.2 KiB

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

--description--

Existem muitos tipos de entradas (inputs) que você pode criar usando o atributo type. Você pode criar facilmente um campo de senha, um botão de redefinição ou um controle para permitir que os usuários selecionem um arquivo armazenado no computador.

Crie um campo de texto para obter a entrada de texto de um usuário adicionando o atributo type com o valor text para o elemento input.

--hints--

Você excluiu o elemento input ou ele tem uma sintaxe inválida. Se você adicionou atributos, certifique-se de que seus valores estejam cercados por aspas.

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

O elemento form deve conter apenas o elemento input. Remova os elementos HTML ou o texto adicionais entre as tags do elemento form.

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

O elemento input não tem o atributo type com o valor text. Verifique se há um espaço depois do nome da tag de abertura e/ou se há espaços antes de todos os nomes dos atributos.

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

O elemento input deve ter o atributo type com o valor text. Você omitiu o valor ou tem um erro de digitação. Lembre-se de que os valores dos atributos devem estar cercados com aspas.

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

Embora você tenha definido o atributo type do elemento input com o valor text, é recomendável sempre cercar o valor de um atributo com aspas.

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>