Skip to content

Commit 11e21ab

Browse files
Rawan-Al0-0Rawan-Al0-0
committed
I added some changes to the html file
1 parent 3725052 commit 11e21ab

1 file changed

Lines changed: 71 additions & 12 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 71 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,86 @@
11
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
2+
<html lang="en"><head>
3+
<meta charset="utf-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
65
<title>My form exercise</title>
7-
<meta name="description" content="" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="form-controls" content="This page contains a product web form">
7+
&gt;
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
99
</head>
1010
<body>
11+
<img src="t-shirt1.jpg" alt="background image" style="height: 100%;
12+
text-align: center; position:fixed; left: 30%; top: 0;">
1113
<header>
1214
<h1>Product Pick</h1>
1315
</header>
1416
<main>
15-
<form>
16-
<!-- write your html here-->
17+
<!-- autocomplete attribute-->
18+
19+
<form action="/action_page.php" method="get" autocomplete="on"></form><!-- write your html here-->
1720
<!--
1821
try writing out the requirements first as comments
1922
this will also help you fill in your PR message later-->
20-
</form>
23+
24+
<!--the minlength and maxlength attribute-->
25+
<p>Enter Your Name!</p>
26+
<label for="fname">First Name:</label>
27+
<input type="text" id="lname" name="lname" minlength="2" maxlength="10" pattern="[A-Z][a-z]+" required><br><br>
28+
29+
<label for="lname"> Last Name:</label>
30+
<input type="text" id="lname" name="lname" minlength="2" maxlength="10" pattern="[A-Z][a-z]+" required><br><br>
31+
32+
33+
34+
<label for="email">Enter Your Email:</label>
35+
<input type="email" id="email" name="email" autocomplete="on" required><br><br>
36+
37+
38+
39+
40+
41+
<p>select a color for your t-shirt:</p>
42+
43+
<label for="color1"> Red</label>
44+
<input type="checkbox" id="color1" name="color1" style="font-size: 23px; margin-left: 12px;" value="Red"><br><br>
45+
<label for="color2"> Blue</label>
46+
<input type="checkbox" id="color2" name="color2" style="font-size: 23px; margin-left: 10px;" value="Blue"><br><br>
47+
<label for="color3"> Black</label>
48+
<input type="checkbox" id="color3" name="color3" value="Black"><br><br>
49+
<!--
50+
<P>Select a size for your t-shirt:</p>
51+
<input list="size" name="sie">
52+
<datalist id="size">
53+
54+
<option value="xs"></option>
55+
<option value="s"></option>
56+
<option value="m"></option>
57+
<option value="l"></option>
58+
<option value="xl"></option>
59+
60+
</datalist>
61+
-->
62+
<!--the radio buttons-->
63+
<!-- fixing the touch target size-->
64+
<input type="radio" id="xs" name="size" style="min-width:24px; min-height:24px; padding:8px 12px; margin:4px;font-size: 24px; margin-left: 20px;" value="XS">
65+
<label for="xs">XS</label><br>
66+
<input type="radio" id="s" name="size" style="min-width:44px; min-height:24px; padding: 8px 12px; margin:4px;font-size: 24px; margin-left: 10px;" value="S">
67+
<label for="s">S</label><br>
68+
<input type="radio" id="m" name="size" style="min-width:44px; min-height:24px; padding: 8px 12px; margin:4px;font-size: 24px; margin-left: 10px;" value="M">
69+
<label for="m">M</label><br>
70+
<input type="radio" id="l" name="size" style="min-width:44px; min-height:24px; padding: 8px 12px; margin:4px;font-size: 24px; margin-left: 10px;"value="L">
71+
<label for="l">L</label><br>
72+
<input type="radio" id="xl" name="size" style="min-width:44px; min-height:24px; padding: 8px 12px; margin:4px;font-size: 24px; margin-left: 10px;"value="XL">
73+
<label for="xl">XL</label><br>
74+
75+
<input type="submit" style="font-size: 15px; margin-top: 15px; width: 60px; value= Submit">
76+
77+
78+
2179
</main>
2280
<footer>
2381
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
82+
<h2>Rawan</h2>
2583
</footer>
26-
</body>
27-
</html>
84+
85+
86+
</body></html>

0 commit comments

Comments
 (0)