4.7 KiB
4.7 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d778a367417b2b2512aa6 | Improve Form Field Accessibility with the label Element | 0 | تحسين إمكانية الوصول إلى حقل النموذج باستخدام عنصر التسمية |
Description
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>© 2018 Camper Cat</footer>
</body>
Solution
// solution required