From f117fb3482b2e610485c95b2f0965ed718f48594 Mon Sep 17 00:00:00 2001 From: Ali Date: Wed, 1 Oct 2025 16:37:37 +0100 Subject: [PATCH 1/9] Create Index.html --- Index.html | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 Index.html diff --git a/Index.html b/Index.html new file mode 100644 index 000000000..c3680ec41 --- /dev/null +++ b/Index.html @@ -0,0 +1,61 @@ + + + + + + Form Controls Project + + + +
+

Registration Form

+
+ + + + + + + + + + + + + + + + + + + + + +
+ Preferred Contact Method: + + + +
+ + + + + + +
+
+ + + + From ca525c52a856b66ecb844dc451b507c5ab698051 Mon Sep 17 00:00:00 2001 From: Ali Date: Wed, 1 Oct 2025 16:38:09 +0100 Subject: [PATCH 2/9] Create Style.css --- Style.css | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 Style.css diff --git a/Style.css b/Style.css new file mode 100644 index 000000000..6c9fa9f85 --- /dev/null +++ b/Style.css @@ -0,0 +1,86 @@ +/* Reset */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background: #f4f4f4; + color: #333; +} + +/* Layout */ +main { + max-width: 500px; + margin: 2rem auto; + padding: 2rem; + background: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); +} + +/* Headings */ +h1 { + text-align: center; + margin-bottom: 1.5rem; +} + +/* Form controls */ +form { + display: flex; + flex-direction: column; +} + +label { + margin-top: 1rem; + font-weight: bold; +} + +input, select, button { + margin-top: 0.5rem; + padding: 0.6rem; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 1rem; +} + +/* Fieldset */ +fieldset { + margin-top: 1rem; + padding: 1rem; + border: 1px solid #ddd; + border-radius: 6px; +} + +legend { + font-weight: bold; +} + +/* Checkbox alignment */ +.checkbox { + display: flex; + align-items: center; + gap: 0.5rem; + margin-top: 1rem; +} + +/* Button */ +button { + margin-top: 1.5rem; + background: #0077cc; + color: white; + border: none; + cursor: pointer; + transition: 0.2s ease-in-out; +} + +button:hover { + background: #005fa3; +} + +/* Footer */ +footer { + text-align: center; + padding: 1rem; + margin-top: 2rem; + background: #222; + color: #fff; +} From c091077a14d6ad5f32b7ad74d814c0231b36af6f Mon Sep 17 00:00:00 2001 From: Ali Date: Thu, 2 Oct 2025 20:27:27 +0000 Subject: [PATCH 3/9] Refactored Form-Controls, Removed CSS --- Form-Controls/index.html | 101 +++++++++++++++++++++++++++++---------- 1 file changed, 77 insertions(+), 24 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..5fa2e8c75 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,80 @@ - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
-
- -

By HOMEWORK SOLUTION

-
- + + + + Form Controls Project + + +
+

Registration Form

+
+ + + + + + + + + + + + + + + + + + + + + +
+ Preferred Contact Method: + + + +
+ + +
+ Choose a Colour: + + + +
+ + + + + + + + + + +
+
+ +
+

Form Controls Project – Onboarding Module

+
+ From 20c2a28baccb28ff3d62a5ade06ff8180ce380c9 Mon Sep 17 00:00:00 2001 From: Ali Date: Fri, 3 Oct 2025 11:24:44 +0000 Subject: [PATCH 4/9] Remove Index.html and Style.css files --- Index.html | 61 -------------------------------------- Style.css | 86 ------------------------------------------------------ 2 files changed, 147 deletions(-) delete mode 100644 Index.html delete mode 100644 Style.css diff --git a/Index.html b/Index.html deleted file mode 100644 index c3680ec41..000000000 --- a/Index.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - Form Controls Project - - - -
-

Registration Form

-
- - - - - - - - - - - - - - - - - - - - - -
- Preferred Contact Method: - - - -
- - - - - - -
-
- -
-

Form Controls Project – Onboarding Module

-
- - diff --git a/Style.css b/Style.css deleted file mode 100644 index 6c9fa9f85..000000000 --- a/Style.css +++ /dev/null @@ -1,86 +0,0 @@ -/* Reset */ -body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - background: #f4f4f4; - color: #333; -} - -/* Layout */ -main { - max-width: 500px; - margin: 2rem auto; - padding: 2rem; - background: #fff; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0,0,0,0.1); -} - -/* Headings */ -h1 { - text-align: center; - margin-bottom: 1.5rem; -} - -/* Form controls */ -form { - display: flex; - flex-direction: column; -} - -label { - margin-top: 1rem; - font-weight: bold; -} - -input, select, button { - margin-top: 0.5rem; - padding: 0.6rem; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 1rem; -} - -/* Fieldset */ -fieldset { - margin-top: 1rem; - padding: 1rem; - border: 1px solid #ddd; - border-radius: 6px; -} - -legend { - font-weight: bold; -} - -/* Checkbox alignment */ -.checkbox { - display: flex; - align-items: center; - gap: 0.5rem; - margin-top: 1rem; -} - -/* Button */ -button { - margin-top: 1.5rem; - background: #0077cc; - color: white; - border: none; - cursor: pointer; - transition: 0.2s ease-in-out; -} - -button:hover { - background: #005fa3; -} - -/* Footer */ -footer { - text-align: center; - padding: 1rem; - margin-top: 2rem; - background: #222; - color: #fff; -} From 635d6ab1bf441e4ba44d8100f2103f1d90324ffe Mon Sep 17 00:00:00 2001 From: Ali Date: Fri, 3 Oct 2025 20:19:38 +0000 Subject: [PATCH 5/9] Refactor index.html for improved structure and accessibility --- Form-Controls/index.html | 161 ++++++++++++++++++++++----------------- 1 file changed, 93 insertions(+), 68 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 5fa2e8c75..ce3a8f68a 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,80 +1,105 @@ - - - - Form Controls Project - - -
-

Registration Form

-
- - - + + + + Form Controls Project + + +
+

Registration Form

+ + + + - - - + + + - - - + + + - - - + + + - - - + +
+ Preferred Contact Method: + + + +
- -
- Preferred Contact Method: - - - -
+ +
+ Choose a Colour: + + + +
- -
- Choose a Colour: - - - -
+ + + - - - + + - - + + + +
- - - -
- -
-

Form Controls Project – Onboarding Module

-
- +
+ +

By Muhammad Naru

+
+ From c2e82c327080b6865ecd8924b12a0f156c75e878 Mon Sep 17 00:00:00 2001 From: Ali Date: Fri, 3 Oct 2025 23:20:15 +0000 Subject: [PATCH 6/9] Update form title and Removed checkbox to meet criteria --- Form-Controls/index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index ce3a8f68a..91f3c8c03 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -7,7 +7,7 @@
-

Registration Form

+

Order Form

@@ -34,20 +34,20 @@

Registration Form

title="Please enter a valid email address (e.g. user@example.com)" /> - + - - + - +
@@ -89,7 +89,7 @@

Registration Form

From 9fee712018e6d63dfeaaf5dd70e79aa13a31de8f Mon Sep 17 00:00:00 2001 From: Ali Date: Fri, 3 Oct 2025 23:25:13 +0000 Subject: [PATCH 7/9] Refactor form layout and improve accessibility by adding styles and removing unused fields --- Form-Controls/index.html | 62 +++++++++++++--------------------------- 1 file changed, 20 insertions(+), 42 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 91f3c8c03..4c9680d6d 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -20,6 +20,7 @@

Order Form

pattern="^[A-Za-z\s'-]{2,}$" placeholder="Enter your full name" title="Name must be at least 2 letters and contain only letters, spaces, apostrophes, or hyphens." + style="margin-bottom: 16px; display: block;" /> @@ -32,51 +33,29 @@

Order Form

placeholder="example@email.com" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" title="Please enter a valid email address (e.g. user@example.com)" + style="margin-bottom: 16px; display: block;" /> - - - - - - -
+
Choose a Colour: - - - + + +
- @@ -87,19 +66,18 @@

Order Form

-
-

By Muhammad Naru

- + \ No newline at end of file From 1ed502d225570a09e73cb342614272e21d593a44 Mon Sep 17 00:00:00 2001 From: Ali Date: Sat, 4 Oct 2025 10:29:46 +0000 Subject: [PATCH 8/9] Removed Checkbox --- Form-Controls/index.html | 133 ++++++++++++++++++--------------------- 1 file changed, 60 insertions(+), 73 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4c9680d6d..50bff70ac 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,83 +1,70 @@ - - - - Form Controls Project - - -
-

Order Form

-
- - - - - - + + + + Form Controls Project + - -
- Choose a Colour: - - - -
+ +
+

Order Form

+ + + + - - - + + + - -
- - - -
+
+

By Muhammad Naru

+
+ -
-

By Muhammad Naru

-
- \ No newline at end of file From d39194b7aacd012e9511f3c8cdf57de5c461017c Mon Sep 17 00:00:00 2001 From: Ali Date: Sat, 4 Oct 2025 16:58:06 +0000 Subject: [PATCH 9/9] Refactor form elements for improved layout and accessibility --- Form-Controls/index.html | 50 ++++++++++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 17 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 50bff70ac..c021592d1 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,41 +13,57 @@

Order Form

- + /> +

- + /> +

-
+
Choose a Colour: -
+
+

- @@ -56,12 +72,12 @@

Order Form

+

- + -