diff --git a/Form-Controls/README.md b/Form-Controls/README.md index c356f8844..00b422c68 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -10,6 +10,7 @@ - [ ] 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 + ## Task @@ -29,7 +30,7 @@ All fields are required. Do not write a form action for this project. > [!TIP] -> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`. +> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`. > > Now you have the regular expression, it's up to you to figure out how to use it in the context of an HTML form! @@ -47,7 +48,7 @@ Let's write out our testable criteria. Check each one off as you complete it. - [ ] 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 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. @@ -65,6 +66,7 @@ They ensure your code is reliable, maintainable, and presents a polished, credib - [ ] I commit often and push regularly to GitHub ## Resources + - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms) - [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) - [Lighthouse](https://developers.google.com/web/tools/lighthouse) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..96c1821a5 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,4 +1,4 @@ - + @@ -6,6 +6,7 @@ My form exercise +
@@ -13,15 +14,59 @@

Product Pick

- - +
+ + +
+ +
+ + +
+ +
+ T-Shirt Colour + + + + + + + + + +
+ +
+ + +
+ +
diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..d866ad872 --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,54 @@ +* { + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + max-width: 340px; + margin: 40px auto; +} + +form { + display: flex; + flex-direction: column; + gap: 8px; + background: #f5f5f5; + padding: 20px; + box-sizing: border-box; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + border-radius: 12px; +} + +input[type="text"], +input[type="email"] { + width: 280px; +} + +fieldset { + width: 280px; + padding: 10px; + border-radius: 8px; +} + +input, +select { + padding: 10px; + margin-top: 5px; +} + +button { + width: 120px; + padding: 10px; + border-radius: 6px; + display: block; + margin: 8px auto 0; + border: none; + background-color: rgb(44, 44, 247); + color: white; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: rgb(65, 74, 206); +}