diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 844572470..69d0453f5 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -28,7 +28,12 @@ Writing that out as a series of questions to ask yourself: All fields are required. Do not write a form action for this project. -## Acceptnce Criteria +> [!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.*`. +> +> 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! + +## Acceptance Criteria ### Developers must test their work. @@ -64,4 +69,4 @@ They ensure your code is reliable, maintainable, and presents a polished, credib - [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) - [Lighthouse](https://developers.google.com/web/tools/lighthouse) - [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [Format Code and Make Logical Commits in VS Code](../practical_guide.md) +- [Format Code and Make Logical Commits in VS Code](../practical_guide.md) \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..051c4e207 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,10 +1,11 @@ - - + + + My form exercise - + @@ -13,15 +14,57 @@

Product Pick

- - -
-
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + + +
+
+
+ + +
+
+ +
+ + diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..804d36cd2 --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,74 @@ +/* body style */ +input:valid{ + border:2px solid yellow; +} +input:invalid:not(:placeholder-shown){ + border:2px solid red; + } +body { + background-color: lightwhite; + max-width: 800px; + display: flex; + flex-direction: column; + align-items: center; + padding: 25px; +} + +header h1 { + color: #2c3e50; + margin-bottom: 15px; +} + +form { + background: skyblue; + padding: 30px; + border-radius: 8px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 400px; +} +input:focus { + border-color: #3498db; + outline: none; +} +/* Labels and Inputs */ +label { + display: block; + margin-top: 15px; + margin-bottom: 5px; + font-weight: 600; + font-size: 0.9rem; +} + +input[type="text"], +input[type="email"], +select,button { + align-items: right; + width: 100%; + padding: 10px; + border: 2px solid #ddd; + border-radius: 6px; + box-sizing: border-box; /* Ensures padding doesn't break width */ + transition: border-color 0.3s ease; +} + +.radio { + display: flex; + align-items: center; + gap: 5px; + font-weight: normal; +} +#submit { + background-color: #3498db; + margin-top: 15px; + border: none; + cursor: pointer; + font-size: 1rem; +} + +/* Footer */ +footer { + margin-top: 20px; + font-size: 0.8rem; + color:black; +} \ No newline at end of file