diff --git a/curriculum/challenges/english/25-front-end-development/review-html-tables-and-forms/671a872c17382a582e455c4c.md b/curriculum/challenges/english/25-front-end-development/review-html-tables-and-forms/671a872c17382a582e455c4c.md index c68f8d3d40e..8d9d7c57249 100644 --- a/curriculum/challenges/english/25-front-end-development/review-html-tables-and-forms/671a872c17382a582e455c4c.md +++ b/curriculum/challenges/english/25-front-end-development/review-html-tables-and-forms/671a872c17382a582e455c4c.md @@ -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 +
+ +
+``` + - **`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 + + + + + + + + +``` + - **`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 +
+ +
+``` + - **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 +
+ + +
+``` + +- **`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 + + + +``` + +- **`fieldset` element**: used to group related inputs together. +- **`legend` element**: used to add a caption to describe the group of inputs. + +```html + +
+ Was this your first time at our hotel? + + + + + + +
+ + +
+ + Why did you choose to stay at our hotel? (Check all that apply) + + + + + + + +
+``` + - **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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exam Grades
Last NameFirst NameGrade
DavisAlex54
DoeSamantha92
RodriguezMarcus88
Average Grade78
+``` ## Working with HTML Tools diff --git a/curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md b/curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md index a445eb1b186..4168ddeb1a2 100644 --- a/curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md +++ b/curriculum/challenges/english/25-front-end-development/review-html/671a883163d5ab5d47145880.md @@ -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 +
+ +
+``` -- **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 + + + + + + + + +``` + +- **`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 +
+ +
+``` + +- **Explicit form association**: inputs can be associated with labels by using the `for` attribute on the `label` element. + +```html +
+ + +
+``` + +- **`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 + + + +``` + +- **`fieldset` element**: used to group related inputs together. +- **`legend` element**: used to add a caption to describe the group of inputs. + +```html + +
+ Was this your first time at our hotel? + + + + + + +
+ + +
+ + Why did you choose to stay at our hotel? (Check all that apply) + + + + + + + +
+``` + +- **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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exam Grades
Last NameFirst NameGrade
DavisAlex54
DoeSamantha92
RodriguezMarcus88
Average Grade78
+``` ## HTML Tools