CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-22 21:08:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(curriculum): HTML Tables and Forms review (#58661)

Browse Source
This commit is contained in:
Huyen Nguyen 2025-02-11 13:23:00 -08:00 committed by GitHub
parent d354e34230
commit ce5b90f408
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 309 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,37 +9,171 @@ dashedName: review-html-tables-and-forms
Review the concepts below to prepare for the upcoming quiz.
## Working with HTML form elements and attributes
## HTML Form Elements and Attributes
- **`form` element**: used to create an HTML form for user input.
- **`action` attribute**: used to specify the URL where the form data should be sent.
- **`method` attribute**: used to specify the HTTP method to use when sending the form data. The most common methods are `GET` and `POST`.
```html
<form method="value-goes-here" action="url-goes-here">
<!-- inputs go inside here -->
</form>
```
- **`input` element**: used to create an input field for user input.
- **`type` attribute**: used to specify the type of input field. Ex. text, password, email, etc.
- **`type` attribute**: used to specify the type of input field. Ex. `text`, `email`, `number`, `radio`, `checkbox`, etc.
- **`placeholder` attribute**: used to show a hint to the user to show them what to enter in the input field.
- **`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.
- **`size` attribute**: used to define the number of characters that should be visible as the user types into the input.
- **`min` attribute**: can be used input types such as `number` to specify the minimum value allowed in the input field.
- **`max` attribute**: can be used input types such as `number` to specify the maximum value allowed in the input field.
- **`minlength` attribute**: used to specify the minimum number of characters required in an input field.
- **`maxlength` attribute**: used to specify the maximum number of characters allowed in an input field.
- **`required` attribute**: used to specify that an input field must be filled out before submitting the form.
- **`disabled` attribute**: used to specify that an input field should be disabled.
- **`readonly` attribute**: used to specify that an input field is read-only.
```html
<!-- Text input -->
<input
type="text"
id="name"
name="name"
placeholder="e.g. Quincy Larson"
size="20"
minlength="5"
maxlength="30"
required
/>
<!-- Number input -->
<input
type="number"
id="quantity"
name="quantity"
min="2"
max="10"
disabled
/>
<!-- Button -->
<input type="button" value="Show Alert" />
```
- **`label` element**: used to create a label for an input field.
- **`for` attribute**: used to specify which input field the label is for.
- **Implicit form association**: inputs can be associated with labels by wrapping the input field inside the `label` element.
```html
<form action="">
<label>
Full Name:
<input type="text" />
</label>
</form>
```
- **Explicit form association**: inputs can be associated with labels by using the `for` attribute on the `label` element.
- **`placeholder` attribute**: used to show a hint to the user to show them what to enter in the input field.
- **`button` element**: used to create a clickable button. Ex. submit, reset, button.
- **`value` attribute**: used to specify the value of the button.
- **`required` attribute**: used to specify that an input field must be filled out before submitting the form.
- **`size` attribute**: used to specify the width of an input field.
- **`minlength` attribute**: used to specify the minimum number of characters required in an input field.
- **`maxlength` attribute**: used to specify the maximum number of characters allowed in an input field.
- **`disabled` attribute**: used to specify that an input field should be disabled.
- **`readonly` attribute**: used to specify that an input field is read-only.
```html
<form action="">
<label for="email">Email Address: </label>
<input type="email" id="email" />
</form>
```
- **`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`.
```html
<button type="button">Show Form</button>
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
```
- **`fieldset` element**: used to group related inputs together.
- **`legend` element**: used to add a caption to describe the group of inputs.
```html
<!-- Radio group -->
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<input id="no-option" type="radio" name="hotel-stay" />
</fieldset>
<!-- Checkbox group -->
<fieldset>
<legend>
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="location">Location</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="price">Price</label>
<input type="checkbox" id="price" name="price" value="price" />
</fieldset>
```
- **Focused state**: this is the state of an input field when it is selected by the user.
## Working with HTML Table elements and attributes
## Working with HTML Table Elements and Attributes
- **Table element**: used to create an HTML table.
- **Table Head (`thead`) element**: used to group the header content in an HTML table.
- **Table Row (`tr`) element**: used to create a row in an HTML table.
- **Table Header (`th`) element**: used to create a header cell in an HTML table.
- **`colspan` attribute**: used to specify the number of columns a header cell should span.
- **Table body (`tbody`) element**: used to group the body content in an HTML table.
- **Table Data Cell (`td`) element**: used to create a data cell in an HTML table.
- **Table Foot (`tfoot`) element**: used to group the footer content in an HTML table.
- **`caption` element**: used to add a title of an HTML table.
- **`colspan` attribute**: used to specify the number of columns a table cell should span.
```html
<table>
<caption>Exam Grades</caption>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Davis</td>
<td>Alex</td>
<td>54</td>
</tr>
<tr>
<td>Doe</td>
<td>Samantha</td>
<td>92</td>
</tr>
<tr>
<td>Rodriguez</td>
<td>Marcus</td>
<td>88</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average Grade</td>
<td>78</td>
</tr>
</tfoot>
</table>
```
## Working with HTML Tools

190
curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md
View File

@ -84,37 +84,171 @@ Review the concepts below to prepare for the upcoming prep exam.
- **Ruby Annotation (`ruby`) element**: Used to represent the text of a ruby annotation.
- **Strikethrough (`s`) element**: Used to represent content that is no longer accurate or relevant.
## HTML form elements and attributes
## HTML Form Elements and Attributes
- **`form` element**: Used to create an HTML form for user input.
- **`action` attribute**: Used to specify the URL where the form data should be sent.
- **`input` element**: Used to create an input field for user input.
- **`type` attribute**: Used to specify the type of input field. Ex. text, password, email, etc.
- **`label` element**: Used to create a label for an input field.
- **`for` attribute**: Used to specify which input field the label is for.
- **Implicit form association**: Inputs can be associated with labels by wrapping the input field inside the `label` element.
- **Explicit form association**: Inputs can be associated with labels by using the `for` attribute on the `label` element.
- **`placeholder` attribute**: Used to specify a short hint that describes the expected value of an input field.
- **`button` element**: Used to create a clickable button. Ex. submit, reset, button.
- **`value` attribute**: Used to specify the value of the button.
- **`required` attribute**: Used to specify that an input field must be filled out before submitting the form.
- **`size` attribute**: Used to specify the width of an input field.
- **`minlength` attribute**: Used to specify the minimum number of characters required in an input field.
- **`maxlength` attribute**: Used to specify the maximum number of characters allowed in an input field.
- **`disabled` attribute**: Used to specify that an input field should be disabled.
- **`readonly` attribute**: Used to specify that an input field is read-only.
- **Focused state**: This is the state of an input field when it is selected by the user.
- **`form` element**: used to create an HTML form for user input.
- **`action` attribute**: used to specify the URL where the form data should be sent.
- **`method` attribute**: used to specify the HTTP method to use when sending the form data. The most common methods are `GET` and `POST`.
## HTML Table elements and attributes
```html
<form method="value-goes-here" action="url-goes-here">
<!-- inputs go inside here -->
</form>
```
- **Table element**: Used to create an HTML table.
- **Table Head (`thead`) element**: Used to group the header content in an HTML table.
- **Table Row (`tr`) element**: Used to create a row in an HTML table.
- **Table Header (`th`) element**: Used to create a header cell in an HTML table.
- **`colspan` attribute**: Used to specify the number of columns a header cell should span.
- **Table body (`tbody`) element**: Used to group the body content in an HTML table.
- **Table Data Cell (`td`) element**: Used to create a data cell in an HTML table.
- **Table Foot (`tfoot`) element**: Used to group the footer content in an HTML table.
- **`input` element**: used to create an input field for user input.
- **`type` attribute**: used to specify the type of input field. Ex. `text`, `email`, `number`, `radio`, `checkbox`, etc.
- **`placeholder` attribute**: used to show a hint to the user to show them what to enter in the input field.
- **`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.
- **`size` attribute**: used to define the number of characters that should be visible as the user types into the input.
- **`min` attribute**: can be used input types such as `number` to specify the minimum value allowed in the input field.
- **`max` attribute**: can be used input types such as `number` to specify the maximum value allowed in the input field.
- **`minlength` attribute**: used to specify the minimum number of characters required in an input field.
- **`maxlength` attribute**: used to specify the maximum number of characters allowed in an input field.
- **`required` attribute**: used to specify that an input field must be filled out before submitting the form.
- **`disabled` attribute**: used to specify that an input field should be disabled.
- **`readonly` attribute**: used to specify that an input field is read-only.
```html
<!-- Text input -->
<input
type="text"
id="name"
name="name"
placeholder="e.g. Quincy Larson"
size="20"
minlength="5"
maxlength="30"
required
/>
<!-- Number input -->
<input
type="number"
id="quantity"
name="quantity"
min="2"
max="10"
disabled
/>
<!-- Button -->
<input type="button" value="Show Alert" />
```
- **`label` element**: used to create a label for an input field.
- **`for` attribute**: used to specify which input field the label is for.
- **Implicit form association**: inputs can be associated with labels by wrapping the input field inside the `label` element.
```html
<form action="">
<label>
Full Name:
<input type="text" />
</label>
</form>
```
- **Explicit form association**: inputs can be associated with labels by using the `for` attribute on the `label` element.
```html
<form action="">
<label for="email">Email Address: </label>
<input type="email" id="email" />
</form>
```
- **`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`.
```html
<button type="button">Show Form</button>
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
```
- **`fieldset` element**: used to group related inputs together.
- **`legend` element**: used to add a caption to describe the group of inputs.
```html
<!-- Radio group -->
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" />
<label for="no-option">No</label>
<input id="no-option" type="radio" name="hotel-stay" />
</fieldset>
<!-- Checkbox group -->
<fieldset>
<legend>
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<label for="location">Location</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="price">Price</label>
<input type="checkbox" id="price" name="price" value="price" />
</fieldset>
```
- **Focused state**: this is the state of an input field when it is selected by the user.
## Working with HTML Table Elements and Attributes
- **Table element**: used to create an HTML table.
- **Table Head (`thead`) element**: used to group the header content in an HTML table.
- **Table Row (`tr`) element**: used to create a row in an HTML table.
- **Table Header (`th`) element**: used to create a header cell in an HTML table.
- **Table body (`tbody`) element**: used to group the body content in an HTML table.
- **Table Data Cell (`td`) element**: used to create a data cell in an HTML table.
- **Table Foot (`tfoot`) element**: used to group the footer content in an HTML table.
- **`caption` element**: used to add a title of an HTML table.
- **`colspan` attribute**: used to specify the number of columns a table cell should span.
```html
<table>
<caption>Exam Grades</caption>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Davis</td>
<td>Alex</td>
<td>54</td>
</tr>
<tr>
<td>Doe</td>
<td>Samantha</td>
<td>92</td>
</tr>
<tr>
<td>Rodriguez</td>
<td>Marcus</td>
<td>88</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average Grade</td>
<td>78</td>
</tr>
</tfoot>
</table>
```
## HTML Tools