freeCodeCamp

4.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d778a367417b2b2512aa6	Improve Form Field Accessibility with the label Element	0		تحسين إمكانية الوصول إلى حقل النموذج باستخدام عنصر التسمية

Description

ينطبق تحسين إمكانية الوصول باستخدام ترميز HTML الدلالية على استخدام كلٍّ من أسماء العلامات المناسبة وكذلك السمات. تغطي التحديات العديدة التالية بعض السيناريوهات المهمة التي تستخدم سمات في النماذج. تقوم علامة label بلف النص لعنصر تحكم محدد في النموذج ، وعادة ما يكون الاسم أو الملصق الخاص باختيار ما. هذا يربط معنى لهذا البند ويجعل الشكل أكثر قابلية للقراءة. و for السمة على label العلامة الزميلة صراحة على أن label مع عنصر تحكم النموذج ويستخدم من قبل قارئات الشاشة. لقد تعلمت عن أزرار الاختيار وتصنيفاتها في درس في قسم HTML الأساسي. في هذا الدرس ، قمنا بلف عنصر إدخال زر الراديو داخل عنصر label إلى جانب نص التسمية لجعل النص قابلاً للنقر. وهناك طريقة أخرى لتحقيق ذلك هي عن طريق استخدام for السمة كما هو موضح في هذا الدرس. يجب أن تكون قيمة السمة هي نفس قيمة السمة id for تحكم النموذج. إليك مثال على ذلك:

<form>
<label for = "name"> الاسم: </ label>
<input type = "text" id = "name" name = "name">
</ form>

Instructions

يتوقع كامبر كات اهتمامًا كبيرًا بمشاركاته المدروسة ، ويريد تضمين نموذج اشتراك بالبريد الإلكتروني. إضافة for السمة على البريد الإلكتروني label يطابق id عن دورتها input المجال.

Tests

tests:
  - text: يجب أن يكون التعليمات البرمجية ل <code>for</code> السمة على <code>label</code> العلامة التي ليس فارغا.
    testString: 'assert($("label").attr("for"), "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.");'
  - text: يجب أن تتوافق قيمة السمة <code>for</code> بك <code>for</code> قيمة <code>id</code> في <code>input</code> البريد الإلكتروني.
    testString: 'assert($("label").attr("for") == "email", "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.");'

Challenge Seed

<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <section>
    <form>
      <p>Sign up to receive Camper Cat's blog posts by email here!</p>


      <label>Email:</label>
      <input type="text" id="email" name="email">


      <input type="submit" name="submit" value="Submit">
    </form>
  </section>
  <article>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Is Chuck Norris a Cat Person?</h2>
    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Solution

// solution required

4.7 KiB Raw Blame History