diff --git a/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md index cc55b7dadad..7604aa4b7a7 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md +++ b/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 ``` -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
@@ -23,7 +27,13 @@ The `action` attribute specifies where the form data will be sent upon submissio
``` -`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
@@ -34,7 +44,13 @@ The `action` attribute specifies where the form data will be sent upon submissio
``` -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
@@ -43,16 +59,24 @@ By nesting an `input` inside a `label` element, you create an implicit associati
``` -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
- +
``` -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--