Skip to content

Commit 626f08c

Browse files
risikatpopoolarisikatpopoola
committed
final edit
1 parent 5bb4747 commit 626f08c

2 files changed

Lines changed: 92 additions & 58 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 92 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -6,73 +6,107 @@
66
<title>My form exercise</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<style>
10+
h1{
11+
color:rgb(127, 24, 175);
12+
font-family:serif;
13+
font-size:60px;
14+
text-align: left;
15+
font-style: oblique;
16+
}
17+
label{
18+
font-size: 22px;
19+
color: rgb(29, 45, 133);
20+
}
21+
h2{
22+
font-size: 25px;
23+
color: rgb(127, 24, 175);;
24+
}
25+
#wall{
26+
background-color:rgb(160, 243, 243);
27+
padding:6px 6px;
28+
border: 6px solid black;
29+
max-width:70%;
30+
margin: 3px auto;
31+
}
32+
footer{
33+
font-family: Arial, Helvetica, sans-serif;
34+
font-size: 20px;
35+
text-align: center;
36+
}
37+
</style>
938
</head>
1039
<body>
11-
<header>
12-
<h1>Product Pick</h1>
13-
</header>
14-
<main>
15-
<form>
16-
<!-- write your html here-->
17-
<!--What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
18-
What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
19-
What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
20-
What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL-->
21-
<div>
22-
<label for="name">Name:</label>
23-
<input type="text" id="name" name="name" required>
24-
</div>
25-
<div>
26-
<label for="email">Email</label>
27-
<input type="email" id="email" name="email">
28-
</div>
29-
<div>
30-
Color
40+
<div id="wall">
41+
<header>
42+
<h1>Product Pick</h1>
43+
</header>
44+
<main>
45+
<form>
46+
<!-- write your html here-->
47+
<!--What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
48+
What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
49+
What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
50+
What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL-->
3151
<div>
32-
<label for="color">Purple</label>
33-
<input type="radio" name="color" id="purple" value="purple">
52+
<label for="name">Name:</label>
53+
<input type="text" id="name" name="name" pattern=".*\S.*\S.*" required title="Please enter at least two non-space characters">
3454
</div>
3555
<div>
36-
<label for="color">Blue</label>
37-
<input type="radio" name="color" id="blue" value="blue">
56+
<label for="email">Email</label>
57+
<input type="email" id="email" name="email" required>
3858
</div>
3959
<div>
40-
<label for="color">Wine</label>
41-
<input type="radio" name="color" id="wine" value="wine">
60+
<h2>COLOR</h2>
61+
<div>
62+
<label for="color">Purple</label>
63+
<input type="radio" name="color" id="color" value="purple">
64+
</div>
65+
<div>
66+
<label for="color">Blue</label>
67+
<input type="radio" name="color" id="color" value="blue">
68+
</div>
69+
<div>
70+
<label for="color">Wine</label>
71+
<input type="radio" name="color" id="color" value="wine">
72+
</div>
4273
</div>
43-
</div>
44-
<div>
45-
Size
4674
<div>
47-
<label for="size">XS</label>
48-
<input type="radio" name="size" id="xs" value="xs">
75+
<h2>SIZE</h2>
76+
<div>
77+
<label for="size">XS</label>
78+
<input type="radio" name="size" id="size" value="xs">
79+
</div>
80+
<div>
81+
<label for="size">S</label>
82+
<input type="radio" name="size" id="size" value="s">
83+
</div>
84+
<div>
85+
<label for="size">M</label>
86+
<input type="radio" name="size" id="size" value="m">
87+
</div>
88+
<div>
89+
<label for="size">L</label>
90+
<input type="radio" name="size" id="size" value="l">
91+
</div>
92+
<div>
93+
<label for="size">XL</label>
94+
<input type="radio" name="size" id="size" value="xl">
95+
</div>
96+
<div>
97+
<label for="size">XXL</label>
98+
<input type="radio" name="size" id="size" value="xxl">
99+
</div>
100+
<div>
101+
<button type="submit">Submit</button>
102+
</div>
49103
</div>
50-
<div>
51-
<label for="size">S</label>
52-
<input type="radio" name="size" id="s" value="s">
53-
</div>
54-
<div>
55-
<label for="size">M</label>
56-
<input type="radio" name="size" id="m" value="m">
57-
</div>
58-
<div>
59-
<label for="size">L</label>
60-
<input type="radio" name="size" id="l" value="l">
61-
</div>
62-
<div>
63-
<label for="size">XL</label>
64-
<input type="radio" name="size" id="xl" value="xl">
65-
</div>
66-
<div>
67-
<label for="size">XXL</label>
68-
<input type="radio" name="size" id="xxl" value="xxl">
69-
</div>
70-
</div>
71-
</form>
72-
</main>
73-
<footer>
74-
<!-- change to your name-->
75-
<p>Rizqah Popoola</p>
76-
</footer>
104+
</form>
105+
</main>
106+
<footer>
107+
<!-- change to your name-->
108+
<p>Rizqah Popoola</p>
109+
</footer>
110+
</div>
77111
</body>
78112
</html>

‎Form-Controls/styles.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)