Skip to content

London | 26-ITP-May | Edina Kurdi | Sprint 1 | Form Controls #1273

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

London | 26-ITP-May | Edina Kurdi | Sprint 1 | Form Controls #1273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8988f0f
added my name
edinakurdi May 14, 2026
a43586c
Fieldset added for form structure
edinakurdi May 14, 2026
e44eb46
updated legend text from 'personal information' to ' personal details'
edinakurdi May 14, 2026
4245d68
Personal information fields such as name and email, added
edinakurdi May 14, 2026
ad79ec1
t-shirt information added
edinakurdi May 14, 2026
9d50e62
t-shirt info corrected
edinakurdi May 14, 2026
01f6026
submit and reset buttons added
edinakurdi May 15, 2026
2b020b8
added 'required' to name
edinakurdi May 15, 2026
21f4714
added disabled selected to the dropdowns
edinakurdi May 15, 2026
5955544
added css
edinakurdi May 15, 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
77 changes: 71 additions & 6 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<!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>
<link rel="stylesheet" href="style.css" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
Expand All @@ -13,15 +14,79 @@ <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-->
<!-- Fieldset added for form structure-->
<fieldset>
<legend>Personal Details</legend>
<!-- name field added -->
<div>
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
placeholder="Ada Lovelace"
title="Please enter your name"
pattern=".*\S.*\S.*"
required
/>
</div>

<!-- email field added -->
<div>
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="ada.lovelace@example.com"
title="Please enter a valid email"
pattern=".*\S.*@.*\S.*"
required
/>
</div>
</fieldset>


<fieldset>
<legend>T-shirt Information</legend>
<!-- T-shirt colour information added -->

<div>
<label for="colour">Colour:</label>

<select id="colour" name="colour" required>
<option value="" disabled selected>Select a colour</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="white">White</option>
</select>
</div>

<!-- T-shirt size information added -->
<div>
<label for="size">Size:</label>

<select id="size" name="size" required>
<option value="" disabled selected>Choose your 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>
</div>
</fieldset>
<!-- submit and reset added -->
<div class="buttons">
<button class="submit-btn" type="submit">Submit</button>
<button class="reset-btn" type="reset">Clear form</button>
</div>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Edina Kurdi - HOMEWORK SOLUTION</p>
</footer>
</body>
</html>
41 changes: 41 additions & 0 deletions Form-Controls/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
margin: 2rem;
}

form {
max-width: 400px;
margin: 0 auto;
}


div {
margin-bottom: 1rem;
}


label {
display: inline-block;
width: 120px;
}

button {
padding: 0.5rem 1rem;
border-radius: 5px;
}

.submit-btn {
background-color: #4CAF50;
}

.reset-btn{
background-color: #FFD8A8;
color: black;
}

.buttons{
text-align: center;
margin-top: 1.5rem;
}

Loading