freeCodeCamp/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-fo...

2.7 KiB

id title challengeType guideUrl videoUrl localeTitle
bad87fee1348bd9aedd08830 Add a Submit Button to a Form 0 https://arabic.freecodecamp.org/guide/certificates/add-a-submit-button-to-a-form إضافة زر إرسال إلى نموذج

Description

دعنا نضيف زر submit إلى النموذج الخاص بك. يؤدي النقر على هذا الزر إلى إرسال البيانات من النموذج إلى عنوان URL الذي حددته باستخدام سمة action للنموذج. في ما يلي مثال زر الإرسال: <button type="submit">this button submits the form</button>

Instructions

أضف زرًا باعتباره العنصر الأخير في عنصر form الخاص بك مع نوع submit ، و "إرسال" كنصه.

Tests

tests:
  - text: يجب أن يحتوي النموذج الخاص بك على زر بداخله.
    testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
  - text: يجب أن يحتوي زر الإرسال على <code>type</code> السمة الذي تم تعيينه <code>submit</code> .
    testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");'
  - text: يجب أن يحتوي زر الإرسال فقط على النص "إرسال".
    testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
  - text: تأكد من أن عنصر <code>button</code> يحتوي على علامة إغلاق.
    testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");'

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>
  <form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
  </form>
</main>

Solution

// solution required