From caaa60903f2c1889067fbac64afac0e457fe5d16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giftea=20=E2=98=95?= Date: Tue, 14 Oct 2025 00:32:48 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to form states lesson (#62712) Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> --- .../672a4cf959443073a6774908.md | 40 ++++++++++++++++--- 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md b/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md index 2912e9aa300..cb42e815659 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md @@ -5,23 +5,51 @@ challengeType: 19 dashedName: what-are-the-different-form-states --- -# --description-- +# --interactive-- In HTML, form controls, like inputs, can be in different stages or conditions like a `focused` state, `readonly` state, or `disabled` state. -The first state would be considered the `default` state. The default state of an email address input is a blank input. That is what the email input looks like when it is first rendered on the page. At this point, the user has not input any information. +The first state would be considered the `default` state. The default state of an email address input is a blank input. That is what the email input looks like when it is first rendered on the page. + +:::interactive_editor + +```html + +``` + +::: When the user clicks on a form control or selects it with the keyboard's tab key, then that means it is in the `focused` state. When an input is in the `focused` state, most browsers will show a blue highlighted border around the input. But you can choose to add additional styles in CSS. -Another form state is the `disabled` state. This state shows users that an input cannot be focused or activated. To disable an input, you can add the `disabled` boolean attribute to the element like this: +Click on any part of the whitespace in the preview window and then press the `tab` key to see the focus state. + +:::interactive_editor + +```html + +``` + +::: + +Another form state is the `disabled` state. This state shows users that an input cannot be focused or activated. + +Try clicking on the email input and you will notice that it will not focus anymore. + +:::interactive_editor ```html ``` -If the user tries to click on the input, then the focus will not be enabled. Similar to the `focused` state, you can choose to add additional styles for the `disabled` state using CSS. +::: -Another type of form state is the `readonly` state. This is when a form control, like an input, is not editable by the user. Here is an example of setting an email input to read only: +Similar to the `focused` state, you can choose to add additional styles for the `disabled` state using CSS. + +Another type of form state is the `readonly` state. This is when a form control, like an input, is not editable by the user. Here is an example of setting an email input to read-only. The `value` attribute is used to set the value shown inside the input field. + +Try editing the current value of `example@email.com` in the preview window, and you will notice that is not possible. + +:::interactive_editor ```html ``` -The `value` attribute is used to set the value shown inside the input field. If you tried to click on the input, you would not be able to edit the existing value. +::: A key difference between the `disabled` state and `readonly` state is that `readonly` can be focused while the `disabled` state cannot.