Skip to content

Manchester | 26-ITP-May | Yee Man Tsang | Sprint 1 | Form Controls #1390

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
lintsang wants to merge 11 commits into
base: main
Choose a base branch
from
+75 −5
Open

Manchester | 26-ITP-May | Yee Man Tsang | Sprint 1 | Form Controls #1390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
657c3d2
html form created
May 21, 2026
17f876a
delete js file for the task requirement
May 22, 2026
196b343
added name and email in form
May 22, 2026
5da6e4f
added tshirt colour and size in form
May 22, 2026
6e51f8e
correct wrong form elements
May 22, 2026
462ce6b
delete js src file line in html
May 22, 2026
a67be9d
added css style to form
May 22, 2026
b1cdf63
checked all requirements fulfilled
May 22, 2026
a226c31
Unchecked list in readme.md
Jun 1, 2026
626217a
Enhance code cleanliness by adding breathing line and removing unnece…
Jun 1, 2026
93a9337
update the tidiness of html code
Jun 1, 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
37 changes: 37 additions & 0 deletions Form-Controls/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
h1{
font-family: 'Times New Roman', Times, serif;
font-size: 1.5rem;
}
Copy link
Copy Markdown

@akeren akeren Jun 1, 2026

Choose a reason for hiding this comment

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

@lintsang, please provide a breathing line after each element as you've done for the others like fieldset and legend.


fieldset{
background-color: #becce2;
border: 2px solid #c0cde0;
border-style: solid;
border-radius: 0.5em;
margin: 1em auto;
padding: 1em;
width: 40em;
max-width: 800px;
}

legend{
color: #222;
background-color: #f6f9ff;
font-size: 90%;
padding: 1em 2em;
border: solid 1px #becce2;
border-radius: 0.3em;
}
Copy link
Copy Markdown

@akeren akeren Jun 1, 2026

Choose a reason for hiding this comment

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

@lintsang, the same breathing space should apply to closing the legend element before starting the next target element.


fieldset > div{
padding: 0.5em 3em;
display: grid;
grid-template-columns: 2fr 4fr;
}
Copy link
Copy Markdown

@akeren akeren Jun 1, 2026

Choose a reason for hiding this comment

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

@lintsang the breathing space after the closing of the element before starting input.

Copy link
Copy Markdown
Author

@lintsang lintsang Jun 1, 2026

Choose a reason for hiding this comment

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

I have learnt about the importance of cleanliness and tidiness of css coding. Many thanks!


input, select, button{
border: solid 1px #becce2;
padding: 4px;
font-size: 1em;
border-radius: 0.3em;
}
43 changes: 38 additions & 5 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,58 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<title>My Sprint 1 form controls exercise</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/style.css">
Copy link
Copy Markdown

@akeren akeren Jun 1, 2026

Choose a reason for hiding this comment

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

Learning note: This stylesheet link is valid in modern HTML5 without type="text/css" because browsers infer the file type from rel="stylesheet". However, you may also see the fuller version:

<link rel="stylesheet" type="text/css" href="css/style.css">

The type="text/css" part explicitly says the linked file is CSS. It is not required in modern HTML, but it is useful to understand what it means.

Copy link
Copy Markdown
Author

@lintsang lintsang Jun 1, 2026

Choose a reason for hiding this comment

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

Thanks for teaching me this!

</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
Comment on lines 12 to 14
Copy link
Copy Markdown

@akeren akeren Jun 3, 2026

Choose a reason for hiding this comment

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

@lintsang, when you compare the header with the main form section, does the alignment look intentional? What CSS change might help align them?

<main>
<form>
<!-- write your html here-->
<fieldset>
<legend>Person name and email</legend>
<div class="form-group">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" required minlength="2">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" required pattern="^.+@.+\..+$">
</div>
<div class="form-group">
<label for="colour-pick">Choose T-shirt Colour:</label>
<select id="colour-pick">
<option value="white">White</option>
<option value="black">Black</option>
<option value="grey">Grey</option>
</select>
</div>
<div class="form-group">
<label for="size-pick">Choose T-shisrt Size</label>
<select id="size-pick">
<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>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</fieldset>
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
Create a form that can collect
name, email, preferred tshirt colour and size from user-->
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Lin Tsang</p>
</footer>
Comment on lines 55 to 58
Copy link
Copy Markdown

@akeren akeren Jun 3, 2026

Choose a reason for hiding this comment

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

@lintsang, take a look at the footer position in the rendered UI. Where should it sit relative to the rest of the page, and what styling might need to change?

</body>
</html>
Loading