freeCodeCamp/curriculum/challenges/arabic/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://arabic.freecodecamp.org/guide/certificates/add-placeholder-text-to-a-text-field إضافة نص العنصر النائب إلى حقل نص

Description

نص العنصر النائب هو ما يتم عرضه في عنصر input قبل قيام المستخدم input أي شيء. يمكنك إنشاء نص عنصر نائب مثل: <input type="text" placeholder="this is placeholder text">

Instructions

placeholder قيمة placeholder input النص إلى "عنوان URL لصورة القط".

Tests

tests:
  - text: أضف سمة <code>placeholder</code> لعنصر <code>input</code> النص الحالي.
    testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");'
  - text: عيّن قيمة سمة العنصر النائب الخاصة بك إلى "عنوان URL لصورة القط".
    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: يجب أن يحتوي عنصر <code>input</code> النهائي على صيغة صحيحة.
    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