From cf2c233eef541472f469cffc592afd7b33b6c4b0 Mon Sep 17 00:00:00 2001 From: Giontr Date: Sun, 10 May 2026 23:10:24 +0100 Subject: [PATCH 1/3] Fixing styling for accessibility --- Form-Controls/index.html | 63 ++++++++++++++++++++++++++++++++++++---- Form-Controls/style.css | 11 +++++++ 2 files changed, 68 insertions(+), 6 deletions(-) create mode 100644 Form-Controls/style.css diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..54a32b551 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,25 +3,76 @@ - My form exercise + T-shirt sales +
-

Product Pick

+

Welcome to T-shirt Sales

- +

Verify your order

+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+
diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..b164574d2 --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,11 @@ +input[type="radio"] { + margin: 0 5px; + width: 18px; + height: 18px; +} +#sizeBox { + display: flex; + flex-direction: column; + margin-bottom: 20px; + border: 1px solid #a7a7a7; +} \ No newline at end of file From 2cbff6df64923b7c5a022832dc464edaa3f8a498 Mon Sep 17 00:00:00 2001 From: Giontr Date: Mon, 11 May 2026 08:21:42 +0100 Subject: [PATCH 2/3] gave margin to form and fixed radio buttons --- Form-Controls/index.html | 10 +++++----- Form-Controls/style.css | 25 ++++++++++++++++++------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 54a32b551..be84576f6 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -45,23 +45,23 @@

Verify your order

- +
- +
- +
- +
- +
diff --git a/Form-Controls/style.css b/Form-Controls/style.css index b164574d2..053642adf 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -1,11 +1,22 @@ +form > div { + margin-bottom: 10px; +} + input[type="radio"] { - margin: 0 5px; - width: 18px; - height: 18px; + width: 20px; + height: 20px; + margin: 0 10px 0 0; + cursor: pointer; + flex-shrink: 0; } -#sizeBox { +#sizeBox > div { + padding: 8px 12px; + min-height: 5px; display: flex; - flex-direction: column; - margin-bottom: 20px; - border: 1px solid #a7a7a7; + align-items: center; +} + +#sizeBox label { + cursor: pointer; + padding: 4px 0; } \ No newline at end of file From 01c70a5002f50d1af6e846aab3413516d96a8ecc Mon Sep 17 00:00:00 2001 From: Giontr Date: Mon, 11 May 2026 08:54:42 +0100 Subject: [PATCH 3/3] fix radio group. Replace label with fieldset/legent & change readme --- Form-Controls/README.md | 38 +++++++++++++++++++------------------- Form-Controls/index.html | 25 +++++++++++++------------ 2 files changed, 32 insertions(+), 31 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 844572470..087f6e312 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -4,12 +4,12 @@ -- [ ] Interpret requirements and check against a list of criteria -- [ ] Write a valid form -- [ ] Test with Devtools -- [ ] 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 +- [x] Interpret requirements and check against a list of criteria +- [x] Write a valid form +- [x] Test with Devtools +- [x] Refactor using Devtools +- [x] Use version control by committing often and pushing regularly to GitHub +- [x] Develop the habit of writing clean, well-structured, and error-free code ## Task @@ -34,18 +34,18 @@ Do not write a form action for this project. Let's write out our testable criteria. Check each one off as you complete it. -- [ ] I have only used HTML and CSS. -- [ ] I have not used any JavaScript. +- [x] I have only used HTML and CSS. +- [x] I have not used any JavaScript. ### HTML -- [ ] 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 email. -- [ ] I require one colour from a defined set of 3 colours. -- [ ] I require one size from a defined set of 6 sizes. +- [x] My form is semantic HTML. +- [x] All inputs have associated labels. +- [x] My Lighthouse Accessibility score is 100. +- [x] I require a valid name. +- [x] I require a valid email. +- [x] I require one colour from a defined set of 3 colours. +- [x] I require one size from a defined set of 6 sizes. ### Developers must adhere to professional standards. @@ -54,10 +54,10 @@ Let's write out our testable criteria. Check each one off as you complete it. These practices reflect the level of quality expected in professional work. They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [ ] My code is consistently formatted -- [ ] My page content is free of typos and grammatical mistakes -- [ ] I commit often and push regularly to GitHub +- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [x] My code is consistently formatted +- [x] My page content is free of typos and grammatical mistakes +- [x] I commit often and push regularly to GitHub ## Resources - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index be84576f6..453803e25 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -41,33 +41,34 @@

Verify your order

- - -
+
+ T-shirt size: +
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
+
+
-