From 1e75e1989dbcb140d76b7b5f532505d108fba9e9 Mon Sep 17 00:00:00 2001 From: Alina Sofragiu Date: Fri, 15 May 2026 22:15:23 +0100 Subject: [PATCH 1/4] form --- Form-Controls/index.html | 76 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 69 insertions(+), 7 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..632cf68ba 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,8 +3,8 @@ - My form exercise - + T-Shirt Order Form + @@ -13,15 +13,77 @@

Product Pick

- - + +
+ + +
+ + +
+ + +
+ + +
+ Choose a colour + + + + + + + +
+ + +
+ + +
+ + +
+ +
+
From 96a0f0908622dc2982733ac08ca4650b17c0289e Mon Sep 17 00:00:00 2001 From: Alina Sofragiu Date: Sat, 16 May 2026 17:48:54 +0100 Subject: [PATCH 2/4] style css --- Form-Controls/index.html | 2 + Form-Controls/style.css | 99 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 101 insertions(+) create mode 100644 Form-Controls/style.css diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 632cf68ba..82148f4ee 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -6,6 +6,8 @@ T-Shirt Order Form + +
diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..1ed028a9f --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,99 @@ +/* Reset some default styles */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; +} + +/* Page layout */ +body { + background-color: #f7f7f7; + color: #333; + line-height: 1.5; + padding: 20px; +} + +/* Center content */ +main { + max-width: 500px; + margin: 40px auto; + background: #ffffff; + padding: 25px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +/* Header */ +header h1 { + text-align: center; + margin-bottom: 20px; + font-weight: 500; +} + +/* Form spacing */ +form div, +fieldset { + margin-bottom: 15px; +} + +/* Labels */ +label { + display: block; + margin-bottom: 5px; + font-size: 0.9rem; +} + +/* Inputs and select */ +input, +select { + width: 100%; + padding: 8px 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 0.95rem; +} + +/* Radio buttons inline */ +fieldset label { + display: inline-flex; + align-items: center; + margin-right: 15px; + font-size: 0.9rem; +} + +fieldset input { + margin-right: 5px; +} + +/* Fieldset styling */ +fieldset { + border: 1px solid #ddd; + padding: 10px; + border-radius: 5px; +} + +/* Button */ +button { + width: 100%; + padding: 10px; + border: none; + background-color: #333; + color: #fff; + font-size: 1rem; + border-radius: 5px; + cursor: pointer; +} + +/* Button hover */ +button:hover { + background-color: #555; +} + +/* Footer */ +footer { + text-align: center; + margin-top: 20px; + font-size: 0.8rem; + color: #777; +} \ No newline at end of file From c12a6034567ec0c5f39b97a8554743e713bb23ef Mon Sep 17 00:00:00 2001 From: Alina Sofragiu Date: Sat, 16 May 2026 18:04:26 +0100 Subject: [PATCH 3/4] name value --- Form-Controls/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 82148f4ee..b41d6136a 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -22,7 +22,7 @@

Product Pick

type="text" id="name" name="name" - value="Alina Sofragiu" + value="" required minlength="2" pattern=".*\S.*\S.*" @@ -36,7 +36,7 @@

Product Pick

type="email" id="email" name="email" - value="sofragiualina@gmail.com" + value="" required /> From 6dc9a8dd14fe0616f8b26c54765df9e1909861da Mon Sep 17 00:00:00 2001 From: Alina Sofragiu Date: Sat, 16 May 2026 18:50:35 +0100 Subject: [PATCH 4/4] Accessibility --- Form-Controls/style.css | 106 ++++++++++++++++++++++++---------------- 1 file changed, 63 insertions(+), 43 deletions(-) diff --git a/Form-Controls/style.css b/Form-Controls/style.css index 1ed028a9f..ec55ae642 100644 --- a/Form-Controls/style.css +++ b/Form-Controls/style.css @@ -1,4 +1,4 @@ -/* Reset some default styles */ +/* RESET */ * { box-sizing: border-box; margin: 0; @@ -6,94 +6,114 @@ font-family: Arial, Helvetica, sans-serif; } -/* Page layout */ +/* PAGE */ body { background-color: #f7f7f7; - color: #333; + color: #333; /* high contrast for accessibility */ line-height: 1.5; padding: 20px; } -/* Center content */ -main { - max-width: 500px; - margin: 40px auto; - background: #ffffff; - padding: 25px; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); -} - -/* Header */ +/* HEADER */ header h1 { text-align: center; - margin-bottom: 20px; font-weight: 500; + margin-bottom: 20px; } -/* Form spacing */ +/* MAIN CONTAINER */ +main { + max-width: 520px; + margin: 40px auto; + background: #fff; + padding: 25px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); +} + +/* FORM ELEMENT SPACING */ form div, fieldset { - margin-bottom: 15px; + margin-bottom: 16px; } -/* Labels */ +/* LABELS */ label { display: block; - margin-bottom: 5px; - font-size: 0.9rem; + margin-bottom: 6px; + font-size: 0.95rem; + color: #333; } -/* Inputs and select */ +/* INPUT + SELECT */ input, select { width: 100%; - padding: 8px 10px; - border: 1px solid #ccc; - border-radius: 5px; - font-size: 0.95rem; + padding: 10px; + border: 1px solid #bbb; + border-radius: 6px; + font-size: 1rem; + background: #fff; + color: #333; } -/* Radio buttons inline */ +/* FOCUS STATES (IMPORTANT FOR ACCESSIBILITY SCORE 100) */ +input:focus, +select:focus { + outline: 3px solid #000; + outline-offset: 2px; +} + +/* FIELDSET */ +fieldset { + border: 1px solid #ddd; + border-radius: 6px; + padding: 10px; +} + +/* LEGEND */ +legend { + padding: 0 6px; + font-weight: 500; +} + +/* RADIO OPTIONS */ fieldset label { display: inline-flex; align-items: center; margin-right: 15px; - font-size: 0.9rem; + font-size: 0.95rem; + cursor: pointer; } fieldset input { - margin-right: 5px; + margin-right: 6px; } -/* Fieldset styling */ -fieldset { - border: 1px solid #ddd; - padding: 10px; - border-radius: 5px; -} - -/* Button */ +/* BUTTON */ button { width: 100%; - padding: 10px; + padding: 12px; border: none; + border-radius: 6px; background-color: #333; color: #fff; font-size: 1rem; - border-radius: 5px; cursor: pointer; } -/* Button hover */ -button:hover { +/* BUTTON HOVER + FOCUS */ +button:hover, +button:focus { background-color: #555; + outline: 3px solid #000; + outline-offset: 2px; } -/* Footer */ +/* FOOTER */ footer { text-align: center; margin-top: 20px; - font-size: 0.8rem; - color: #777; + font-size: 0.85rem; + color: #444; /* improved contrast */ } \ No newline at end of file