Skip to content

Birmingham|26-ITP-May|LesyaLyaisyan|Sprint 1|Form-Controls #1335

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
LesyaLyan wants to merge 8 commits into
base: main
Choose a base branch
from
+113 −10
Open

Birmingham|26-ITP-May|LesyaLyaisyan|Sprint 1|Form-Controls #1335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a25133d
Form control in process and added css file
LesyaLyan May 19, 2026
72fe93e
Changed colour/size option method and added email pattern
LesyaLyan May 20, 2026
bdc3f78
Added name
LesyaLyan May 20, 2026
181ea79
Name pattern added
LesyaLyan May 20, 2026
80fdcba
Added requirements and changed tags <div> to <section>
LesyaLyan May 21, 2026
0340109
Removed <section> added <hr>
LesyaLyan May 21, 2026
bd5adb3
Completed CSS
LesyaLyan May 22, 2026
7905e6f
Added Meta, changed name pattern and formated
LesyaLyan 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
4 changes: 2 additions & 2 deletions Form-Controls/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ Do not write a form action for this project.

Let's write out our testable criteria. Check each one off as you complete it.

- [ ] I have only used HTML and CSS.
- [ ] I have not used any JavaScript.
- [] I have only used HTML and CSS.
- [] I have not used any JavaScript.
Comment on lines +37 to +38
Copy link
Copy Markdown

@Luro91 Luro91 May 23, 2026

Choose a reason for hiding this comment

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

Why did this change?

Copy link
Copy Markdown
Author

@LesyaLyan LesyaLyan May 24, 2026

Choose a reason for hiding this comment

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

Meta description has been added, now SEO is 100 :) all the changes are in a commit. Thanks

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.

Why did the Readme change?


### HTML

Expand Down
74 changes: 66 additions & 8 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,76 @@
<!DOCTYPE html>
<!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="" />
<title>T-shirt Order Form</title>
<meta
name="description"
content="T-shirt order form for customers to place orders"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<form method="get" class="container">
<!-- Requirements:
- What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
- What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
- What colour should this T-shirt be? I must provide 3 options and to ensure they do not choose other colours.
- What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL and to ensure they do not choose other sizes.
-->
<header>
<h1>T-shirt Order Form</h1>
</header>

<hr />
<label for="name">Full Name</label>
<input
id="name"
name="name"
type="text"
minlength="2"
placeholder="First Name Surname"
pattern="[\p{L} ]{2,}"
required
/>

<hr />
<label for="email">Email</label>
<input
id="email"
name="email"
type="email"
pattern="[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$"
placeholder="Your email"
required
/>

<hr />
<label for="colour">T-shirt Colour:</label>
<select name="colour" id="colour" required>
<option value="">Choose a Colour</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
</select>

<hr />
<label for="Size">T-shirt Size:</label>
<select name="size" id="Size" required>
<option value="">Choose a 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>

<hr />
<button type="submit">Submit</button>

<!-- write your html here-->
<!--
try writing out the requirements first as comments
Expand All @@ -21,7 +79,7 @@ <h1>Product Pick</h1>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Lesya Lyaisyan</p>
</footer>
</body>
</html>
45 changes: 45 additions & 0 deletions Form-Controls/style.css
View file
Open in desktop
Copy link
Copy Markdown

@Luro91 Luro91 May 23, 2026

Choose a reason for hiding this comment

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

NIce that you moved the styling into a seperate file. It helps keeping the responsibilites of the code clear

Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-style:solid;
border-width: 5px;
border-color:black;
padding: 5px;
margin: auto;
margin-top: 50px;
max-width: 400px;
border-radius: 20px;
font-size: 25px;
}
h1 {
text-align: center;
margin-bottom: 1px;
}
.label {
display: block;
font-weight: bold;
font-size: 10px;
padding-bottom: 25px;
}
input, select {
display: block;
font-size: 15px;
padding: 0.5em;
width: 100%;
max-width: 300px;
}
button {
display: block;
font-size: 15px;
padding: 0.5em;
width: 50%;
max-width: 300px;
margin: 20px;
background-color: rgb(105, 105, 226);
border-radius: 10px;
}
footer{
text-align: center;
}
Loading