Skip to content

London | 26-ITP-Sep | Hanna Bohlin | Sprint 1 | Form controls #1497

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
habohlin wants to merge 33 commits into
base: main
Choose a base branch
from
+69 −8
Open

London | 26-ITP-Sep | Hanna Bohlin | Sprint 1 | Form controls #1497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
4951e83
Add learning objectives as a comment
habohlin Sep 9, 2026
6f2eb34
Add h1 and 2 fieldsets for the inputs
habohlin Sep 9, 2026
7e93424
Add my name at the bottom
habohlin Sep 9, 2026
d88ce19
Remove h1 as there already is one
habohlin Sep 9, 2026
096737f
Add required pattern name input
habohlin Sep 9, 2026
f8e70bd
Add submit button
habohlin Sep 9, 2026
086fc7b
Add email input
habohlin Sep 9, 2026
fd97af3
Add divs around inputs to start on new line
habohlin Sep 9, 2026
84e14fb
Add radio buttons to choose colour
habohlin Sep 9, 2026
1810706
Add section and label around radio buttons
habohlin Sep 9, 2026
4fcef2b
Add select size with 6 options
habohlin Sep 9, 2026
fd4a8ac
Add name attribute to name and email inputs
habohlin Sep 9, 2026
d537821
Make radio buttons required
habohlin Sep 9, 2026
f7671fa
Make select size required
habohlin Sep 9, 2026
66127a6
Create styles sheet
habohlin Sep 9, 2026
98f7106
Linked stylesheet to index
habohlin Sep 9, 2026
38ea368
Add background and text colour in stylesheet
habohlin Sep 9, 2026
9ac0b56
Add margin to many elements
habohlin Sep 9, 2026
dc522f9
Add id attribute to name and email input
habohlin Sep 11, 2026
cf1fa66
Correct for attribute for color labels
habohlin Sep 11, 2026
41624ac
Add meta description tag to improve SEO
habohlin Sep 11, 2026
62b137b
Remove empty meta description tag
habohlin Sep 11, 2026
49c1ae1
Remove trailing forward slashes
habohlin Sep 11, 2026
453a7da
Change radio btn section into a div as it is non semantic
habohlin Sep 11, 2026
70afc13
Add label to the empty option in select
habohlin Sep 11, 2026
1b5c004
Change submit section into div as no heading is used
habohlin Sep 11, 2026
d564820
Change label to p as it doesn't describe an input
habohlin Sep 11, 2026
a414171
Remove submit label as it doesn't describe an input
habohlin Sep 11, 2026
c8616a9
Checked off final requirements met
habohlin Sep 11, 2026
2c51f69
Format with prettier to fix indentation issues
habohlin Sep 14, 2026
3ee0918
Remove the requirements, not needed anymore
habohlin Sep 14, 2026
8cd3f04
Change section selector to div selector
habohlin Sep 14, 2026
8038128
Format stylesheet with prettier to fix indentation issue
habohlin Sep 14, 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
61 changes: 53 additions & 8 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,72 @@
<!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" />
<meta name="description" content="Form to pick your t-shirt" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<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 id="customer-info">
<legend>Customer info</legend>
<div>
<label for="name">Name</label>
<input
id="name"
type="text"
required
name="name"
pattern=".*\S.*\S.*"
/>
</div>
<div>
<label for="email">Email</label>
<input id="email" type="email" name="email" required />
</div>
</fieldset>
<fieldset id="tshirt-info">
<legend>T-shirt info</legend>
<p>Choose a colour:</p>
<div id="color-radio-btns">
<input
type="radio"
name="color"
id="white"
value="white"
required
/>
<label for="white">White</label>
<input type="radio" name="color" id="black" value="black" />
<label for="black">Black</label>
<input type="radio" name="color" id="brown" value="brown" />
<label for="brown">Brown</label>
</div>
<label for="size">Choose a size:</label>
<select name="size" id="size" required>
<option label="choose"></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>
</fieldset>

<div id="submit">
<button type="submit">Submit</button>
</div>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Hanna Bohlin</p>
</footer>
</body>
</html>
16 changes: 16 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
body {
background-color: rgb(249, 205, 205);
color: purple;
}

input {
margin: 10px;
}

fieldset {
margin: 7px;
}

div {
margin: 7px;
}
Loading