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

Closed
djmears-dev wants to merge 5 commits into from
Closed

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
5 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
c387df0
Formatted both html and css using prettier
djmears-dev Jun 5, 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
62 changes: 50 additions & 12 deletions Form-Controls/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,65 @@
<!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="" />
<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
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 />
<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" />
Comment on lines +41 to +56

@Luro91Luro91Jun 6, 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.

FYI: I would switch around the form types. Radio buttons are good if there are not to many options to choose from. Space on a web page is precious and for inputs with a lot of options a dropdown can save a lot of space. (You don't need to change anything. This is just an information on the different input types)

<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>
111 changes: 111 additions & 0 deletions Form-Controls/style.css
View file
Open in desktop

@Luro91Luro91May 14, 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 styling of the form looks nice

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
/* 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: #d81b60;
}

/* Labels */
label,
p {
color: #333333
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: #d81b60;
color: #ffffff;
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