feat(curriculum): Add interactive examples for form elements lesson (#62706)

curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-do-forms-labels-and-inputs-work-in-html
 ---
 
-# --description--
+# --interactive--
 
 The `form` element in HTML is used to gather user information, such as names and email addresses. Here is an example of a `form` element:
 
@@ -15,7 +15,11 @@ The `form` element in HTML is used to gather user information, such as names and
 </form>
 ```
 
-The `action` attribute specifies where the form data will be sent upon submission. To collect specific information, like names and email addresses, you would use the `input` element. Here is an example of using an `input` element:
+The `action` attribute specifies where the form data will be sent upon submission. To collect specific information, like names and email addresses, you would use the `input` element. Here is an example of using an `input` element.
+
+Interact with the `input` element in the preview window by typing in your name in the field.
+
+:::interactive_editor
 
 ```html
 <form action="">
@@ -23,7 +27,13 @@ The `action` attribute specifies where the form data will be sent upon submissio
 </form>
 ```
 
-`input` elements are void elements and do not have closing tags. The `type` attribute defines the data type expected from the user. In this case, the data would be plaintext. To add a label for the input, you would use a `label` element. Here is an example of using a `label` element with the text of `Full Name:`:
+:::
+
+`input` elements are void elements and do not have closing tags. The `type` attribute defines the data type expected from the user. In this case, the data would be plaintext. To add a label for the input, you would use a `label` element. Here is an example of using a `label` element with the text of `Full Name:`.
+
+Click on the text `Full Name:` in the preview window and you will see the input go into focus. 
+
+:::interactive_editor
 
 ```html
 <form action="">
@@ -34,7 +44,13 @@ The `action` attribute specifies where the form data will be sent upon submissio
 </form>
 ```
 
-By nesting an `input` inside a `label` element, you create an implicit association between the `label` and the `input` field. The term "implicit" refers to something that is understood or inferred without needing to be explicitly stated or defined with additional attributes or elements. To explicitly associate a `label` with an `input`, you can use the `for` attribute. Here is an example of using the `for` attribute for an email address label:
+:::
+
+By nesting an `input` inside a `label` element, you create an implicit association between the `label` and the `input` field. The term "implicit" refers to something that is understood or inferred without needing to be explicitly stated or defined with additional attributes or elements. To explicitly associate a `label` with an `input`, you can use the `for` attribute. Here is an example of using the `for` attribute for an email address label.
+
+Interact with the `input` element in the preview window by typing in a fake email address like `jane@example.com`.
+
+:::interactive_editor
 
 ```html
 <form action="">
@@ -43,16 +59,24 @@ By nesting an `input` inside a `label` element, you create an implicit associati
 </form>
 ```
 
-When using an explicit association, the values for the `for` attribute and `id` need to be the same. In this case, the values are both set to `email`. The `email` type in the input provides basic validation for correctly formatted email addresses. If you want to show additional hints to the users about the expected input, you can use the `placeholder` attribute. Here is an example using the `placeholder` attribute inside the email input:
+:::
+
+When using an explicit association, the values for the `for` attribute and `id` need to be the same. In this case, the values are both set to `email`. The `email` type in the input provides basic validation for correctly formatted email addresses. If you want to show additional hints to the users about the expected input, you can use the `placeholder` attribute. Here is an example using the `placeholder` attribute inside the email input.
+
+Click on the email input and start typing in an email and you will see the placeholder text go away.
+
+:::interactive_editor
 
 ```html
 <form action="">
   <label for="email"> Email Address: </label>
-  <input type="email" id="email" placeholder="Ex. example@email.com" />
+  <input type="email" id="email" placeholder="example@email.com" />
 </form>
 ```
 
-For the placeholder text, you want to provide helpful short text to show the format and type of data you expect from your users. In this case, the placeholder text, `Ex. example@email.com`, shows the user that they must enter a correctly formatted email address.
+:::
+
+For the placeholder text, you want to provide helpful short text to show the format and type of data you expect from your users. In this case, the placeholder text, `example@email.com`, shows the user that they must enter a correctly formatted email address.
 
 # --questions--