Skip to content

London | 26-ITP-January | Karla Grajales | Sprint 2 | Form Controls #923

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Grajales-K wants to merge 25 commits into
base: main
Choose a base branch
from
+64 −23
Open

London | 26-ITP-January | Karla Grajales | Sprint 2 | Form Controls #923

Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
31b45e7
New branch done and title of the page in html
Grajales-K Jan 1, 2026
d4751b0
removed meta instruction unused
Grajales-K Jan 4, 2026
5c6194f
added
Grajales-K Jan 4, 2026
c26d36d
added:
Grajales-K Jan 4, 2026
2933319
added fieldset user details
Grajales-K Jan 4, 2026
f092d32
added fieldset for size
Grajales-K Jan 4, 2026
1e4d266
added fieldset date and button submit form
Grajales-K Jan 4, 2026
8d4e339
update description in the meta
Grajales-K Jan 4, 2026
bea249d
notes
Grajales-K Jan 4, 2026
bb8181e
added
Grajales-K Jan 4, 2026
a5df516
removed
Grajales-K Jan 5, 2026
76b259e
removed notes.md no required
Grajales-K Jan 5, 2026
cf383d6
removed file style.css because no style is required
Grajales-K Jan 5, 2026
6d1a7c3
removed
Grajales-K Jan 5, 2026
170708c
updated
Grajales-K Jan 5, 2026
f7ed400
updated the place holder in the user Name
Grajales-K Jan 5, 2026
6dc97e0
removed delivery pick date, no in the requiments
Grajales-K Jan 5, 2026
08583cd
cleaning some classes unused
Grajales-K Jan 5, 2026
b767b75
removed spaces
Grajales-K Jan 5, 2026
d43bed7
check accessibility 100%
Grajales-K Jan 5, 2026
adc5fc2
added a extra option selector
Grajales-K Jan 6, 2026
0883d82
fix: correct label casing for username input field
Grajales-K Jan 16, 2026
52aced1
fix: correct label for size option in form options
Grajales-K Jan 16, 2026
9a4b7bb
fix: the footer for better readability and SEO.
Grajales-K Jan 16, 2026
a7603e9
fix: correct label for XXL size option in form
Grajales-K Jan 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 64 additions & 23 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Retails Store Order Form</title>
<meta name="description" content="The form collects client details about their purchase, item characteristics." />
</head>

<body>
<header>
<h1>T-Shirt Order Form</h1>
</header>
<main>
<div class="box-form">
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<fieldset class="user-details">
<legend><strong>Customer Member Details</strong></legend>
<div class="form-control">
<label for="username">User Name</label>
<input type="text" id="username" name="username" placeholder="Username" minlength="2" required>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
</div>
</fieldset>
<fieldset class="form-color">
<legend><strong>Please select the color for your order:</strong></legend>
<ul>
<li>
<label for="red">Red</label>
<input type="radio" id="red" name="color" value="red" required />
</li>
<li>
<label for="yellow">Yellow</label>
<input type="radio" id="yellow" name="color" value="yellow" />
</li>
<li>
<label for="blue">Blue</label>
<input type="radio" id="blue" name="color" value="blue" />
</li>
</ul>
</fieldset>
<fieldset>
<legend><strong>Please select your size for your order:</strong></legend>
<label for="size-selection">size:</label>
<select name="size" id="size-selection" required>
<option value="" disabled selected>Size?</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</fieldset>
<button type="submit">Submit Order </button>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>
</html>
</div>
</main>
<footer>
<p>&copy; Karla Grajales</p>
</footer>
</body>
</html>