Skip to content

Commit 77b50c7

Browse files
bartoszkawiakbartoszkawiak
committed
html form done, css added
1 parent d28242a commit 77b50c7

2 files changed

Lines changed: 56 additions & 5 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,64 @@
66
<title>My form exercise</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="stylesheet" href="/styles.css">
910
</head>
1011
<body>
1112
<header>
1213
<h1>Product Pick</h1>
1314
</header>
1415
<main>
1516
<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-->
17+
<fieldset>
18+
<legend>Order Form</legend>
19+
<!--Name at least 2 non space characters-->
20+
<label for="name">Name</label>
21+
<input type="text" name="name" id="name" pattern=".*\S.*\S.*" placeholder="James" required>
22+
<!--EMAIL-->
23+
<label for="email">Email Address</label>
24+
<input type="email" name="email" id="email" required placeholder="myemail@email.com">
25+
<!--Color 3 options with select NO multiselect-->
26+
<label for="colorOptions">Choose Color</label>
27+
<select id="colorOptions" name="color" required>
28+
<option hidden></option>
29+
<option value="grey" >Grey</option>
30+
<option value="black" >Black</option>
31+
<option value="white" >White</option>
32+
</select>
33+
34+
<!--SIZE 6 options XS,S,M,L,XL,XXL-->
35+
<p>Choose Size:</p>
36+
37+
<label for="xs">XS</label>
38+
<input type="radio" id="xs" name="size" value="xs" required>
39+
40+
<label for="s">S</label>
41+
<input type="radio" id="s" name="size" value="s">
42+
43+
<label for="m">M</label>
44+
<input type="radio" id="m" name="size" value="m">
45+
46+
<label for="l">L</label>
47+
<input type="radio" id="l" name="size" value="l">
48+
49+
<label for="xl">XL</label>
50+
<input type="radio" id="xl" name="size" value="xl">
51+
52+
<label for="xxl">XXL</label>
53+
<input type="radio" id="xxl" name="size" value="xxl">
54+
55+
</fieldset>
56+
57+
<div id="buttonGroup">
58+
<button type="submit">Submit</button>
59+
<button type="reset">Reset</button>
60+
</div>
61+
2062
</form>
2163
</main>
2264
<footer>
2365
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
66+
<p>By Bartosz Kawiak</p>
2567
</footer>
2668
</body>
2769
</html>

‎Form-Controls/styles.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
body{
2+
font-family: sans-serif, Arial, Helvetica;
3+
}
4+
5+
fieldset {
6+
display: grid;
7+
gap: 0.5rem;
8+
}
9+

0 commit comments

Comments
 (0)