Table of Contents
Form Basics
-
Forms Setup
Jen sets the stage for creating forms by instructing students how to retrieve the template files on GitHub, open the files in VSCode, and modify VSCode's auto close settings. -
Form Tag
Jen adds a form tag to the HTML file and places an input tag with the type "text" inside of the form. -
Labels & Inputs
After discussing form accessibility, Jen adds a label tag and explains how the label's for attribute, the input's ID, and the input's name attribute are related.
Form Input Types
-
Input Types Phone & Email
Jen introduces the input elements of type "tel" and "email", which are used to let the user enter a telephone number or email address. -
Fieldset & Legend
Jen uses the fieldset and legend HTML tags to group form elements. -
Input Types Date & Number
Jen instructs how to add an input to collect a date value. -
Input Range
Jen demonstrates how to assign a min and max range to a "number" type input. -
Radio Button
Jen instructs how to create multiple buttons where only one can be selected at a time. -
Radio Button Exercise
Students are instructed to complete an exercise using radio buttons. -
Radio Button Solution
Jen goes through the solution for the radio buttons exercise. -
Select List Input
Jen demonstrates how to code a select list input into the form. -
Input Name & Value
Jen explains what name and value do within input elements. -
Selected Attribute
Jen explains how to configure an option or radio button value to be preselected using the selected attribute. -
Textarea
Jen inserts a textarea tag into the form so the user can record multiple lines of text. -
Placeholder
Jen demonstrates how to put placeholder text within an input field. -
Checkbox
Jen codes a checkbox field into the form. -
Input Q&A
Jen answers questions about input types regarding the for attribute, placeholder text, and the phone number field.
Form Submission
-
Submit Button
Jen codes a submit button that will connect the backend to the information that was given to the form. -
Submitting the Form
After discussing what students have learned about forms so far, Jen discusses how to use form actions, form methods and hidden input fields to enable form submission. -
Submitting with JavaScript
Jen demonstrates how to link the form to a JavaScript file which performs error-checking on form values before it allows the form to be submitted. -
Debugging Submit Issues
Jen goes over various things students can look for when debugging why their form is not submitting.
Form Styling
-
Adding a Background Image
Jen demonstrates how to use an image in a folder to create a background for the form page. -
Form & Fieldset Styling
Jen continues to develop the form by adding CSS rules to enhance spacing and border appearance. -
Label & Input Display
Jen questions students about what display value the labels should have and the result is a much better looking form. -
Textarea & Select Styling
Jen applies styles to the textarea and select form elements. -
Button Hover State
To make the submit button react to a user hovering over it, Jen adds a hover state to the submit button. -
Input Spacing
Jen gives the inputs some breathing room. -
Exclude Selector
Jen demonstrates how to exclude certain tags from being styled by adding the not selector and rounds input corners. -
Textarea & Select List Spacing
Jen gives the labels some breathing room. -
Further Exercises
Jen brings attention to exercises from the course notes for students who would like to do more.