Skip to content

Commit ce5b90f

Browse files
huyenltnguyenhuyenltnguyen
authored
fix(curriculum): HTML Tables and Forms review (freeCodeCamp#58661)
1 parent d354e34 commit ce5b90f

File tree

2 files changed

+311
-43
lines changed

2 files changed

+311
-43
lines changed

‎curriculum/challenges/english/25-front-end-development/review-html-tables-and-forms/671a872c17382a582e455c4c.md

Lines changed: 146 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,171 @@ dashedName: review-html-tables-and-forms
99

1010
Review the concepts below to prepare for the upcoming quiz.
1111

12-
## Working with HTML form elements and attributes
12+
## HTML Form Elements and Attributes
1313

1414
- **`form` element**: used to create an HTML form for user input.
1515
- **`action` attribute**: used to specify the URL where the form data should be sent.
16+
- **`method` attribute**: used to specify the HTTP method to use when sending the form data. The most common methods are `GET` and `POST`.
17+
18+
```html
19+
<form method="value-goes-here" action="url-goes-here">
20+
<!-- inputs go inside here -->
21+
</form>
22+
```
23+
1624
- **`input` element**: used to create an input field for user input.
17-
- **`type` attribute**: used to specify the type of input field. Ex. text, password, email, etc.
18-
- **`label` element**: used to create a label for an input field.
19-
- **`for` attribute**: used to specify which input field the label is for.
20-
- **Implicit form association**: inputs can be associated with labels by wrapping the input field inside the `label` element.
21-
- **Explicit form association**: inputs can be associated with labels by using the `for` attribute on the `label` element.
25+
- **`type` attribute**: used to specify the type of input field. Ex. `text`, `email`, `number`, `radio`, `checkbox`, etc.
2226
- **`placeholder` attribute**: used to show a hint to the user to show them what to enter in the input field.
23-
- **`button` element**: used to create a clickable button. Ex. submit, reset, button.
24-
- **`value` attribute**: used to specify the value of the button.
25-
- **`required` attribute**: used to specify that an input field must be filled out before submitting the form.
26-
- **`size` attribute**: used to specify the width of an input field.
27+
- **`value` attribute**: used to specify the value of the input. If the input has a `button` type, the `value` attribute can be used to set the button text.
28+
- **`size` attribute**: used to define the number of characters that should be visible as the user types into the input.
29+
- **`min` attribute**: can be used input types such as `number` to specify the minimum value allowed in the input field.
30+
- **`max` attribute**: can be used input types such as `number` to specify the maximum value allowed in the input field.
2731
- **`minlength` attribute**: used to specify the minimum number of characters required in an input field.
2832
- **`maxlength` attribute**: used to specify the maximum number of characters allowed in an input field.
33+
- **`required` attribute**: used to specify that an input field must be filled out before submitting the form.
2934
- **`disabled` attribute**: used to specify that an input field should be disabled.
3035
- **`readonly` attribute**: used to specify that an input field is read-only.
36+
37+
```html
38+
<!-- Text input -->
39+
<input
40+
type="text"
41+
id="name"
42+
name="name"
43+
placeholder="e.g. Quincy Larson"
44+
size="20"
45+
minlength="5"
46+
maxlength="30"
47+
required
48+
/>
49+
50+
<!-- Number input -->
51+
<input
52+
type="number"
53+
id="quantity"
54+
name="quantity"
55+
min="2"
56+
max="10"
57+
disabled
58+
/>
59+
60+
<!-- Button -->
61+
<input type="button" value="Show Alert" />
62+
```
63+
64+
- **`label` element**: used to create a label for an input field.
65+
- **`for` attribute**: used to specify which input field the label is for.
66+
- **Implicit form association**: inputs can be associated with labels by wrapping the input field inside the `label` element.
67+
68+
```html
69+
<form action="">
70+
<label>
71+
Full Name:
72+
<input type="text" />
73+
</label>
74+
</form>
75+
```
76+
77+
- **Explicit form association**: inputs can be associated with labels by using the `for` attribute on the `label` element.
78+
79+
```html
80+
<form action="">
81+
<label for="email">Email Address: </label>
82+
<input type="email" id="email" />
83+
</form>
84+
```
85+
86+
- **`button` element**: used to create a clickable button. A button can also have a `type` attribute, which is used to control the behavior of the button when it is activated. Ex. `submit`, `reset`, `button`.
87+
88+
```html
89+
<button type="button">Show Form</button>
90+
<button type="submit">Submit Form</button>
91+
<button type="reset">Reset Form</button>
92+
```
93+
94+
- **`fieldset` element**: used to group related inputs together.
95+
- **`legend` element**: used to add a caption to describe the group of inputs.
96+
97+
```html
98+
<!-- Radio group -->
99+
<fieldset>
100+
<legend>Was this your first time at our hotel?</legend>
101+
102+
<label for="yes-option">Yes</label>
103+
<input id="yes-option" type="radio" name="hotel-stay" />
104+
105+
<label for="no-option">No</label>
106+
<input id="no-option" type="radio" name="hotel-stay" />
107+
</fieldset>
108+
109+
<!-- Checkbox group -->
110+
<fieldset>
111+
<legend>
112+
Why did you choose to stay at our hotel? (Check all that apply)
113+
</legend>
114+
115+
<label for="location">Location</label>
116+
<input type="checkbox" id="location" name="location" value="location" />
117+
118+
<label for="price">Price</label>
119+
<input type="checkbox" id="price" name="price" value="price" />
120+
</fieldset>
121+
```
122+
31123
- **Focused state**: this is the state of an input field when it is selected by the user.
32124

33-
## Working with HTML Table elements and attributes
125+
## Working with HTML Table Elements and Attributes
34126

35127
- **Table element**: used to create an HTML table.
36128
- **Table Head (`thead`) element**: used to group the header content in an HTML table.
37129
- **Table Row (`tr`) element**: used to create a row in an HTML table.
38130
- **Table Header (`th`) element**: used to create a header cell in an HTML table.
39-
- **`colspan` attribute**: used to specify the number of columns a header cell should span.
40131
- **Table body (`tbody`) element**: used to group the body content in an HTML table.
41132
- **Table Data Cell (`td`) element**: used to create a data cell in an HTML table.
42133
- **Table Foot (`tfoot`) element**: used to group the footer content in an HTML table.
134+
- **`caption` element**: used to add a title of an HTML table.
135+
- **`colspan` attribute**: used to specify the number of columns a table cell should span.
136+
137+
```html
138+
<table>
139+
<caption>Exam Grades</caption>
140+
141+
<thead>
142+
<tr>
143+
<th>Last Name</th>
144+
<th>First Name</th>
145+
<th>Grade</th>
146+
</tr>
147+
</thead>
148+
149+
<tbody>
150+
<tr>
151+
<td>Davis</td>
152+
<td>Alex</td>
153+
<td>54</td>
154+
</tr>
155+
156+
<tr>
157+
<td>Doe</td>
158+
<td>Samantha</td>
159+
<td>92</td>
160+
</tr>
161+
162+
<tr>
163+
<td>Rodriguez</td>
164+
<td>Marcus</td>
165+
<td>88</td>
166+
</tr>
167+
</tbody>
168+
169+
<tfoot>
170+
<tr>
171+
<td colspan="2">Average Grade</td>
172+
<td>78</td>
173+
</tr>
174+
</tfoot>
175+
</table>
176+
```
43177

44178
## Working with HTML Tools
45179

‎curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md

Lines changed: 165 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -84,37 +84,171 @@ Review the concepts below to prepare for the upcoming prep exam.
8484
- **Ruby Annotation (`ruby`) element**: Used to represent the text of a ruby annotation.
8585
- **Strikethrough (`s`) element**: Used to represent content that is no longer accurate or relevant.
8686

87-
## HTML form elements and attributes
88-
89-
- **`form` element**: Used to create an HTML form for user input.
90-
- **`action` attribute**: Used to specify the URL where the form data should be sent.
91-
- **`input` element**: Used to create an input field for user input.
92-
- **`type` attribute**: Used to specify the type of input field. Ex. text, password, email, etc.
93-
- **`label` element**: Used to create a label for an input field.
94-
- **`for` attribute**: Used to specify which input field the label is for.
95-
- **Implicit form association**: Inputs can be associated with labels by wrapping the input field inside the `label` element.
96-
- **Explicit form association**: Inputs can be associated with labels by using the `for` attribute on the `label` element.
97-
- **`placeholder` attribute**: Used to specify a short hint that describes the expected value of an input field.
98-
- **`button` element**: Used to create a clickable button. Ex. submit, reset, button.
99-
- **`value` attribute**: Used to specify the value of the button.
100-
- **`required` attribute**: Used to specify that an input field must be filled out before submitting the form.
101-
- **`size` attribute**: Used to specify the width of an input field.
102-
- **`minlength` attribute**: Used to specify the minimum number of characters required in an input field.
103-
- **`maxlength` attribute**: Used to specify the maximum number of characters allowed in an input field.
104-
- **`disabled` attribute**: Used to specify that an input field should be disabled.
105-
- **`readonly` attribute**: Used to specify that an input field is read-only.
106-
- **Focused state**: This is the state of an input field when it is selected by the user.
107-
108-
## HTML Table elements and attributes
109-
110-
- **Table element**: Used to create an HTML table.
111-
- **Table Head (`thead`) element**: Used to group the header content in an HTML table.
112-
- **Table Row (`tr`) element**: Used to create a row in an HTML table.
113-
- **Table Header (`th`) element**: Used to create a header cell in an HTML table.
114-
- **`colspan` attribute**: Used to specify the number of columns a header cell should span.
115-
- **Table body (`tbody`) element**: Used to group the body content in an HTML table.
116-
- **Table Data Cell (`td`) element**: Used to create a data cell in an HTML table.
117-
- **Table Foot (`tfoot`) element**: Used to group the footer content in an HTML table.
87+
## HTML Form Elements and Attributes
88+
89+
- **`form` element**: used to create an HTML form for user input.
90+
- **`action` attribute**: used to specify the URL where the form data should be sent.
91+
- **`method` attribute**: used to specify the HTTP method to use when sending the form data. The most common methods are `GET` and `POST`.
92+
93+
```html
94+
<form method="value-goes-here" action="url-goes-here">
95+
<!-- inputs go inside here -->
96+
</form>
97+
```
98+
99+
- **`input` element**: used to create an input field for user input.
100+
- **`type` attribute**: used to specify the type of input field. Ex. `text`, `email`, `number`, `radio`, `checkbox`, etc.
101+
- **`placeholder` attribute**: used to show a hint to the user to show them what to enter in the input field.
102+
- **`value` attribute**: used to specify the value of the input. If the input has a `button` type, the `value` attribute can be used to set the button text.
103+
- **`size` attribute**: used to define the number of characters that should be visible as the user types into the input.
104+
- **`min` attribute**: can be used input types such as `number` to specify the minimum value allowed in the input field.
105+
- **`max` attribute**: can be used input types such as `number` to specify the maximum value allowed in the input field.
106+
- **`minlength` attribute**: used to specify the minimum number of characters required in an input field.
107+
- **`maxlength` attribute**: used to specify the maximum number of characters allowed in an input field.
108+
- **`required` attribute**: used to specify that an input field must be filled out before submitting the form.
109+
- **`disabled` attribute**: used to specify that an input field should be disabled.
110+
- **`readonly` attribute**: used to specify that an input field is read-only.
111+
112+
```html
113+
<!-- Text input -->
114+
<input
115+
type="text"
116+
id="name"
117+
name="name"
118+
placeholder="e.g. Quincy Larson"
119+
size="20"
120+
minlength="5"
121+
maxlength="30"
122+
required
123+
/>
124+
125+
<!-- Number input -->
126+
<input
127+
type="number"
128+
id="quantity"
129+
name="quantity"
130+
min="2"
131+
max="10"
132+
disabled
133+
/>
134+
135+
<!-- Button -->
136+
<input type="button" value="Show Alert" />
137+
```
138+
139+
- **`label` element**: used to create a label for an input field.
140+
- **`for` attribute**: used to specify which input field the label is for.
141+
- **Implicit form association**: inputs can be associated with labels by wrapping the input field inside the `label` element.
142+
143+
```html
144+
<form action="">
145+
<label>
146+
Full Name:
147+
<input type="text" />
148+
</label>
149+
</form>
150+
```
151+
152+
- **Explicit form association**: inputs can be associated with labels by using the `for` attribute on the `label` element.
153+
154+
```html
155+
<form action="">
156+
<label for="email">Email Address: </label>
157+
<input type="email" id="email" />
158+
</form>
159+
```
160+
161+
- **`button` element**: used to create a clickable button. A button can also have a `type` attribute, which is used to control the behavior of the button when it is activated. Ex. `submit`, `reset`, `button`.
162+
163+
```html
164+
<button type="button">Show Form</button>
165+
<button type="submit">Submit Form</button>
166+
<button type="reset">Reset Form</button>
167+
```
168+
169+
- **`fieldset` element**: used to group related inputs together.
170+
- **`legend` element**: used to add a caption to describe the group of inputs.
171+
172+
```html
173+
<!-- Radio group -->
174+
<fieldset>
175+
<legend>Was this your first time at our hotel?</legend>
176+
177+
<label for="yes-option">Yes</label>
178+
<input id="yes-option" type="radio" name="hotel-stay" />
179+
180+
<label for="no-option">No</label>
181+
<input id="no-option" type="radio" name="hotel-stay" />
182+
</fieldset>
183+
184+
<!-- Checkbox group -->
185+
<fieldset>
186+
<legend>
187+
Why did you choose to stay at our hotel? (Check all that apply)
188+
</legend>
189+
190+
<label for="location">Location</label>
191+
<input type="checkbox" id="location" name="location" value="location" />
192+
193+
<label for="price">Price</label>
194+
<input type="checkbox" id="price" name="price" value="price" />
195+
</fieldset>
196+
```
197+
198+
- **Focused state**: this is the state of an input field when it is selected by the user.
199+
200+
## Working with HTML Table Elements and Attributes
201+
202+
- **Table element**: used to create an HTML table.
203+
- **Table Head (`thead`) element**: used to group the header content in an HTML table.
204+
- **Table Row (`tr`) element**: used to create a row in an HTML table.
205+
- **Table Header (`th`) element**: used to create a header cell in an HTML table.
206+
- **Table body (`tbody`) element**: used to group the body content in an HTML table.
207+
- **Table Data Cell (`td`) element**: used to create a data cell in an HTML table.
208+
- **Table Foot (`tfoot`) element**: used to group the footer content in an HTML table.
209+
- **`caption` element**: used to add a title of an HTML table.
210+
- **`colspan` attribute**: used to specify the number of columns a table cell should span.
211+
212+
```html
213+
<table>
214+
<caption>Exam Grades</caption>
215+
216+
<thead>
217+
<tr>
218+
<th>Last Name</th>
219+
<th>First Name</th>
220+
<th>Grade</th>
221+
</tr>
222+
</thead>
223+
224+
<tbody>
225+
<tr>
226+
<td>Davis</td>
227+
<td>Alex</td>
228+
<td>54</td>
229+
</tr>
230+
231+
<tr>
232+
<td>Doe</td>
233+
<td>Samantha</td>
234+
<td>92</td>
235+
</tr>
236+
237+
<tr>
238+
<td>Rodriguez</td>
239+
<td>Marcus</td>
240+
<td>88</td>
241+
</tr>
242+
</tbody>
243+
244+
<tfoot>
245+
<tr>
246+
<td colspan="2">Average Grade</td>
247+
<td>78</td>
248+
</tr>
249+
</tfoot>
250+
</table>
251+
```
118252

119253
## HTML Tools
120254

0 commit comments

Comments
 (0)