jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-02-01 03:04:01 -05:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): add for attribute to label elements in registration-form project (#47332)

Browse Source 
* Add files via upload

* removed merge conflicts

* new step 17

* write step 17 + seed code step 18

* for and id to remaining steps

* new step 28

* finish id and for in second fieldset

* new step 37

* 37 tests

* update seeds and solution

* more updating seeds and solution

* fixed wrong seed

* fixed wrong test

* formatting

* Apply suggestions from Shaun's code review

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

Co-authored-by: Johnathan Webster <81039525+JohnathanTWebster@users.noreply.github.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
Ilenia
2022-08-31 13:47:21 +02:00
committed by GitHub
parent 5fc59db760
commit 2e83a3d41d
47 changed files with 957 additions and 635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json
View File

@@ -75,176 +75,188 @@
"Step 16"
],
[
"60f80e0081e0f2052ae5b505",
"62ff8b9dab5ac88e4d3d43a3",
"Step 17"
],
[
"60f81167d0d4910809f88945",
"60f80e0081e0f2052ae5b505",
"Step 18"
],
[
"60f81616cff80508badf9ad5",
"60f81167d0d4910809f88945",
"Step 19"
],
[
"60f83e7bfc09900959f41e20",
"60f81616cff80508badf9ad5",
"Step 20"
],
[
"60f84ec41116b209c280ba91",
"60f83e7bfc09900959f41e20",
"Step 21"
],
[
"60f852f645b5310a8264f555",
"60f84ec41116b209c280ba91",
"Step 22"
],
[
"60f85a62fb30c80bcea0cedb",
"60f852f645b5310a8264f555",
"Step 23"
],
[
"60f8604682407e0d017bbf7f",
"60f85a62fb30c80bcea0cedb",
"Step 24"
],
[
"60f8618d191b940d62038513",
"60f8604682407e0d017bbf7f",
"Step 25"
],
[
"60fab4a123ce4b04526b082b",
"60f8618d191b940d62038513",
"Step 26"
],
[
"60fab8367d35de04e5cb7929",
"60fab4a123ce4b04526b082b",
"Step 27"
],
[
"60fab9f17fa294054b74228c",
"62ff8e998d3e7eae14d6ae3b",
"Step 28"
],
[
"60fabf0dd4959805dbae09e6",
"60fab8367d35de04e5cb7929",
"Step 29"
],
[
"60fac4095512d3066053d73c",
"60fab9f17fa294054b74228c",
"Step 30"
],
[
"60fac56271087806def55b33",
"60fabf0dd4959805dbae09e6",
"Step 31"
],
[
"60fac8d7fdfaee0796934f20",
"60fac4095512d3066053d73c",
"Step 32"
],
[
"60faca286cb48b07f6482970",
"60fac56271087806def55b33",
"Step 33"
],
[
"60facde2d0dc61085b41063f",
"60fac8d7fdfaee0796934f20",
"Step 34"
],
[
"60facf914c7b9b08d7510c2c",
"60faca286cb48b07f6482970",
"Step 35"
],
[
"60fad0a812d9890938524f50",
"60facde2d0dc61085b41063f",
"Step 36"
],
[
"60fad1cafcde010995e15306",
"62ff919a7b5612c0670923a5",
"Step 37"
],
[
"60fad6dfcc0d930a59becf12",
"60facf914c7b9b08d7510c2c",
"Step 38"
],
[
"60fad8e6148f310bba7890b1",
"60fad0a812d9890938524f50",
"Step 39"
],
[
"60fad99e09f9d30c1657e790",
"60fad1cafcde010995e15306",
"Step 40"
],
[
"60fadb18058e950c73925279",
"60fad6dfcc0d930a59becf12",
"Step 41"
],
[
"60fadce90f85c50d0bb0dd4f",
"60fad8e6148f310bba7890b1",
"Step 42"
],
[
"62b30924c5e4ef0daba23b5e",
"60fad99e09f9d30c1657e790",
"Step 43"
],
[
"60fadd972e6ffe0d6858fa2d",
"60fadb18058e950c73925279",
"Step 44"
],
[
"60fadfa2b540b70dcfa8b771",
"60fadce90f85c50d0bb0dd4f",
"Step 45"
],
[
"60fc219d333e37046f474a6e",
"62b30924c5e4ef0daba23b5e",
"Step 46"
],
[
"60fc22d1e64d1b04cdd4e602",
"60fadd972e6ffe0d6858fa2d",
"Step 47"
],
[
"60fc236dc04532052926fdac",
"60fadfa2b540b70dcfa8b771",
"Step 48"
],
[
"60ffe1bc30415f042faea936",
"60fc219d333e37046f474a6e",
"Step 49"
],
[
"60ffe3936796ac04959285a9",
"60fc22d1e64d1b04cdd4e602",
"Step 50"
],
[
"60ffe4f4ec18cd04dc470c56",
"60fc236dc04532052926fdac",
"Step 51"
],
[
"60ffe69ee377c6055e192a46",
"60ffe1bc30415f042faea936",
"Step 52"
],
[
"60ffe7d8aae62c05bcc9e7eb",
"60ffe3936796ac04959285a9",
"Step 53"
],
[
"60ffe8a5ceb0e90618db06d9",
"60ffe4f4ec18cd04dc470c56",
"Step 54"
],
[
"60ffe947a868ec068f7850f6",
"60ffe69ee377c6055e192a46",
"Step 55"
],
[
"60ffe9cb47809106eda2f2c9",
"60ffe7d8aae62c05bcc9e7eb",
"Step 56"
],
[
"60ffec2825da1007509ddd06",
"60ffe8a5ceb0e90618db06d9",
"Step 57"
],
[
"60ffecefac971607ae73c60f",
"60ffe947a868ec068f7850f6",
"Step 58"
],
[
"60ffefd6479a3d084fb77cbc",
"60ffe9cb47809106eda2f2c9",
"Step 59"
],
[
"60ffec2825da1007509ddd06",
"Step 60"
],
[
"60ffecefac971607ae73c60f",
"Step 61"
],
[
"60ffefd6479a3d084fb77cbc",
"Step 62"
]
]
}

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md
View File

@@ -1,8 +1,8 @@
---
id: 60f80e0081e0f2052ae5b505
title: Step 17
title: Step 18
challengeType: 0
dashedName: step-17
dashedName: step-18
---
# --description--
@@ -58,10 +58,10 @@ assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password');
<form action='https://register-demo.freecodecamp.org'>
--fcc-editable-region--
<fieldset>
<label>Enter Your First Name: <input /></label>
<label>Enter Your Last Name: <input /></label>
<label>Enter Your Email: <input /></label>
<label>Create a New Password: <input /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" /></label>
<label for="email">Enter Your Email: <input id="email" /></label>
<label for="new-password">Create a New Password: <input id="new-password" /></label>
</fieldset>
--fcc-editable-region--
<fieldset></fieldset>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md
View File

@@ -1,8 +1,8 @@
---
id: 60f81167d0d4910809f88945
title: Step 18
title: Step 19
challengeType: 0
dashedName: step-18
dashedName: step-19
---
# --description--
@@ -49,10 +49,10 @@ assert.exists(document.querySelector('fieldset + input[value="Submit"]'));
<form action='https://register-demo.freecodecamp.org'>
--fcc-editable-region--
<fieldset>
<label>Enter Your First Name: <input type="text" /></label>
<label>Enter Your Last Name: <input type="text" /></label>
<label>Enter Your Email: <input type="email" /></label>
<label>Create a New Password: <input type="password" /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" /></label>
<label for="email">Enter Your Email: <input id="email" type="email" /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" /></label>
</fieldset>
<fieldset></fieldset>
<fieldset></fieldset>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md
View File

@@ -1,8 +1,8 @@
---
id: 60f81616cff80508badf9ad5
title: Step 19
title: Step 20
challengeType: 0
dashedName: step-19
dashedName: step-20
---
# --description--
@@ -63,10 +63,10 @@ assert.equal(document.querySelector('input[type="submit"]')?.required, false);
<form action='https://register-demo.freecodecamp.org'>
--fcc-editable-region--
<fieldset>
<label>Enter Your First Name: <input type="text" /></label>
<label>Enter Your Last Name: <input type="text" /></label>
<label>Enter Your Email: <input type="email" /></label>
<label>Create a New Password: <input type="password" /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" /></label>
<label for="email">Enter Your Email: <input id="email" type="email" /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" /></label>
</fieldset>
<fieldset></fieldset>
<fieldset></fieldset>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md
View File

@@ -1,8 +1,8 @@
---
id: 60f83e7bfc09900959f41e20
title: Step 20
title: Step 21
challengeType: 0
dashedName: step-20
dashedName: step-21
---
# --description--
@@ -43,10 +43,10 @@ assert.equal(document.querySelector('input[type="password"]')?.minLength, 8);
<form action='https://register-demo.freecodecamp.org'>
--fcc-editable-region--
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" required /></label>
</fieldset>
--fcc-editable-region--
<fieldset></fieldset>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md
View File

@@ -1,8 +1,8 @@
---
id: 60f84ec41116b209c280ba91
title: Step 21
title: Step 22
challengeType: 0
dashedName: step-21
dashedName: step-22
---
# --description--
@@ -51,10 +51,10 @@ assert.equal(document.querySelector('input[type="password"]')?.minLength, -1);
<form action='https://register-demo.freecodecamp.org'>
--fcc-editable-region--
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" minlength="8" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" minlength="8" required /></label>
</fieldset>
--fcc-editable-region--
<fieldset></fieldset>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md
View File

@@ -1,8 +1,8 @@
---
id: 60f852f645b5310a8264f555
title: Step 22
title: Step 23
challengeType: 0
dashedName: step-22
dashedName: step-23
---
# --description--
@@ -42,10 +42,10 @@ assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('la
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
--fcc-editable-region--
<fieldset>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md
View File

@@ -1,8 +1,8 @@
---
id: 60f85a62fb30c80bcea0cedb
title: Step 23
title: Step 24
challengeType: 0
dashedName: step-23
dashedName: step-24
---
# --description--
@@ -49,10 +49,10 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
--fcc-editable-region--
<fieldset>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md
View File

@@ -1,8 +1,8 @@
---
id: 60f8604682407e0d017bbf7f
title: Step 24
title: Step 25
challengeType: 0
dashedName: step-24
dashedName: step-25
---
# --description--
@@ -46,10 +46,10 @@ assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) in
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
--fcc-editable-region--
<fieldset>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md
View File

@@ -1,8 +1,8 @@
---
id: 60f8618d191b940d62038513
title: Step 25
title: Step 26
challengeType: 0
dashedName: step-25
dashedName: step-26
---
# --description--
@@ -70,10 +70,10 @@ assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)'
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
--fcc-editable-region--
<fieldset>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md
View File

@@ -1,8 +1,8 @@
---
id: 60fab4a123ce4b04526b082b
title: Step 26
title: Step 27
challengeType: 0
dashedName: step-26
dashedName: step-27
---
# --description--
@@ -48,10 +48,10 @@ assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3)
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
--fcc-editable-region--
<fieldset>

18
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
View File

@@ -1,8 +1,8 @@
---
id: 60fab8367d35de04e5cb7929
title: Step 27
title: Step 29
challengeType: 0
dashedName: step-27
dashedName: step-29
---
# --description--
@@ -50,16 +50,16 @@ assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label><input type="checkbox" required /> I accept the terms and conditions</label>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions"><input id="terms-and-conditions" required /> I accept the terms and conditions</label>
</fieldset>
--fcc-editable-region--
<fieldset></fieldset>

21
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md
View File

@@ -1,8 +1,8 @@
---
id: 60fab9f17fa294054b74228c
title: Step 28
title: Step 30
challengeType: 0
dashedName: step-28
dashedName: step-30
---
# --description--
@@ -48,17 +48,16 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.ty
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the
<a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--

20
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md
View File

@@ -1,8 +1,8 @@
---
id: 60fabf0dd4959805dbae09e6
title: Step 29
title: Step 31
challengeType: 0
dashedName: step-29
dashedName: step-31
---
# --description--
@@ -62,16 +62,16 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--

23
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md
View File

@@ -1,8 +1,8 @@
---
id: 60fac4095512d3066053d73c
title: Step 30
title: Step 32
challengeType: 0
dashedName: step-30
dashedName: step-32
---
# --description--
@@ -42,23 +42,22 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option'
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>Input your age (years): <input type="number" min="13" max="120" /></label>
</fieldset>
--fcc-editable-region--

25
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md
View File

@@ -1,8 +1,8 @@
---
id: 60fac56271087806def55b33
title: Step 31
title: Step 33
challengeType: 0
dashedName: step-31
dashedName: step-33
---
# --description--
@@ -52,23 +52,22 @@ assert.equal(document.querySelectorAll('fieldset > label > select > option')?.le
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>Input your age (years): <input type="number" min="13" max="120" /></label>
<select>
<option></option>
<option></option>

23
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md
View File

@@ -1,8 +1,8 @@
---
id: 60fac8d7fdfaee0796934f20
title: Step 32
title: Step 34
challengeType: 0
dashedName: step-32
dashedName: step-34
---
# --description--
@@ -66,23 +66,22 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>Input your age (years): <input type="number" min="13" max="120" /></label>
<label>How did you hear about us?
<select>
<option></option>

23
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md
View File

@@ -1,8 +1,8 @@
---
id: 60faca286cb48b07f6482970
title: Step 33
title: Step 35
challengeType: 0
dashedName: step-33
dashedName: step-35
---
# --description--
@@ -60,23 +60,22 @@ assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>Input your age (years): <input type="number" min="13" max="120" /></label>
<label>How did you hear about us?
<select>
<option>(select one)</option>

23
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md
View File

@@ -1,8 +1,8 @@
---
id: 60facde2d0dc61085b41063f
title: Step 34
title: Step 36
challengeType: 0
dashedName: step-34
dashedName: step-36
---
# --description--
@@ -54,23 +54,22 @@ assert.match(code, /<textarea\s*>[\s\S]*<\/textarea\s*>/);
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>Input your age (years): <input type="number" min="13" max="120" /></label>
<label>How did you hear about us?
<select>
<option value="">(select one)</option>

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md
View File

@@ -1,8 +1,8 @@
---
id: 60facf914c7b9b08d7510c2c
title: Step 35
title: Step 38
challengeType: 0
dashedName: step-35
dashedName: step-38
---
# --description--
@@ -42,25 +42,24 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>How did you hear about us?
<select>
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -68,8 +67,8 @@ assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea></textarea>
<label for="bio">Provide a bio:
<textarea id="bio"></textarea>
</label>
</fieldset>
--fcc-editable-region--

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md
View File

@@ -1,8 +1,8 @@
---
id: 60fad0a812d9890938524f50
title: Step 36
title: Step 39
challengeType: 0
dashedName: step-36
dashedName: step-39
---
# --description--
@@ -42,25 +42,24 @@ assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>How did you hear about us?
<select>
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -68,8 +67,8 @@ assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea rows="3" cols="30"></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" rows="3" cols="30"></textarea>
</label>
</fieldset>
--fcc-editable-region--

35
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md
View File

@@ -1,8 +1,8 @@
---
id: 60fad1cafcde010995e15306
title: Step 37
title: Step 40
challengeType: 0
dashedName: step-37
dashedName: step-40
---
# --description--
@@ -102,25 +102,24 @@ You should not give any of the `fieldset` elements a `name` attribute.
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
--fcc-editable-region--
<fieldset>
<label>Enter Your First Name: <input type="text" required /></label>
<label>Enter Your Last Name: <input type="text" required /></label>
<label>Enter Your Email: <input type="email" required /></label>
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" />
</label>
<label>How did you hear about us?
<select>
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file"/></label>
<label for="age">Input your age (years): <input id="age" type="number" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -128,8 +127,8 @@ You should not give any of the `fieldset` elements a `name` attribute.
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id ="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
--fcc-editable-region--

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md
View File

@@ -1,8 +1,8 @@
---
id: 60fad6dfcc0d930a59becf12
title: Step 38
title: Step 41
challengeType: 0
dashedName: step-38
dashedName: step-41
---
# --description--
@@ -48,24 +48,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px')
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -73,8 +72,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px')
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md
View File

@@ -1,8 +1,8 @@
---
id: 60fad8e6148f310bba7890b1
title: Step 39
title: Step 42
challengeType: 0
dashedName: step-39
dashedName: step-42
---
# --description--
@@ -46,24 +46,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'cent
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -71,8 +70,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'cent
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md
View File

@@ -1,8 +1,8 @@
---
id: 60fad99e09f9d30c1657e790
title: Step 40
title: Step 43
challengeType: 0
dashedName: step-40
dashedName: step-43
---
# --description--
@@ -58,24 +58,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw');
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -83,8 +82,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw');
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md
View File

@@ -1,8 +1,8 @@
---
id: 60fadb18058e950c73925279
title: Step 41
title: Step 44
challengeType: 0
dashedName: step-41
dashedName: step-44
---
# --description--
@@ -52,24 +52,23 @@ assert.equal(fieldset?.paddingRight, '0px');
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -77,8 +76,8 @@ assert.equal(fieldset?.paddingRight, '0px');
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md
View File

@@ -1,8 +1,8 @@
---
id: 60fadce90f85c50d0bb0dd4f
title: Step 42
title: Step 45
challengeType: 0
dashedName: step-42
dashedName: step-45
---
# --description--
@@ -34,24 +34,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset')?.borderBottom,
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -59,8 +58,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset')?.borderBottom,
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md
View File

@@ -1,8 +1,8 @@
---
id: 60fadd972e6ffe0d6858fa2d
title: Step 44
title: Step 47
challengeType: 0
dashedName: step-44
dashedName: step-47
---
# --description--
@@ -73,24 +73,23 @@ assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'sel
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -98,8 +97,8 @@ assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'sel
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md
View File

@@ -1,8 +1,8 @@
---
id: 60fadfa2b540b70dcfa8b771
title: Step 45
title: Step 48
challengeType: 0
dashedName: step-45
dashedName: step-48
---
# --description--
@@ -48,26 +48,25 @@ assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -75,8 +74,8 @@ assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md
View File

@@ -1,8 +1,8 @@
---
id: 60fc219d333e37046f474a6e
title: Step 46
title: Step 49
challengeType: 0
dashedName: step-46
dashedName: step-49
---
# --description--
@@ -40,24 +40,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -65,8 +64,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md
View File

@@ -1,8 +1,8 @@
---
id: 60fc22d1e64d1b04cdd4e602
title: Step 47
title: Step 50
challengeType: 0
dashedName: step-47
dashedName: step-50
---
# --description--
@@ -52,24 +52,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -77,8 +76,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md
View File

@@ -1,8 +1,8 @@
---
id: 60fc236dc04532052926fdac
title: Step 48
title: Step 51
challengeType: 0
dashedName: step-48
dashedName: step-51
---
# --description--
@@ -36,24 +36,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign,
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -61,8 +60,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign,
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffe1bc30415f042faea936
title: Step 49
title: Step 52
challengeType: 0
dashedName: step-49
dashedName: step-52
---
# --description--
@@ -51,24 +51,23 @@ assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.bord
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -76,8 +75,8 @@ assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.bord
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffe3936796ac04959285a9
title: Step 50
title: Step 53
challengeType: 0
dashedName: step-50
dashedName: step-53
---
# --description--
@@ -44,24 +44,23 @@ assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minH
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -69,8 +68,8 @@ assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minH
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffe4f4ec18cd04dc470c56
title: Step 51
title: Step 54
challengeType: 0
dashedName: step-51
dashedName: step-54
---
# --description--
@@ -48,24 +48,23 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minH
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -73,8 +72,8 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minH
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffe69ee377c6055e192a46
title: Step 52
title: Step 55
challengeType: 0
dashedName: step-52
dashedName: step-55
---
# --description--
@@ -54,24 +54,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.w
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -79,8 +78,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.w
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffe7d8aae62c05bcc9e7eb
title: Step 53
title: Step 56
challengeType: 0
dashedName: step-53
dashedName: step-56
---
# --description--
@@ -43,24 +43,23 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -68,8 +67,8 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffe8a5ceb0e90618db06d9
title: Step 54
title: Step 57
challengeType: 0
dashedName: step-54
dashedName: step-57
---
# --description--
@@ -40,24 +40,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.f
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -65,8 +64,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.f
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffe947a868ec068f7850f6
title: Step 55
title: Step 58
challengeType: 0
dashedName: step-55
dashedName: step-58
---
# --description--
@@ -40,24 +40,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.b
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -65,8 +64,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.b
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffe9cb47809106eda2f2c9
title: Step 56
title: Step 59
challengeType: 0
dashedName: step-56
dashedName: step-59
---
# --description--
@@ -43,24 +43,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.m
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -68,8 +67,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.m
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffec2825da1007509ddd06
title: Step 57
title: Step 60
challengeType: 0
dashedName: step-57
dashedName: step-60
---
# --description--
@@ -42,24 +42,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.pad
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -67,8 +66,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.pad
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffecefac971607ae73c60f
title: Step 58
title: Step 61
challengeType: 0
dashedName: step-58
dashedName: step-61
---
# --description--
@@ -40,24 +40,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -65,8 +64,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

62
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
View File

@@ -1,8 +1,8 @@
---
id: 60ffefd6479a3d084fb77cbc
title: Step 59
title: Step 62
challengeType: 0
dashedName: step-59
dashedName: step-62
---
# --description--
@@ -42,24 +42,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -67,8 +66,8 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />
@@ -172,24 +171,23 @@ input[type="file"] {
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
<label>
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -197,8 +195,8 @@ input[type="file"] {
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

33
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62b30924c5e4ef0daba23b5e.md
View File

@@ -1,8 +1,8 @@
---
id: 62b30924c5e4ef0daba23b5e
title: Step 43
title: Step 46
challengeType: 0
dashedName: step-43
dashedName: step-46
---
# --description--
@@ -47,24 +47,23 @@ assert(borderBottom === 'none' || borderBottom === 'medium none');
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
<label>Enter Your Email: <input type="email" name="email" required /></label>
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label>
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions" name="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
<fieldset>
<label>Upload a profile picture: <input type="file" name="file" /></label>
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
</label>
<label>How did you hear about us?
<select name="referrer">
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
<label for="referrer">How did you hear about us?
<select id="referrer" name="referrer">
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
@@ -72,8 +71,8 @@ assert(borderBottom === 'none' || borderBottom === 'medium none');
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
<label for="bio">Provide a bio:
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
</label>
</fieldset>
<input type="submit" value="Submit" />

109
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md Normal file
View File

@@ -0,0 +1,109 @@
---
id: 62ff8b9dab5ac88e4d3d43a3
title: Step 17
challengeType: 0
dashedName: step-17
---
# --description--
Following accessibility best practices, link the `input` elements and the `label` elements together using the `for` attribute.
Use these values for the respective `id` properties: `first-name`, `last-name`, `email`, `new-password`
# --hints--
The first `input` element should have an `id` of `first-name`.
```js
assert(document.querySelectorAll('input')?.[0]?.matches('#first-name'))
```
The second `input` element should have an `id` of `last-name`.
```js
assert(document.querySelectorAll('input')?.[1]?.matches('#last-name'))
```
The third `input` element should have an `id` of `email`.
```js
assert(document.querySelectorAll('input')?.[2]?.matches('#email'))
```
The fourth `input` element should have an `id` of `new-password`.
```js
assert(document.querySelectorAll('input')?.[3]?.matches('#new-password'))
```
The first `label` element should have a `for` attribute with a value of `first-name`.
```js
assert(document.querySelectorAll('label')?.[0]?.matches('label[for="first-name"]'))
```
The second `label` element should have a `for` attribute with a value of `last-name`.
```js
assert(document.querySelectorAll('label')?.[1]?.matches('label[for="last-name"]'))
```
The third `label` element should have a `for` attribute with a value of `email`.
```js
assert(document.querySelectorAll('label')?.[2]?.matches('label[for="email"]'))
```
The fourth `label` element should have a `for` attribute with a value of `new-password`.
```js
assert(document.querySelectorAll('label')?.[3]?.matches('label[for="new-password"]'))
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
--fcc-editable-region--
<fieldset>
<label>Enter Your First Name: <input /></label>
<label>Enter Your Last Name: <input /></label>
<label>Enter Your Email: <input /></label>
<label>Create a New Password: <input /></label>
</fieldset>
--fcc-editable-region--
<fieldset></fieldset>
<fieldset></fieldset>
</form>
</body>
</html>
```
```css
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
label {
display: block;
margin: 0.5rem 0;
}
```

102
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md Normal file
View File

@@ -0,0 +1,102 @@
---
id: 62ff8e998d3e7eae14d6ae3b
title: Step 28
challengeType: 0
dashedName: step-28
---
# --description--
Follow accessibility best practices by linking the `input` elements and the `label` elements in the second `fieldset`.
Use these values for the respective `id` properties: `personal-account`, `business-account`, `terms-and-conditions`
# --hints--
The first `input` element should have an `id` of `personal-account`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[0]?.matches('#personal-account'))
```
The second `input` element should have an `id` of `business-account`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[1]?.matches('#business-account'))
```
The third `input` element should have an `id` of `terms-and-conditions`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[2]?.matches('#terms-and-conditions'))
```
The first `label` element should have a `for` attribute with a value of `personal-account`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[0]?.matches('label[for="personal-account"]'))
```
The second `label` element should have a `for` attribute with a value of `business-account`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[1]?.matches('label[for="business-account"]'))
```
The third `label` element should have a `for` attribute with a value of `terms-and-conditions`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[2]?.matches('label[for="terms-and-conditions"]'))
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label><input type="radio" name="account-type" /> Personal Account</label>
<label><input type="radio" name="account-type" /> Business Account</label>
<label><input type="checkbox" required /> I accept the terms and conditions</label>
</fieldset>
--fcc-editable-region--
<fieldset></fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
```
```css
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
label {
display: block;
margin: 0.5rem 0;
}
```

131
curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff919a7b5612c0670923a5.md Normal file
View File

@@ -0,0 +1,131 @@
---
id: 62ff919a7b5612c0670923a5
title: Step 37
challengeType: 0
dashedName: step-37
---
# --description--
Link the applicable form elements and their `label` elements together.
Use these values for the respective `id` properties: `profile-picture`, `age`, `referrer`, `bio`
# --hints--
The first `input` element should have an `id` of `profile-picture`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(3) input')?.[0]?.matches('#profile-picture'))
```
The second `input` element should have an `id` of `age`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(3) input')?.[1]?.matches('#age'))
```
The `select` element should have an `id` of `referrer`.
```js
assert(document.querySelector('fieldset:nth-of-type(3) select')?.matches('#referrer'))
```
The `textarea` element should have an `id` of `bio`.
```js
assert(document.querySelector('fieldset:nth-of-type(3) textarea')?.matches('#bio'))
```
The first `label` element should have a `for` attribute with a value of `profile-picture`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[0]?.matches('label[for="profile-picture"]'))
```
The second `label` element should have a `for` attribute with a value of `age`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[1]?.matches('label[for="age"]'))
```
The third `label` element should have a `for` attribute with a value of `referrer`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[2]?.matches('label[for="referrer"]'))
```
The fourth `label` element should have a `for` attribute with a value of `bio`.
```js
assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[3]?.matches('label[for="bio"]'))
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Registration Form</h1>
<p>Please fill out this form with the required information</p>
<form action='https://register-demo.freecodecamp.org'>
<fieldset>
<label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
<label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
<label for="email">Enter Your Email: <input id="email" type="email" required /></label>
<label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
</fieldset>
<fieldset>
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
<label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
<label for="terms-and-conditions">
<input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
</label>
</fieldset>
--fcc-editable-region--
<fieldset>
<label>Upload a profile picture: <input type="file" /></label>
<label>Input your age (years): <input type="number" min="13" max="120" /></label>
<label>How did you hear about us?
<select>
<option value="">(select one)</option>
<option value="1">freeCodeCamp News</option>
<option value="2">freeCodeCamp YouTube Channel</option>
<option value="3">freeCodeCamp Forum</option>
<option value="4">Other</option>
</select>
</label>
<label>Provide a bio:
<textarea></textarea>
</label>
</fieldset>
--fcc-editable-region--
<input type="submit" value="Submit" />
</form>
</body>
</html>
```
```css
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
}
label {
display: block;
margin: 0.5rem 0;
}
```