From 657c3d2057b23ccf57c5be43951be87367526292 Mon Sep 17 00:00:00 2001 From: lintsang Date: Thu, 21 May 2026 07:50:21 +0100 Subject: [PATCH 1/8] html form created --- Form-Controls/index.html | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..d75d64584 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,25 +3,24 @@ - My form exercise + Sprint 1 form controls exercise
-

Product Pick

+

Insert Your Name Below

- - + + +
From 17f876a7809e7944e38ace8feac939c936343cd7 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 06:30:16 +0100 Subject: [PATCH 2/8] delete js file for the task requirement --- Form-Controls/css/style.css | 3 +++ Form-Controls/index.html | 2 ++ 2 files changed, 5 insertions(+) create mode 100644 Form-Controls/css/style.css diff --git a/Form-Controls/css/style.css b/Form-Controls/css/style.css new file mode 100644 index 000000000..2f3b958b6 --- /dev/null +++ b/Form-Controls/css/style.css @@ -0,0 +1,3 @@ +h1{ + font-size: 1.5rem; +} \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index d75d64584..63e16c6de 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -6,6 +6,7 @@ Sprint 1 form controls exercise +
@@ -22,5 +23,6 @@

Insert Your Name Below

By Lin Tsang

+ From 196b343ba374c2f451ebb0d223fb5fedd6c308f8 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 06:56:22 +0100 Subject: [PATCH 3/8] added name and email in form --- Form-Controls/index.html | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 63e16c6de..69d3d615f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,20 +3,35 @@ - Sprint 1 form controls exercise + My Sprint 1 form controls exercise
-

Insert Your Name Below

+

Product Pick

- - - +
+ + Person name and email +
+ + +
+
+ + +
+ + + +
+
From 5da6e4f84ba3b86ea3c5c0fa61ce8f130cccadd4 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 07:05:48 +0100 Subject: [PATCH 4/8] added tshirt colour and size in form --- Form-Controls/index.html | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 69d3d615f..f157b909f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -25,8 +25,25 @@

Product Pick

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

By Lin Tsang

- From a67be9d2307d97e05317caa0bb1313af0c5433ae Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 07:49:47 +0100 Subject: [PATCH 7/8] added css style to form --- Form-Controls/css/style.css | 35 ++++++++++++++++++++++++++++++++++- Form-Controls/index.html | 4 ++-- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/Form-Controls/css/style.css b/Form-Controls/css/style.css index 2f3b958b6..febd7e2e6 100644 --- a/Form-Controls/css/style.css +++ b/Form-Controls/css/style.css @@ -1,3 +1,36 @@ h1{ + font-family: 'Times New Roman', Times, serif; font-size: 1.5rem; -} \ No newline at end of file +} +fieldset{ + background-color: #becce2; + border: 2px solid #c0cde0; + border-style: solid; + border-radius: 0.5em; + margin: 1em auto; + padding: 1em; + width: 40em; + max-width: 800px; +} + +legend{ + color: #222; + background-color: #f6f9ff; + font-size: 90%; + padding: 1em 2em; + border: solid 1px #becce2; + border-radius: 0.3em; + + +} +fieldset > div{ + padding: 0.5em 3em; + display: grid; + grid-template-columns: 2fr 4fr; +} +input, select, button{ + border: solid 1px #becce2; + padding: 4px; + font-size: 1em; + border-radius: 0.3em; +} diff --git a/Form-Controls/index.html b/Form-Controls/index.html index e4eafc31f..03d31986e 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -15,8 +15,8 @@

Product Pick

- - Person name and email + + Person name and email
From b1cdf63fdb567ee5f8ca1e780b148d5eea43d389 Mon Sep 17 00:00:00 2001 From: lintsang Date: Fri, 22 May 2026 08:57:10 +0100 Subject: [PATCH 8/8] checked all requirements fulfilled --- Form-Controls/README.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 86f623d89..9ffd4556d 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)