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

Closed
LesyaLyan wants to merge 9 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 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
6c3e68a
Checked each testable criteria
LesyaLyan May 25, 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.

@Luro91 Luro91 May 23, 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.

Why did this change?

@LesyaLyan LesyaLyan 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.

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

@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.

Why did the Readme change?

@LesyaLyan LesyaLyan May 25, 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.

Hi, I have updated Readme and written out the testable criteria. Checked each one off. I hope its all good :)
Thanks


### HTML

Expand Down
54 changes: 48 additions & 6 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,67 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<title>T-shirt Order Form</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>

<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>Product Pick</h1>
<h1>T-shirt Order Form</h1>
</header>
<main>
<form>

<hr>

@Luro91 Luro91 May 23, 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 formatting standard for HTML elements is to use indentation on children elements. This makes it easier to understand the structure. How can you ensure consistent formatting in your code automatically?

@LesyaLyan LesyaLyan 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.

HTML is formatted automatically now by using a code formatter :) I didn't have it installed on my VSCode.

@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.

Well done. You could configure it so that it automatically runs whenever you save the file

<label for="name">Full Name</label>
<input id="name" name="name" type="text" minlength="2" placeholder="First Name Surname" pattern="[A-Za-z ]{2,}" required>

@Luro91 Luro91 May 23, 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.

This prevents special characters like the German ä, ü, ö. How coul you allow them as well?

@LesyaLyan LesyaLyan 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've changed the name pattern using a Unicode letter class to allow special characters.


<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
this will also help you fill in your PR message later-->
</form>
</main>
</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

@Luro91 Luro91 May 23, 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.

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

@LesyaLyan LesyaLyan May 25, 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.

Thank you :)

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