From 9a540703ce97d0903290962bdbe0e7539bf8dddd Mon Sep 17 00:00:00 2001 From: burhan-mustafa Date: Fri, 15 May 2026 14:53:18 +0100 Subject: [PATCH 1/5] Added a form based on README requirements created style sheet to centre the form --- Form-Controls/README.md | 2 +- Form-Controls/index.html | 53 ++++++++++++++++++++++++++++++++++++---- Form-Controls/style.css | 35 ++++++++++++++++++++++++++ 3 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 Form-Controls/style.css diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 86f623d89..112ccbd38 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -25,7 +25,7 @@ Writing that out as a series of questions to ask yourself: 3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? 4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -All fields are required. +All fields are required. Do not write a form action for this project. ## Acceptance Criteria diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..3f636cdaa 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,70 @@ + My form exercise + + +

Product Pick

-
+ + - + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+ + diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..ee6f015d8 --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,35 @@ + +.form-container{ + display: flex; + flex-direction: column; + border-style:solid; + padding: 10px; + max-width:170px; + margin:auto; +} + +.form-container input{ + width:100%; + max-width: 150px; + box-sizing: border-box; + margin-left:auto; + margin-right:auto; +} + +.form-container select, +.form-container button{ + max-width:150px; + width: 100%; + box-sizing: border-box; + margin-left:auto; + margin-right:auto; +} + +h1{ + text-align: center; +} + +footer{ + text-align: center; +} + From 893270cc50a7535ffab6eb408f728949a858d0b4 Mon Sep 17 00:00:00 2001 From: burhan-mustafa Date: Fri, 15 May 2026 21:00:33 +0100 Subject: [PATCH 2/5] added the appropriate for id and name tags --- Form-Controls/index.html | 20 ++++++++++---------- Form-Controls/style.css | 13 ++++++++----- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 3f636cdaa..908aaa447 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -25,28 +25,28 @@

Product Pick

3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? 4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL--> - - + +
- - + +
- - + +
- -
- - diff --git a/Form-Controls/style.css b/Form-Controls/style.css index ee6f015d8..18066220b 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -4,13 +4,16 @@ flex-direction: column; border-style:solid; padding: 10px; - max-width:170px; + max-width:400px; margin:auto; + font-size: 28px; } -.form-container input{ +.form-container input, +.form-container option{ + font-size: 24px; width:100%; - max-width: 150px; + max-width: 325px; box-sizing: border-box; margin-left:auto; margin-right:auto; @@ -18,11 +21,12 @@ .form-container select, .form-container button{ - max-width:150px; + max-width:325px; width: 100%; box-sizing: border-box; margin-left:auto; margin-right:auto; + font-size: 24px; } h1{ @@ -32,4 +36,3 @@ h1{ footer{ text-align: center; } - From d1fb3c679716202bd8a6a36dabf750f448b3b7fb Mon Sep 17 00:00:00 2001 From: burhan-mustafa Date: Fri, 15 May 2026 21:14:53 +0100 Subject: [PATCH 3/5] added comments to my code for the html and css --- Form-Controls/index.html | 15 ++++++++------- Form-Controls/style.css | 3 +++ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 908aaa447..5fe84054f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -19,24 +19,24 @@

Product Pick

- - + + +
+
+
+
+
+
-

By Muhammad-Burhan Mustafa

diff --git a/Form-Controls/style.css b/Form-Controls/style.css index 18066220b..c2731978d 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -1,3 +1,4 @@ +/* Creates a container for the form that is also centered*/ .form-container{ display: flex; @@ -9,6 +10,7 @@ font-size: 28px; } +/* Ensures that inputs and options are standard size and centered*/ .form-container input, .form-container option{ font-size: 24px; @@ -19,6 +21,7 @@ margin-right:auto; } +/* Ensures that select and buttons are a standard size and centered*/ .form-container select, .form-container button{ max-width:325px; From 9ace722445a0e7190b749d66a2fb9e7c6dd0c989 Mon Sep 17 00:00:00 2001 From: burhan-mustafa Date: Fri, 15 May 2026 21:46:22 +0100 Subject: [PATCH 4/5] fixed no empty option element for tshirt colour and size also fixed the space for minlength on line 31 --- Form-Controls/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 5fe84054f..239559963 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -28,7 +28,7 @@

Product Pick

- +
@@ -39,6 +39,7 @@

Product Pick

+ From 27c1bd33b04fded31368a559f16a28df982fbc24 Mon Sep 17 00:00:00 2001 From: burhan-mustafa Date: Fri, 15 May 2026 22:54:10 +0100 Subject: [PATCH 5/5] added value attributes and a non selectable option for both select elements --- Form-Controls/index.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 239559963..38ce25b4d 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -39,23 +39,23 @@

Product Pick