Skip to content

Commit e782c04

Browse files
Rawan0-0Rawan0-0
authored
Refactor HTML structure and improve formatting
1 parent e5a8744 commit e782c04

1 file changed

Lines changed: 65 additions & 62 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 65 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,83 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<title>My form exercise</title>
7-
<link rel="stylesheet" href="style.css">
8-
<meta name="description" content="">
9-
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="style.css" />
8+
<meta name="description" content="" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
1010
</head>
1111
<body>
1212
<header>
1313
<h1>Product Pick</h1>
1414
</header>
1515
<main>
1616
<form>
17-
<label>
18-
Enter your name:
19-
<input type="text" placeholder="Enter your name " name="aName" size="16" minlength="2" maxlength="16" pattern=".*\S.*\S.*" required>
20-
</label>
21-
<!-- the size attribute control how wide the text box, "how many characters it can control-->
22-
<!-- the minlength attribute control the minimum number of characters required-->
23-
<!-- the maxlength attribute control the maximum number of characters required-->
24-
<!-- the placeholder attribute provide a hint for the user on what to enter-->
25-
<!-- the required attribute ensures the user fills out the field-->
26-
<p>Choose your T-shirt color:</p>
27-
<!-- choosing the radio buttons for color selection-->
28-
<p>please select a color:</p>
29-
<p>
30-
<input type="radio" name="color" id="red" value="Red" required>
31-
<label for="red">Red</label>
32-
<input type="radio" name="color" id="brown" value="Brown" required>
33-
<label for="brown">Brown</label><br>
34-
<input type="radio" name="color" id="black" value="Black" required>
35-
<label for="black">Black</label><br>
36-
</p>
17+
<label>
18+
Enter your name:
19+
<input
20+
type="text"
21+
placeholder="Enter your name "
22+
name="aName"
23+
size="16"
24+
minlength="2"
25+
maxlength="16"
26+
pattern=".*\S.*\S.*"
27+
required
28+
/>
29+
</label>
30+
<!-- the size attribute control how wide the text box, "how many characters it can control-->
31+
<!-- the minlength attribute control the minimum number of characters required-->
32+
<!-- the maxlength attribute control the maximum number of characters required-->
33+
<!-- the placeholder attribute provide a hint for the user on what to enter-->
34+
<!-- the required attribute ensures the user fills out the field-->
35+
<p>Choose your T-shirt color:</p>
36+
<!-- choosing the radio buttons for color selection-->
37+
<p>please select a color:</p>
38+
<p>
39+
<input type="radio" name="color" id="red" value="Red" required />
40+
<label for="red">Red</label>
41+
<input type="radio" name="color" id="brown" value="Brown" required />
42+
<label for="brown">Brown</label><br />
43+
<input type="radio" name="color" id="black" value="Black" required />
44+
<label for="black">Black</label><br />
45+
</p>
3746

38-
<!-- a list of suggestions using the list attribute and the datalist element -->
39-
40-
<p>Select your T-shirt size:</p>
41-
 
42-
<input type="radio" name="T-shirt_Size" id="XS" value="XS" required>
43-
<label for="XS">XS</label><br>
44-
 
45-
<input type="radio" name="T-shirt_Size" id="S" value="S">
46-
<label for="S">S</label><br>
47-
 
48-
<input type="radio" name="T-shirt_Size" id="M" value="M">
49-
<label for="M">M</label><br>
50-
 
51-
<input type="radio" name="T-shirt_Size" id="L" value="L">
52-
<label for="L">L</label><br>
53-
 
54-
<input type="radio" name="T-shirt_Size" id="XL" value="XL">
55-
<label for="XL">XL</label><br>
56-
 
57-
<input type="radio" name="T-shirt_Size" id="XXL" value="XXL">
58-
<label for="XXL">XXL</label><br>
47+
<!-- a list of suggestions using the list attribute and the datalist element -->
5948

49+
<p>Select your T-shirt size:</p>
50+
 
51+
<input type="radio" name="T-shirt_Size" id="XS" value="XS" required />
52+
<label for="XS">XS</label><br />
53+
 
54+
<input type="radio" name="T-shirt_Size" id="S" value="S" />
55+
<label for="S">S</label><br />
56+
 
57+
<input type="radio" name="T-shirt_Size" id="M" value="M" />
58+
<label for="M">M</label><br />
59+
 
60+
<input type="radio" name="T-shirt_Size" id="L" value="L" />
61+
<label for="L">L</label><br />
62+
 
63+
<input type="radio" name="T-shirt_Size" id="XL" value="XL" />
64+
<label for="XL">XL</label><br />
65+
 
66+
<input type="radio" name="T-shirt_Size" id="XXL" value="XXL" />
67+
<label for="XXL">XXL</label><br />
6068

61-
62-
<label>
63-
Enter your email:
64-
<input type="email" placeholder="Enter your email" required>
69+
<label>
70+
Enter your email:
71+
<input type="email" placeholder="Enter your email" required />
6572

66-
<!--The input type="email" is used so the browser can validatae the email address format-->
67-
<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
68-
</label>
69-
<label> <input type="submit">
70-
</label>
71-
</form>
72-
</main>
73+
<!--The input type="email" is used so the browser can validatae the email address format-->
74+
<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
75+
</label>
76+
<label> <input type="submit" /> </label>
77+
</form>
78+
</main>
7379
<footer>
7480
<p>Rawan Almutairi</p>
7581
</footer>
76-
77-
7882
</body>
79-
</html>
80-
83+
</html>

0 commit comments

Comments
 (0)