freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-t...

2.4 KiB

id title challengeType guideUrl videoUrl localeTitle
bad87fee1348bd9aedf08830 Add Placeholder Text to a Text Field 0 https://spanish.freecodecamp.org/guide/certificates/add-placeholder-text-to-a-text-field Añadir texto de marcador de posición a un campo de texto

Description

El texto de marcador de posición es lo que se muestra en su elemento de input antes de que su usuario haya ingresado algo. Puede crear texto de marcador de posición de la siguiente forma: <input type="text" placeholder="this is placeholder text">

Instructions

Establezca el valor de placeholder de placeholder de su input texto en "URL de foto de gato".

Tests

tests:
  - text: Agregue un atributo de <code>placeholder</code> al elemento de <code>input</code> texto existente.
    testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");'
  - text: Establezca el valor de su atributo de marcador de posición en "URL de foto de gato".
    testString: 'assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), "Set the value of your placeholder attribute to "cat photo URL".");'
  - text: El elemento de <code>input</code> terminado debe tener una sintaxis válida.
    testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|".*?"|[\^"">\s]+))?)+\s*|\s*)\/?>/gi), "The finished <code>input</code> element should have valid syntax.");'

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">
</main>

Solution

// solution required