Skip to content

Commit 64cacff

Browse files
d-odumosud-odumosu
committed
refactored: included type = 'submit in submit button', removed the pattern attribute in email
1 parent cfb77a3 commit 64cacff

2 files changed

Lines changed: 107 additions & 108 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66

77
- [ x ] Interpret requirements and check against a list of criteria
88
- [ x ] Write a valid form
9-
- [ ] Test with Devtools
10-
- [ ] Refactor using Devtools
9+
- [ x ] Test with Devtools
10+
- [ x ] Refactor using Devtools
1111
- [ x ] Use version control by committing often and pushing regularly to GitHub
1212
- [ x ] Develop the habit of writing clean, well-structured, and error-free code
1313
<!--{{<objectives>}}>-->
@@ -41,7 +41,7 @@ Let's write out our testable criteria. Check each one off as you complete it.
4141

4242
- [ x ] My form is semantic HTML.
4343
- [ x ] All inputs have associated labels.
44-
- [ ] My Lighthouse Accessibility score is 100.
44+
- [ x ] My Lighthouse Accessibility score is 100.
4545
- [ x ] I require a valid name.
4646
- [ x ] I require a valid email.
4747
- [ x ] I require one color from a defined set of 3 colors.
@@ -54,10 +54,10 @@ Let's write out our testable criteria. Check each one off as you complete it.
5454
These practices reflect the level of quality expected in professional work.
5555
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
5656

57-
- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
58-
- [ ] My code is consistently formatted
59-
- [ ] My page content is free of typos and grammatical mistakes
60-
- [ ] I commit often and push regularly to GitHub
57+
- [ x ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
58+
- [ x ] My code is consistently formatted
59+
- [ x ] My page content is free of typos and grammatical mistakes
60+
- [ x ] I commit often and push regularly to GitHub
6161

6262
## Resources
6363
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)

‎Form-Controls/index.html‎

Lines changed: 100 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,125 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8"/>
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6-
<title>My form exercise</title>
7-
<meta name="description" content=""/>
8-
<meta name="viewport" content="width=device-width, initial-scale=1"/>
9-
<link rel="stylesheet" href="main.css">
4+
<meta charset="utf-8"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6+
<title>My form exercise</title>
7+
<meta name="description" content=""/>
8+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
9+
<link rel="stylesheet" href="main.css">
1010

1111
</head>
1212
<body>
1313
<header>
14-
<div class="container">
15-
<h1>Product Pick</h1>
16-
</div>
14+
<div class="container">
15+
<h1>Product Pick</h1>
16+
</div>
1717
</header>
1818
<main>
19-
<div class="container">
20-
<form>
21-
<!-- write your HTML here-->
22-
<!--
23-
try writing out the requirements first as comments
24-
this will also help you fill in your PR message later-->
19+
<div class="container">
20+
<form>
21+
<!-- write your HTML here-->
22+
<!--
23+
try writing out the requirements first as comments
24+
this will also help you fill in your PR message later-->
2525

26-
<!-- first and lastname (ensure it contains at least two non-space characters.)-->
27-
<!-- email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
28-
<!-- shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
29-
<!-- shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
26+
<!-- first and lastname (ensure it contains at least two non-space characters.)-->
27+
<!-- email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
28+
<!-- shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
29+
<!-- shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
3030

3131

32-
<div class="form-group">
33-
<label for="firstname">First Name </label>
34-
<input
35-
type="text"
36-
id="firstname"
37-
name="firstname"
38-
required
39-
pattern="^[A-Za-z]{2,15}$"
40-
title="first name must be between 2 and 15 characters"
41-
>
42-
</div>
32+
<div class="form-group">
33+
<label for="firstname">First Name </label>
34+
<input
35+
type="text"
36+
id="firstname"
37+
name="firstname"
38+
required
39+
pattern="^[A-Za-z]{2,15}$"
40+
title="first name must be between 2 and 15 characters"
41+
>
42+
</div>
4343

44-
<div class="form-group">
45-
<label for="lastname">Last Name</label>
46-
<input
47-
type="text"
48-
id="lastname"
49-
name="lastname"
50-
required
51-
pattern="^[A-Za-z]{2,15}$"
52-
title="last name must be between 2 and 15 characters">
53-
</div>
44+
<div class="form-group">
45+
<label for="lastname">Last Name</label>
46+
<input
47+
type="text"
48+
id="lastname"
49+
name="lastname"
50+
required
51+
pattern="^[A-Za-z]{2,15}$"
52+
title="last name must be between 2 and 15 characters">
53+
</div>
5454

55-
<div class="form-group">
56-
<label for="email">Email</label>
57-
<input
58-
type="email"
59-
id="email"
60-
name="email"
61-
required
62-
pattern="^[^\s@]+@[^\s@]\.(com|co\.uk)$"
63-
title="Enter a valid email">
64-
</div>
55+
<div class="form-group">
56+
<label for="email">Email</label>
57+
<input
58+
type="email"
59+
id="email"
60+
name="email"
61+
required>
6562

66-
<div class="form-group">
67-
<fieldset>
68-
<legend>Choose a shirt color:</legend>
69-
<div class="form-group-fieldset">
70-
<input
71-
type="radio"
72-
id="choice1"
73-
name="shirt"
74-
value="blue"
75-
>
76-
<label for="choice1">Blue</label>
77-
</div>
63+
</div>
7864

79-
<div class="form-group-fieldset">
80-
<input
81-
type="radio"
82-
id="choice2"
83-
name="shirt"
84-
value="green"
85-
>
86-
<label for="choice2">Green</label>
87-
</div>
65+
<div class="form-group">
66+
<fieldset>
67+
<legend>Choose a shirt color:</legend>
68+
<div class="form-group-fieldset">
69+
<input
70+
type="radio"
71+
id="choice1"
72+
name="shirt"
73+
value="blue"
74+
>
75+
<label for="choice1">Blue</label>
76+
</div>
8877

89-
<div class="form-group-fieldset">
90-
<input
91-
type="radio"
92-
id="choice3"
93-
name="shirt"
94-
value="yellow"
95-
>
96-
<label for="choice3">Yellow</label>
97-
</div>
98-
</fieldset>
99-
</div>
78+
<div class="form-group-fieldset">
79+
<input
80+
type="radio"
81+
id="choice2"
82+
name="shirt"
83+
value="green"
84+
>
85+
<label for="choice2">Green</label>
86+
</div>
10087

101-
<div class="form-group">
102-
<label for="sizing">Choose a size:</label>
103-
<select id="sizing" name="size">
104-
<option value="">--Please choose an option--</option>
105-
<option value="ex-small">XS</option>
106-
<option value="small">S</option>
107-
<option value="medium">M</option>
108-
<option value="large">L</option>
109-
<option value="ex-large">XL</option>
110-
<option value="ex-ex-large">XXL</option>
88+
<div class="form-group-fieldset">
89+
<input
90+
type="radio"
91+
id="choice3"
92+
name="shirt"
93+
value="yellow"
94+
>
95+
<label for="choice3">Yellow</label>
96+
</div>
97+
</fieldset>
98+
</div>
11199

112-
</select>
113-
</div>
114-
<button>Submit</button>
115-
</form>
116-
</div>
100+
<div class="form-group">
101+
<label for="sizing">Choose a size:</label>
102+
<select id="sizing" name="size">
103+
<option value="">--Please choose an option--</option>
104+
<option value="ex-small">XS</option>
105+
<option value="small">S</option>
106+
<option value="medium">M</option>
107+
<option value="large">L</option>
108+
<option value="ex-large">XL</option>
109+
<option value="ex-ex-large">XXL</option>
110+
111+
</select>
112+
</div>
113+
<button type="submit">Submit</button>
114+
</form>
115+
</div>
117116
</main>
118117

119118
<footer>
120-
<!-- change to your name-->
121-
<div class="container">
122-
<p>By DAMILOLA ODUMOSU</p>
123-
</div>
119+
<!-- change to your name-->
120+
<div class="container">
121+
<p>By DAMILOLA ODUMOSU</p>
122+
</div>
124123
</footer>
125124
</body>
126125
</html>

0 commit comments

Comments
 (0)