CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-22 21:08:12 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to form states lesson (#62712)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Giftea ☕ 2025-10-14 00:32:48 +01:00 committed by GitHub
parent ab2c4a8c31
commit caaa60903f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md
View File

@ -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
<input type="email" name="email" id="email" />
```
:::
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
<input type="email" name="email" id="email" />
```
:::
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
<input disabled type="email" name="email" id="email" />
```
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
<input
@ -33,7 +61,7 @@ Another type of form state is the `readonly` state. This is when a form control,
/>
```
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.