Skip to content

Commit a82cab3

Browse files
yonasdesbelegebreyonasdesbelegebre
committed
modifed feedbacks
1 parent 55ffbef commit a82cab3

2 files changed

Lines changed: 37 additions & 38 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,11 @@
22
<html lang="en">
33
<head>
44
<link rel="stylesheet" href="style.css" >
5-
<meta charset="utf-8" />
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta charset="utf-8" >
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
77
<title>My form exercise</title>
88
<meta name="description" content="The page Contains Form to submit customer information about T-shirts" />
99
<meta name="viewport" content="width=device-width, initial-scale=1" />
10-
<style>
11-
input:valid{
12-
border:2px solid yellow;
13-
}
14-
input:invalid:not(:placeholder-shown){
15-
border:2px solid red;
16-
}
17-
</style>
1810
</head>
1911
<body>
2012
<header>
@@ -24,52 +16,53 @@ <h1>Product Pick</h1>
2416
<form>
2517
<!-- -->
2618
<div>
27-
<label for="customername">Customer name *: </label>
28-
<input type="text" id="customername" name="customername" required
29-
pattern="^[A-Za-z]{2,}$"
30-
placeholder="Customer name"/>
19+
<label for="customername">Customer name *: </label>
20+
<input type="text" id="customername" name="customername" required
21+
pattern="^[A-Za-z]{2,}$"
22+
placeholder="Customer name"/>
3123
</div>
3224

3325
<div>
34-
<label for="customeremail">Customer email: </label>
35-
<input type="email" id="customeremail" name="customeremail" required
36-
pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
37-
placeholder="Customer email" />
26+
<label for="customeremail">Customer email: </label>
27+
<input type="email" id="customeremail" name="customeremail" required
28+
pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
29+
placeholder="Customer email" />
3830
</div>
3931

4032
<div>
41-
<label for="color">T-shirt color *:</label>
42-
<div class="control">
43-
<label class="t-color">
44-
<input type="radio" name="color" value="Black" required/>
45-
Black
46-
</label>
47-
<label class="t-color">
48-
<input type="radio" name="color" value="Red" required/>
49-
Red
50-
</label>
51-
<label class="t-color" disabled>
52-
<input type="radio" name="color" value="Blue" required/>
53-
Blue
54-
</label>
33+
<label>T-shirt color *:</label>
34+
<div class="control">
35+
<label class="t-color">
36+
<input type="radio" name="color" value="Black" required/>
37+
Black
38+
</label>
39+
<label class="t-color">
40+
<input type="radio" name="color" value="Red" required/>
41+
Red
42+
</label>
43+
<label class="t-color" disabled>
44+
<input type="radio" name="color" value="Blue" required/>
45+
Blue
46+
</label>
5547
</div>
5648
</div>
5749
<div>
58-
<label for="sizes">T-shirt size *:</label>
50+
<label>T-shirt size *:</label>
5951
<select name="sizes" id="sizes" required>
52+
<option value="" disabled selected>Select size</option>
6053
<option value="xs">XS</option>
6154
<option value="s">S</option>
6255
<option value="m">M</option>
6356
<option value="l">L</option>
64-
<option value="XL">XL</option>
65-
<option vallue="XXL">XXL</optio>
57+
<option value="xL">XL</option>
58+
<option value="xxL">XXL</option>
6659
</select>
6760
</div>
6861
<div>
69-
<button type="submit" id="submit">Submit</button>
62+
<button type="submit" id="submit">Submit</button>
7063
</div>
71-
</form>
72-
</main>
64+
</form>
65+
</main>
7366
<footer>
7467
<!-- change to your name-->
7568
<p>By Yonas Gebre</p>

‎Form-Controls/style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
/* body style */
2+
input:valid{
3+
border:2px solid yellow;
4+
}
5+
input:invalid:not(:placeholder-shown){
6+
border:2px solid red;
7+
}
28
body {
39
background-color: lightwhite;
410
max-width: 800px;

0 commit comments

Comments
 (0)