From 5f488224c04e54a12d2621772b1b1c542f9667a9 Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Wed, 9 Sep 2026 17:29:25 +0100 Subject: [PATCH 01/11] Add name and email fields --- Form-Controls/index.html | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..221ea9928 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -6,6 +6,7 @@ My form exercise +
@@ -13,15 +14,22 @@

Product Pick

- - +
+ + +
+ +
+ + +
+ +
From 04c6b2db6340ddf698bad9609a9489d9c2501ede Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Thu, 10 Sep 2026 10:07:37 +0100 Subject: [PATCH 02/11] Add T-Shirt colour radio buttons --- Form-Controls/index.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 221ea9928..bdf5ce03e 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -23,7 +23,21 @@

Product Pick

+ +
+ T-Shirt Colour + + + + + + + + + +
+ From eaddc062d9f84929d121841dbffb137a1a2b50ba Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Thu, 10 Sep 2026 10:17:31 +0100 Subject: [PATCH 03/11] Add T-shirt size selection options --- Form-Controls/index.html | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index bdf5ce03e..bc01cb3d3 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -23,7 +23,7 @@

Product Pick

- +
T-Shirt Colour @@ -36,7 +36,22 @@

Product Pick

-
+ + +
+ + +
From 7814cbce8d00e609f949eb44050e85bd1badd863 Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Thu, 10 Sep 2026 10:24:01 +0100 Subject: [PATCH 04/11] Add basic page styling --- Form-Controls/style.css | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 Form-Controls/style.css diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..69715a40d --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,5 @@ +body { +font-family: Arial, sans-serif; +max-width: 340px; +margin: 40px auto; +} \ No newline at end of file From 7c44597faacfd946a440820e2e6315c511625022 Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Thu, 10 Sep 2026 10:27:10 +0100 Subject: [PATCH 05/11] Style form layout and inputs --- Form-Controls/style.css | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/Form-Controls/style.css b/Form-Controls/style.css index 69715a40d..18438dd5f 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -1,5 +1,21 @@ body { -font-family: Arial, sans-serif; -max-width: 340px; -margin: 40px auto; + font-family: Arial, sans-serif; + max-width: 340px; + margin: 40px auto; +} + +form { + display: flex; + flex-direction: column; + gap: 8px;background: #f5f5f5; + padding: 20px; + box-sizing: border-box; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20); + border-radius: 12px; +} + +input[type="text"], +input[type="email"] { + width: 270px; + } \ No newline at end of file From f7f3eb33e44f194f80bd9aa8fc11e82db994e67c Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Thu, 10 Sep 2026 10:37:27 +0100 Subject: [PATCH 06/11] Style fieldset inputs and button --- Form-Controls/style.css | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/Form-Controls/style.css b/Form-Controls/style.css index 18438dd5f..15fd43025 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -18,4 +18,31 @@ input[type="text"], input[type="email"] { width: 270px; +} + +fieldset { + width: 270px; + padding: 10px; + border-radius: 8px; +} + +input, +select { + padding: 10px; + margin-top: 5px; + +} + +button { + width: 120px; + padding: 10px; + border-radius: 6px; + display: block; + margin: 8px auto 0; + border:none; + background-color: rgb(44, 44, 247); + color: white; + cursor: pointer; + transition: background-color 0.3s ease; + } \ No newline at end of file From c60ef12f1cd41b9c4b2da75a574eb192d0a65a28 Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Thu, 10 Sep 2026 10:52:24 +0100 Subject: [PATCH 07/11] Add style a box sizing --- Form-Controls/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Form-Controls/style.css b/Form-Controls/style.css index 15fd43025..8138c1138 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + body { font-family: Arial, sans-serif; max-width: 340px; From 31548cf31bba7dca167bf221c0ee7db8d99cd4af Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Thu, 10 Sep 2026 10:55:19 +0100 Subject: [PATCH 08/11] style CSS is not displaying --- Form-Controls/style.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/Form-Controls/style.css b/Form-Controls/style.css index 8138c1138..b3e5c9ad2 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -25,7 +25,7 @@ input[type="email"] { } fieldset { - width: 270px; + width: 280px; padding: 10px; border-radius: 8px; } @@ -49,4 +49,9 @@ button { cursor: pointer; transition: background-color 0.3s ease; -} \ No newline at end of file +} + +button:hover { + background-color: rgb(65, 74, 206); + +} From 012d57738c7d18e5d65cf6e1ffcda1effbf75a9a Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Thu, 10 Sep 2026 11:05:43 +0100 Subject: [PATCH 09/11] Add box sizing to elements --- Form-Controls/index.html | 1 - Form-Controls/style.css | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index bc01cb3d3..f3a9228b6 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -57,7 +57,6 @@

Product Pick

-

By Frumentius-Rev

diff --git a/Form-Controls/style.css b/Form-Controls/style.css index b3e5c9ad2..75b8b8375 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -11,7 +11,8 @@ body { form { display: flex; flex-direction: column; - gap: 8px;background: #f5f5f5; + gap: 8px; + background: #f5f5f5; padding: 20px; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20); From 63c37cdcaade068c84dc2f1647e0460a28d06cf8 Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Thu, 10 Sep 2026 16:55:13 +0100 Subject: [PATCH 10/11] Increase input width --- Form-Controls/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Form-Controls/style.css b/Form-Controls/style.css index 75b8b8375..b7df663f4 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -21,7 +21,7 @@ form { input[type="text"], input[type="email"] { - width: 270px; + width: 280px; } From cc4da2cce4a4122c3d42cb0a5cd31cba983ac454 Mon Sep 17 00:00:00 2001 From: Frumentius-Rev Date: Mon, 14 Sep 2026 16:21:41 +0100 Subject: [PATCH 11/11] format form controls --- Form-Controls/README.md | 6 ++-- Form-Controls/index.html | 43 +++++++++++++++++----------- Form-Controls/style.css | 62 +++++++++++++++++++--------------------- 3 files changed, 59 insertions(+), 52 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index c356f8844..00b422c68 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -10,6 +10,7 @@ - [ ] Refactor using Devtools - [ ] Use version control by committing often and pushing regularly to GitHub - [ ] Develop the habit of writing clean, well-structured, and error-free code + ## Task @@ -29,7 +30,7 @@ All fields are required. Do not write a form action for this project. > [!TIP] -> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`. +> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`. > > Now you have the regular expression, it's up to you to figure out how to use it in the context of an HTML form! @@ -47,7 +48,7 @@ Let's write out our testable criteria. Check each one off as you complete it. - [ ] My form is semantic HTML. - [ ] All inputs have associated labels. - [ ] My Lighthouse Accessibility score is 100. -- [ ] I require a valid name. +- [ ] I require a valid name. - [ ] I require a valid email. - [ ] I require one colour from a defined set of 3 colours. - [ ] I require one size from a defined set of 6 sizes. @@ -65,6 +66,7 @@ They ensure your code is reliable, maintainable, and presents a polished, credib - [ ] I commit often and push regularly to GitHub ## Resources + - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms) - [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) - [Lighthouse](https://developers.google.com/web/tools/lighthouse) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index f3a9228b6..96c1821a5 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,4 +1,4 @@ - + @@ -6,7 +6,7 @@ My form exercise - +
@@ -16,43 +16,52 @@

Product Pick

- +
- +
- +
T-Shirt Colour - - - - - + + - - + + -
+ + +
- +
diff --git a/Form-Controls/style.css b/Form-Controls/style.css index b7df663f4..d866ad872 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -1,58 +1,54 @@ * { - box-sizing: border-box; + box-sizing: border-box; } body { - font-family: Arial, sans-serif; - max-width: 340px; - margin: 40px auto; + font-family: Arial, sans-serif; + max-width: 340px; + margin: 40px auto; } form { - display: flex; - flex-direction: column; - gap: 8px; - background: #f5f5f5; - padding: 20px; - box-sizing: border-box; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20); - border-radius: 12px; + display: flex; + flex-direction: column; + gap: 8px; + background: #f5f5f5; + padding: 20px; + box-sizing: border-box; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + border-radius: 12px; } input[type="text"], input[type="email"] { - width: 280px; - + width: 280px; } fieldset { - width: 280px; - padding: 10px; - border-radius: 8px; + width: 280px; + padding: 10px; + border-radius: 8px; } input, select { - padding: 10px; - margin-top: 5px; - + padding: 10px; + margin-top: 5px; } button { - width: 120px; - padding: 10px; - border-radius: 6px; - display: block; - margin: 8px auto 0; - border:none; - background-color: rgb(44, 44, 247); - color: white; - cursor: pointer; - transition: background-color 0.3s ease; - + width: 120px; + padding: 10px; + border-radius: 6px; + display: block; + margin: 8px auto 0; + border: none; + background-color: rgb(44, 44, 247); + color: white; + cursor: pointer; + transition: background-color 0.3s ease; } button:hover { - background-color: rgb(65, 74, 206); - + background-color: rgb(65, 74, 206); }