Skip to content

London | 26-ITP-May | Damilola Odumosu| Sprint 1 | Form Controls #1347

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
d-odumosu wants to merge 9 commits into
base: main
Choose a base branch
from
Open

London | 26-ITP-May | Damilola Odumosu| Sprint 1 | Form Controls #1347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
29f9281
feat:added firstname, lastname, email and shirt color.
d-odumosu May 13, 2026
694558f
feat: all form fields completed.
d-odumosu May 13, 2026
5388ad5
feat: new branch created.
d-odumosu May 16, 2026
f9c2505
Moved changes to correct branch
d-odumosu May 23, 2026
1382f1e
Moved changes to correct branch
d-odumosu May 23, 2026
6064caa
Moved changes to correct branch
d-odumosu May 23, 2026
f2de985
feat: fixed pattern attribute error in first and lastname.
d-odumosu May 24, 2026
824240b
feat: added a meta content describing the page to the head.
d-odumosu May 24, 2026
aa9ca4d
feat: added a main tag to improve accessibility.
d-odumosu May 24, 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
143 changes: 121 additions & 22 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html lang="en" xmlns:>
<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>
<form>
<!-- write your html here-->
<!--
<meta name="description" content="Product Pick form for selecting name, email, shirt color, and size."/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>


<form>
<!-- write your HTML here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
</footer>
</body>

<!-- first and lastname (ensure it contains at least two non-space characters.)-->
<!-- email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
<!-- shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
<!-- shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->


<div class="form-group">
<label for="firstname">First Name </label>
<input
type="text"
id="firstname"
name="firstname"
required
pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
title="enter a valid name">
</div>

<div class="form-group">
<label for="lastname">Last Name</label>
<input
type="text"
id="lastname"
name="lastname"
required
pattern="[A-Za-z]+(?:['\-][A-Za-z]+)*"
title="enter a valid name">
</div>

<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
required>

</div>

<div class="form-group">
<fieldset>
<legend>Choose a shirt color:</legend>
<div class="form-group-fieldset">
<input
type="radio"
id="choice1"
name="shirt"
value="blue"
required>
<label for="choice1">Blue</label>
</div>

<div class="form-group-fieldset">
<input
type="radio"
id="choice2"
name="shirt"
value="green"
>
<label for="choice2">Green</label>
</div>

<div class="form-group-fieldset">
<input
type="radio"
id="choice3"
name="shirt"
value="yellow"
>
<label for="choice3">Yellow</label>
</div>
</fieldset>
</div>

<div class="form-group">
<label for="sizing">Choose a size:</label>
<select id="sizing" name="size" required>
<option value="">--Please choose an option--</option>
<option value="ex-small">XS</option>
<option value="small">S</option>
<option value="medium">M</option>
<option value="large">L</option>
<option value="ex-large">XL</option>
<option value="ex-ex-large">XXL</option>

</select>
</div>
<button type="submit">Submit</button>
</form>
</main>

<footer>
<!-- change to your name-->
<p>By DAMILOLA ODUMOSU</p>
</footer>
</body>
</html>


56 changes: 56 additions & 0 deletions Form-Controls/main.css
View file
Open in desktop
Copy link
Copy Markdown

@Luro91 Luro91 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job that you separated the CSS into its own file—that’s an excellent best practice and will make your code much easier to read, debug, and maintain as it grows.

Copy link
Copy Markdown
Author

@d-odumosu d-odumosu May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also added a main tag and a meta content description to the head as recommended when i did the lighthouse testing.

Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
* {
box-sizing: border-box;
margin:0;
}
header, footer{
text-align:center;
}
h1{
font-size: 4rem;
font-weight: 900;
line-height: 1;
}
body{
font-family: "Lato", sans-serif;
font-size:18px;
background-color:#c1121f;
color:#fff;
line-height: 1.6;
}
form{
width: 50%;
background: #780000;
padding:45px;
margin: 100px auto;
border: 2px solid #9a031e;
border-radius:5px
}
.form-group{
margin-bottom:10px;
}
label {
text-transform: uppercase;
margin-right:10px;
}
input {
background: #fefae0;
color: #880d1e;
border: 2px solid #f26a8d;
border-radius: 10px;
padding: 0.5rem 1rem;
}

button{
cursor: pointer;
background-color:#e63946;
padding: 1em 1.5em;
border: 0;
border-radius: 16px;
}
p{
text-transform:lowercase;
font-family: "Pinyon Script", cursive;
font-weight: 400;
font-style: normal;
}