freeCodeCamp/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.portu...

2.4 KiB

id title challengeType videoUrl localeTitle
bad87fee1348bd9aede08830 Create a Form Element 0 Crie um elemento de formulário

Description

Você pode criar formulários da Web que realmente enviam dados para um servidor usando nada além de HTML puro. Você pode fazer isso especificando uma ação no seu elemento de form . Por exemplo: <form action="/url-where-you-want-to-submit-form-data"></form>

Instructions

Aninhe seu campo de texto dentro de um elemento de form e adicione o atributo action="/submit-cat-photo" ao elemento form.

Tests

tests:
  - text: Aninhe seu elemento de entrada de texto em um elemento de <code>form</code> .
    testString: 'assert($("form") && $("form").children("input") && $("form").children("input").length > 0, "Nest your text input element within a <code>form</code> element.");'
  - text: Certifique-se de que seu <code>form</code> tenha um atributo de <code>action</code> definido como <code>/submit-cat-photo</code>
    testString: 'assert($("form").attr("action") === "/submit-cat-photo", "Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>");'
  - text: Certifique-se de que seu elemento de <code>form</code> tenha tags de abertura e fechamento bem formadas.
    testString: 'assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length, "Make sure your <code>form</code> element has well-formed open and close tags.");'

Challenge Seed

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <input type="text" placeholder="cat photo URL">
</main>

Solution

// solution required