3.7 KiB
3.7 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d778a367417b2b2512aa6 | Improve Form Field Accessibility with the label Element | 0 | 使用标签元素改进表单字段可访问性 |
Description
label
标签包装特定表单控件项的文本,通常是选项的名称或标签。这与项目的意义联系在一起,使表单更具可读性。 label
标签上的for
属性明确地将该label
与表单控件相关联,并由屏幕阅读器使用。您在“基本HTML”部分的课程中了解了单选按钮及其标签。在该课程中,我们将单选按钮输入元素与标签文本一起包装在label
元素中,以使文本可单击。另一种实现此目的的方法是使用本课程中介绍的for
属性。 for
属性的值必须与表单控件的id
属性的值相同。这是一个例子: <FORM>
<label for =“name”>名称:</ label>
<input type =“text”id =“name”name =“name”>
</ FORM>
Instructions
label
上添加与其input
字段中的id
匹配的for
属性。 Tests
tests:
- text: 您的代码应该在<code>label</code>标签上具有非空的<code>for</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>input</code>中的<code>id</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