Skip to content

Commit a25133d

Browse files
committed
Form control in process and added css file
1 parent ff7b9d0 commit a25133d

3 files changed

Lines changed: 67 additions & 4 deletions

File tree

Form-Controls/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ Do not write a form action for this project.
3434

3535
Let's write out our testable criteria. Check each one off as you complete it.
3636

37-
- [ ] I have only used HTML and CSS.
38-
- [ ] I have not used any JavaScript.
37+
- [] I have only used HTML and CSS.
38+
- [] I have not used any JavaScript.
3939

4040
### HTML
4141

Form-Controls/index.html

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,79 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
6+
<title>T-shirt Order Form</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="stylesheet" href="style.css">
910
</head>
1011
<body>
12+
<main>
13+
14+
<form method="get" class="form-container">
1115
<header>
12-
<h1>Product Pick</h1>
16+
<h1>T-shirt Order Form</h1>
1317
</header>
1418
<main>
1519
<form>
20+
21+
<div>
22+
<label for="name">Full Name</label>
23+
<input id="name" name="name" type="text" minlength="2" placeholder="Your full name" required>
24+
</div>
25+
26+
<div>
27+
<label for="email">Email</label>
28+
<input id="email" name="email" type="email" placeholder="Your email" required>
29+
</div>
30+
31+
<div>
32+
Colour
33+
<div>
34+
<label for="red">Red</label>
35+
<input id="red" name="red" type="checkbox">
36+
</div>
37+
<div>
38+
<label for="blue">Blue</label>
39+
<input id="blue" name="blue" type="checkbox">
40+
</div>
41+
<div>
42+
<label for="green">Green</label>
43+
<input id="green" name="green" type="checkbox">
44+
</div>
45+
46+
<div>
47+
Size
48+
<div>
49+
<label for="xs">XS</label>
50+
<input id="xs" name="size" type="radio">
51+
</div>
52+
<div>
53+
<label for="s">S</label>
54+
<input id="s" name="size" type="radio">
55+
</div>
56+
<div>
57+
<label for="m">M</label>
58+
<input id="m" name="size" type="radio">
59+
</div>
60+
<div>
61+
<label for="l">L</label>
62+
<input id="l" name="size" type="radio">
63+
</div>
64+
<div>
65+
<label for="xl">XL</label>
66+
<input id="xl" name="size" type="radio">
67+
</div>
68+
<div>
69+
<label for="xxl">XXL</label>
70+
<input id="xxl" name="size" type="radio">
71+
</div>
72+
73+
</div>
74+
75+
76+
<button type="submit">Submit</button>
77+
</div>
78+
1679
<!-- write your html here-->
1780
<!--
1881
try writing out the requirements first as comments

Form-Controls/style.css

Whitespace-only changes.

0 commit comments

Comments
 (0)