From d123b426875f9f6357a91ba60715eaa9cad22a06 Mon Sep 17 00:00:00 2001 From: Wing Ting Huang Date: Fri, 12 Jun 2026 18:07:46 +0100 Subject: [PATCH 1/2] Add form structure --- Form-Controls/index.html | 90 +++++++++++++++++++++++++++++----------- Form-Controls/style.css | 34 +++++++++++++++ 2 files changed, 100 insertions(+), 24 deletions(-) create mode 100644 Form-Controls/style.css diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..6a4a5c7f9 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,69 @@ - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - + + + + T-Shirt Order Form + + + + + + +
+

T-Shirt Order Form

+ +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..e1edbba1c --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,34 @@ +body { + font-family: Arial, sans-serif; + max-width: 600px; + margin: 40px auto; + padding: 20px; +} + +h1 { + text-align: center; +} + +form { + display: flex; + flex-direction: column; + gap: 16px; +} + +label { + display: block; + margin-bottom: 5px; + font-weight: bold; +} + +input, +select, +button { + width: 100%; + padding: 10px; + box-sizing: border-box; +} + +button { + cursor: pointer; +} From 8b784c21af469ce0a2bcb64a272a90b86b06f382 Mon Sep 17 00:00:00 2001 From: wing-huang Date: Fri, 12 Jun 2026 20:34:33 +0100 Subject: [PATCH 2/2] Add title attributes to form fields for better validation messages - Add title to Customer Name field explaining the 2-character requirement - Add title to Email field for clarity - Add title attributes to Colour and Size select fields - Improves UX by showing users what format is expected when validation fails Fixes feedback from cjyuan --- Form-Controls/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 6a4a5c7f9..73232c6bb 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -22,6 +22,7 @@

T-Shirt Order Form

id="name" name="name" pattern=".*\S.*\S.*" + title="Please enter at least 2 characters (name must contain at least 2 non-space characters)" required > @@ -33,6 +34,7 @@

T-Shirt Order Form

type="email" id="email" name="email" + title="Please enter a valid email address (e.g., name@example.com)" required > @@ -40,7 +42,7 @@

T-Shirt Order Form

- @@ -51,7 +53,7 @@

T-Shirt Order Form

-