fix(curriculum): replace uncovered quiz questions and add interactive example (freeCodeCamp#63780)

Author: tanmaygautam11

curriculum/challenges/english/blocks/lecture-accessible-tables-forms/672a53ae8f1ad28c8a1ed0f0.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: why-is-it-important-for-inputs-to-have-an-associated-label
 ---
 
-# --description--
+# --interactive--
 
 Labels on input fields might seem like small details, but they play a crucial role in making forms easier for everyone to use.
 
@@ -17,13 +17,17 @@ Screen readers often rely on labels to describe the purpose of input fields. In
 
 Here's how to associate a `label` with an `input`:
 
+:::interactive_editor
+
 ```html
 <form>
    <label for="name">Your Name</label>
    <input type="text" id="name" />
 </form>
 ```
 
+:::
+
 In this example, the `for` attribute of the `label` element is associated with the `id` of the `input` element. This connection allows screen readers to announce the `label` when the `input` is in a focused state, allowing screen reader users to understand the purpose of the `input`.
 
 Associating labels with all input fields also benefits SEO.  With proper labels, search engines will understand the page content better, leading to a positive impact on the page search rankings.
@@ -70,71 +74,71 @@ Think about how screen readers provide information to users.
 
 ## --text--
 
-How do labels associated with input fields improve keyboard navigation?
+What is the correct way to programmatically associate a label with an input in HTML?
 
 ## --answers--
 
-They enhance the visual appearance of input fields.
+Give both elements the same `name` attribute.
 
 ### --feedback--
 
-Focus on how users move through a form using only the keyboard.
+Review the example in the lesson showing how `for` and `id` are used together.
 
 ---
 
-They allow users to tab through input fields without getting lost.
+Set the label's `for` attribute to match the input's `id`.
 
 ---
 
-They reduce the need for keyboard shortcuts.
+Place the `<label>` immediately after the `<input>` element in the DOM.
 
 ### --feedback--
 
-Focus on how users move through a form using only the keyboard.
+Order alone does not create an association that screen readers can use.
 
 ---
 
-They let input fields accept special characters.
+Use the input's `placeholder` text instead of a label.
 
 ### --feedback--
 
-Focus on how users move through a form using only the keyboard.
+Placeholders are not a replacement for accessible, programmatically associated labels.
 
 ## --video-solution--
 
 2
 
 ## --text--
 
-How do labels associated with input fields help in identifying errors?
+Besides accessibility, what other benefit of associating labels with inputs is mentioned in the lesson?
 
 ## --answers--
 
-They allow input fields to accept longer text.
+It makes the page load significantly faster.
 
 ### --feedback--
 
-Think about how error messages are communicated to users by screen readers.
+Performance is not the benefit discussed in this lesson.
 
 ---
 
-They help screen readers announce the label along with the error message.
+It can help search engines better understand the page content.
 
 ---
 
-They prevent users from submitting forms.
+It allows inputs to accept multiple data types automatically.
 
 ### --feedback--
 
-Think about how error messages are communicated to users by screen readers.
+Data types are determined by the input's `type` attribute, not labels.
 
 ---
 
-They make input fields more colorful.
+It automatically translates labels for international users.
 
 ### --feedback--
 
-Think about how error messages are communicated to users by screen readers.
+Internationalization is outside the scope of what labels provide.
 
 ## --video-solution--