HTML Tables and Forms Review

# --interactive-- ## 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`, `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. - **`name` attribute**: used to assign a name to an input field, which serves as the key when form data is submitted. For radio buttons, giving them the same `name` groups them together, so only one option in the group can be selected at a time. - **`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 with input types such as `number` to specify the minimum value allowed in the input field. - **`max` attribute**: can be used with 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. :::interactive_editor ```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. :::interactive_editor ```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. :::interactive_editor ```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`. :::interactive_editor ```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. :::interactive_editor ```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" value="yes" /> <label for="no-option">No</label> <input id="no-option" type="radio" name="hotel-stay" value="no" /> </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. :::interactive_editor ```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 - **HTML validator**: a tool that checks the syntax of HTML code to ensure it is valid. - **DOM inspector**: a tool that allows you to inspect and modify the HTML structure of a web page. - **Devtools**: a set of web developer tools built directly into the browser that helps you debug, profile, and analyze web pages.