Skip to content

Commit bdb588a

Browse files
grantriches-bytegrantriches-byte
committed
Form controls updated
1 parent d4c4bd4 commit bdb588a

2 files changed

Lines changed: 80 additions & 82 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 80 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,82 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
7-
<meta name="description" content="" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
</head>
10-
<body>
11-
<header>
12-
<h1>Product Pick</h1>
13-
</header>
14-
<main>
15-
<form>
16-
<!-- write your html here-->
17-
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
20-
</form>
21-
</main>
22-
<footer>
23-
<!-- change to your name-->
24-
<h2>By HOMEWORK SOLUTION</h2>
25-
</footer>
26-
</body>
27-
</html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>T-Shirt Order Form</title>
7+
</head>
8+
<body>
9+
10+
<main>
11+
<h1>Order Your T-Shirt</h1>
12+
13+
<form>
14+
15+
<!-- Customer Details -->
16+
<fieldset>
17+
<legend>Customer Details</legend>
18+
19+
<p>
20+
<label for="name">Name:</label><br>
21+
<input type="text" id="name" name="name" required minlength="2">
22+
</p>
23+
24+
<p>
25+
<label for="email">Email:</label><br>
26+
<input type="email" id="email" name="email" required>
27+
</p>
28+
29+
</fieldset>
30+
31+
<!-- T-Shirt Colour -->
32+
<fieldset>
33+
<legend>T-Shirt Colour</legend>
34+
35+
<p>Please choose a colour:</p>
36+
37+
<p>
38+
<label>
39+
<input type="radio" name="colour" value="red" required>
40+
Red
41+
</label>
42+
</p>
43+
44+
<p>
45+
<label>
46+
<input type="radio" name="colour" value="blue">
47+
Blue
48+
</label>
49+
</p>
50+
51+
<p>
52+
<label>
53+
<input type="radio" name="colour" value="green">
54+
Green
55+
</label>
56+
</p>
57+
58+
</fieldset>
59+
60+
<!-- T-Shirt Size -->
61+
<fieldset>
62+
<legend>T-Shirt Size</legend>
63+
64+
<p>
65+
<label for="size">Choose a size:</label><br>
66+
<select id="size" name="size" required>
67+
<option value="">--Please choose an option--</option>
68+
<option value="xs">XS</option>
69+
<option value="s">S</option>
70+
<option value="m">M</option>
71+
<option value="l">L</option>
72+
<option value="xl">XL</option>
73+
<option value="xxl">XXL</option>
74+
</select>
75+
</p>
76+
77+
</fieldset>
78+
79+
<!-- Submit Button -->
80+
<p>
81+
<button type="submit">Submit</button>
82+
</p><!DOCTYPE html>

‎Wireframe/index.html‎

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +0,0 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This page explains key concepts used in web development and version control.
14-
</p>
15-
</header>
16-
<main>
17-
<section>
18-
<article>
19-
<img src="placeholder.svg" alt="Illustration of a README file" />
20-
<h2>What is the purpose of a README file?</h2>
21-
<p>
22-
A README file explains what a project is, how to use it, and why it is useful.
23-
It helps users and contributors understand how to get started and where to get help.
24-
</p>
25-
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more about README files</a>
26-
</article>
27-
28-
<article>
29-
<img src="placeholder.svg" alt="Illustration of a wireframe" />
30-
<h2>What is the purpose of a wireframe?</h2>
31-
<p>
32-
A wireframe is a basic illustration of a website or app.
33-
They are used to design the layout, showing all elements of the page without going into details such as fonts and colours.
34-
</p>
35-
<a href="https://www.geeksforgeeks.org/blogs/what-is-wireframing/">Read more about Wireframes</a>
36-
</article>
37-
38-
<article>
39-
<img src="placeholder.svg" alt="Illustration of a Git branch" />
40-
<h2>What is a branch in Git?</h2>
41-
<p>
42-
A branch in Git is like a separate workspace where you can make changes and try new ideas without affecting the main project.
43-
Creating a branch allows you to make changes without affecting the original version.
44-
</p>
45-
<a href="https://www.w3schools.com/git/git_branch.asp?_gl=1*1pmlokl*_ga*NzI4ODc3OTYyLjE3NjkxMTc0MzI.*_ga_9YNMTB56NB*czE3NjkxMTc0MzEkbzEkZzEkdDE3NjkxMTc0MzIkajU5JGwwJGgw">Read more about Git branches</a>
46-
</article>
47-
</section>
48-
</main>
49-
<footer>
50-
<section>
51-
<p>
52-
&copy; Code Your Future
53-
</p>
54-
</section>
55-
</footer>
56-
</body>
57-
</html>

0 commit comments

Comments
 (0)