Skip to content

London | 26-ITP-May | Daniel Mears | Sprint 1 | Form Controls #1261

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
djmears-dev wants to merge 4 commits into
base: main
Choose a base branch
from
+170 −11
Open

London | 26-ITP-May | Daniel Mears | Sprint 1 | Form Controls #1261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cd4c17b
form attempt 1
djmears-dev May 13, 2026
40b77e4
added css and linked it to my html page
djmears-dev May 13, 2026
7dfae43
Fixed formatting to make the form centered
djmears-dev May 13, 2026
d64e17a
Finalising styling changes
djmears-dev May 13, 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
71 changes: 60 additions & 11 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,71 @@
<title>My form exercise</title>
<meta name="description" content="" />
<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>
<h1>Product Pick</h1>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->

<label for="name">Customer Name:</label>

<input
Copy link
Copy Markdown

@Luro91 Luro91 May 14, 2026

Choose a reason for hiding this comment

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

I find the code hard to read because of the formatting (indentation). How can you ensure consistent formatting in your code?

type="text"
id="name"
name="name"
required
pattern=".*\S.{1,}.*"
>
<br><br>
<label for="email">Email Address:</label>

<input
type="email"
id="email"
name="email"
required
Comment on lines +24 to +33
Copy link
Copy Markdown

@Luro91 Luro91 May 14, 2026

Choose a reason for hiding this comment

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

Good job on the validations and making things required

>
<br><br>
<label for="colour">T-Shirt Colour:</label>

<select id="colour" name="colour" required>
<option value="">Select a colour</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="blue">Yellow</option>

</select>
<br><br>
<p>T-Shirt Size:</p>
<br>
<div class="sizes">

<input type="radio" id="xs" name="size" value="XS" required>
<label for="xs">XS</label>

<input type="radio" id="s" name="size" value="S">
<label for="s">S</label>

<input type="radio" id="m" name="size" value="M">
<label for="m">M</label>

<input type="radio" id="l" name="size" value="L">
<label for="l">L</label>

<input type="radio" id="xl" name="size" value="XL">
<label for="xl">XL</label>

<input type="radio" id="xxl" name="size" value="XXL">
<label for="xxl">XXL</label>

</div>
<br><br>
<button type="submit">Place Order</button>
</form>
<p>By Dan Mears</p>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
</footer>

</body>
</html>
110 changes: 110 additions & 0 deletions Form-Controls/style.css
View file
Open in desktop
Copy link
Copy Markdown

@Luro91 Luro91 May 14, 2026

Choose a reason for hiding this comment

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

The styling of the form looks nice

Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
/* Import cool Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* Reset default spacing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Page styling */
body {
font-family: 'Poppins', sans-serif;
background: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #444;
}

/* Main form container */
main {
background: white;
padding: 40px;
border-radius: 20px;
width: 400px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Heading */
h1 {
text-align: center;
margin-bottom: 25px;
color: #ff4f87;
}

/* Labels */
label,
p {
font-weight: 500;
margin-bottom: 8px;
display: block;
}

/* Text inputs and dropdown */
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 12px;
margin-top: 6px;
margin-bottom: 20px;
font-size: 14px;
transition: 0.3s;
}

/* Input focus effect */
input[type="text"]:focus,
input[type="email"]:focus,
select:focus {
border-color: #ff4f87;
outline: none;
}

/* Radio buttons section */
input[type="radio"] {
margin-right: 5px;
margin-left: 10px;
}

/* Submit button */
button {
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: #ff4f87;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}

/* Button hover effect */
button:hover {
background: #e63e74;
}

/* main */
main {
text-align: center;
}
/* Shirt sizes in one row */
.sizes {
display: flex;
gap: 1px;
font-size: 13px;
align-items: center;
flex-wrap: wrap;
}

/* Fix radio labels */
.sizes label {
display: inline;
margin-right: 10px;
}
Loading