From 57ce9076a989ed152a88813789b6628de1eaf6fe Mon Sep 17 00:00:00 2001 From: BrianY315 Date: Sun, 13 Sep 2026 15:00:09 +0100 Subject: [PATCH 1/9] Add basic html structure --- Form-Controls/task-Tshirts | 54 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 Form-Controls/task-Tshirts diff --git a/Form-Controls/task-Tshirts b/Form-Controls/task-Tshirts new file mode 100644 index 000000000..099d93767 --- /dev/null +++ b/Form-Controls/task-Tshirts @@ -0,0 +1,54 @@ + + + + + T‑Shirt Order Form + + \ No newline at end of file From 028d3524ec403b73d09cee3e78d933932ca5a49c Mon Sep 17 00:00:00 2001 From: BrianY315 Date: Sun, 13 Sep 2026 15:50:17 +0100 Subject: [PATCH 2/9] Add_form_fields --- Form-Controls/task-Tshirts | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/Form-Controls/task-Tshirts b/Form-Controls/task-Tshirts index 099d93767..e30428032 100644 --- a/Form-Controls/task-Tshirts +++ b/Form-Controls/task-Tshirts @@ -51,4 +51,22 @@ background: #555; } - \ No newline at end of file + + + +
+

Order Your T‑Shirt

+ + + + + Name must contain at least two non‑space characters. + + From 165edc5a49b414934794b034dc4dc9698e4b458f Mon Sep 17 00:00:00 2001 From: BrianY315 Date: Sun, 13 Sep 2026 16:10:57 +0100 Subject: [PATCH 3/9] Add email and colour label --- Form-Controls/task-Tshirts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/Form-Controls/task-Tshirts b/Form-Controls/task-Tshirts index e30428032..e38363f39 100644 --- a/Form-Controls/task-Tshirts +++ b/Form-Controls/task-Tshirts @@ -69,4 +69,21 @@ > Name must contain at least two non‑space characters. + + + + + + + From ccf909121b692a3875452fe92b37c0e723be6783 Mon Sep 17 00:00:00 2001 From: BrianY315 Date: Sun, 13 Sep 2026 16:22:56 +0100 Subject: [PATCH 4/9] add size options and submit button --- Form-Controls/task-Tshirts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/Form-Controls/task-Tshirts b/Form-Controls/task-Tshirts index e38363f39..62a85ab33 100644 --- a/Form-Controls/task-Tshirts +++ b/Form-Controls/task-Tshirts @@ -86,4 +86,20 @@ - + + + + + + + + + \ No newline at end of file From 4ec919d7972078ae3d5895932686eb9dbdcd29c8 Mon Sep 17 00:00:00 2001 From: BrianY315 Date: Fri, 18 Sep 2026 13:28:21 +0100 Subject: [PATCH 5/9] Add T-shirt order form and external stylesheet --- Form-Controls/index.html | 72 +++++++++++++++++--- Form-Controls/styles.css | 139 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 202 insertions(+), 9 deletions(-) create mode 100644 Form-Controls/styles.css diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..7e6dfc958 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,25 +3,79 @@ - My form exercise - + T-shirt Order Form + +

Product Pick

+
-
- - + +
+ + +
+ +
+ + +
+ +
+ Choose a colour +
+ + + + + +
+
+ +
+ + +
+ +
+
- -

By HOMEWORK SOLUTION

+

By Brian

diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css new file mode 100644 index 000000000..66fbd87ce --- /dev/null +++ b/Form-Controls/styles.css @@ -0,0 +1,139 @@ +* { + box-sizing: border-box; +} + +:root { + --bg: #f5f7fb; + --surface: #ffffff; + --border: #d9deea; + --text: #1a2433; + --muted: #475569; + --accent: #2d6cdf; + --accent-soft: #eaf1ff; + --shadow: rgba(15, 23, 42, 0.08); +} + +body { + margin: 0; + min-height: 100vh; + font-family: Arial, Helvetica, sans-serif; + background: linear-gradient(180deg, var(--bg), #edf3ff); + color: var(--text); +} + +header { + padding: 2rem 1rem 0; +} + +h1 { + text-align: center; + margin: 0; + font-size: clamp(2rem, 3vw, 3rem); +} + +main { + display: flex; + justify-content: center; + padding: 2rem 1rem 3rem; +} + +form { + width: min(100%, 620px); + background: var(--surface); + border: 1px solid var(--border); + border-radius: 16px; + box-shadow: 0 12px 30px var(--shadow); + padding: 2rem; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1.5rem; +} + +label { + font-weight: 700; + color: var(--text); +} + +input, +select, +button { + font: inherit; +} + +input[type='text'], +input[type='email'], +select { + width: 100%; + padding: 0.8rem 0.9rem; + border: 1px solid var(--border); + border-radius: 10px; + background: #fff; + color: var(--text); + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +input[type='text']:focus, +input[type='email']:focus, +select:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-soft); +} + +.radio-group { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 0.75rem; +} + +.option { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 0.9rem; + border: 1px solid var(--border); + border-radius: 10px; + background: #fafbff; +} + +.option input { + margin: 0; +} + +button { + width: 100%; + padding: 0.9rem 1.25rem; + border: none; + border-radius: 10px; + background: var(--accent); + color: #fff; + font-weight: 700; + cursor: pointer; + transition: background 0.2s ease, transform 0.2s ease; +} + +button:hover { + background: #1d57bc; + transform: translateY(-1px); +} + +button:focus-visible { + outline: 3px solid #a4c2ff; + outline-offset: 2px; +} + +footer { + text-align: center; + padding: 1rem; + color: var(--muted); +} + +@media (max-width: 480px) { + form { + padding: 1.25rem; + } +} From 5d2e6f6c29e25ce38b2076125943ec52556aeaba Mon Sep 17 00:00:00 2001 From: BrianY315 Date: Fri, 18 Sep 2026 13:31:11 +0100 Subject: [PATCH 6/9] Use consistent kebab-case form field names --- Form-Controls/index.html | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 7e6dfc958..deeffc1ab 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -16,10 +16,10 @@

Product Pick

- + Product Pick
- + @@ -40,26 +40,26 @@

Product Pick

Choose a colour
-
- - From a6075cd1ae303ff564a87e0620450897725ec44f Mon Sep 17 00:00:00 2001 From: BrianY315 Date: Fri, 18 Sep 2026 18:00:40 +0100 Subject: [PATCH 7/9] Remove duplicate form file --- Form-Controls/task-Tshirts | 105 ------------------------------------- 1 file changed, 105 deletions(-) delete mode 100644 Form-Controls/task-Tshirts diff --git a/Form-Controls/task-Tshirts b/Form-Controls/task-Tshirts deleted file mode 100644 index 62a85ab33..000000000 --- a/Form-Controls/task-Tshirts +++ /dev/null @@ -1,105 +0,0 @@ - - - - - T‑Shirt Order Form - - - - - -

Order Your T‑Shirt

- - - - - Name must contain at least two non‑space characters. - - - - - - - - - - - - - - - - - \ No newline at end of file From b4b6f2f179988964e9464898072e2e75dbea56c1 Mon Sep 17 00:00:00 2001 From: BrianY315 Date: Fri, 18 Sep 2026 18:05:06 +0100 Subject: [PATCH 8/9] Simplify form labels --- Form-Controls/index.html | 68 +++++++++++++++++++++------------------- 1 file changed, 36 insertions(+), 32 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index deeffc1ab..d41d48612 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -16,58 +16,62 @@

Product Pick

- - +
- - +
Choose a colour
-
- - +
From e6af81ec5abae2dd41f04ffc8a0b234aa5ebdcdd Mon Sep 17 00:00:00 2001 From: BrianY315 Date: Sat, 19 Sep 2026 05:53:07 +0100 Subject: [PATCH 9/9] Fix form label/input structure --- Form-Controls/index.html | 56 +++++++++++++++++++--------------------- 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index d41d48612..8f56d6862 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -16,27 +16,25 @@

Product Pick

- + +
- + +
@@ -60,18 +58,16 @@

Product Pick

- + +