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

Closed
d-odumosu wants to merge 12 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 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
7040611
feat: fixed the pattern attribute to be unicode aware.
d-odumosu Jun 2, 2026
719da41
Feat: removed trailing slashes on meta tags
d-odumosu Jun 6, 2026
7e143ef
Feat: fixed the pattern to require two or more characters
d-odumosu Jun 8, 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
142 changes: 119 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,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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-->
<!--
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>
<meta name="description" content=""/>
<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>

<form>
<!-- write your HTML here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->

<!-- 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\s'-]{2,}$"

@Luro91 Luro91 May 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Good job on the indentation. This makes the code easier to read.

title="first name must be more than 2 characters">
</div>

<div class="form-group">
<label for="lastname">Last Name</label>
<input
type="text"
id="lastname"
name="lastname"
required
pattern="^[A-Za-z\s'-]{2,}$"

@Luro91 Luro91 May 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The browser console shows an error here when I fill out the form

index.html?firstname=%C3%A4%C3%A4&lastname=%C3%A4%C3%A4&email=dada%40test.com&shirt=blue&size=small:1 Pattern attribute value ^[A-Za-z\s'-]{2,}$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^[A-Za-z\s'-]{2,}$/v: Invalid character in character class

@d-odumosu d-odumosu May 24, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I have now fixed the pattern error

title="last name must be more than 2 characters">
</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>

<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
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;
}

Loading