Jen Kramer
AnnieCannons
HTML Forms
2 hours, 4 minutes
CC
Course Description
Learn how to create forms using HTML and CSS. You’ll be able to differentiate between the different types of input fields that exist in HTML and when to use each one. Then, you’ll learn how to handle form submission, form submission issues, and form styling.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
Close
Course Details
Published: September 3, 2019
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Form Basics
Section Duration: 14 minutes
-
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. -
Jen adds a form tag to the HTML file and places an input tag with the type "text" inside of the form. -
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
Section Duration: 50 minutes
-
Jen introduces the input elements of type "tel" and "email", which are used to let the user enter a telephone number or email address. -
Jen uses the fieldset and legend HTML tags to group form elements. -
Jen instructs how to add an input to collect a date value. -
Jen demonstrates how to assign a min and max range to a "number" type input. -
Jen instructs how to create multiple buttons where only one can be selected at a time. -
Students are instructed to complete an exercise using radio buttons. -
Jen goes through the solution for the radio buttons exercise. -
Jen demonstrates how to code a select list input into the form. -
Jen explains what name and value do within input elements. -
Jen explains how to configure an option or radio button value to be preselected using the selected attribute. -
Jen inserts a textarea tag into the form so the user can record multiple lines of text. -
Jen demonstrates how to put placeholder text within an input field. -
Jen codes a checkbox field into the form. -
Jen answers questions about input types regarding the for attribute, placeholder text, and the phone number field.
Form Submission
Section Duration: 17 minutes
-
Jen codes a submit button that will connect the backend to the information that was given to 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. -
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. -
Jen goes over various things students can look for when debugging why their form is not submitting.
Form Styling
Section Duration: 41 minutes
-
Jen demonstrates how to use an image in a folder to create a background for the form page. -
Jen continues to develop the form by adding CSS rules to enhance spacing and border appearance. -
Jen questions students about what display value the labels should have and the result is a much better looking form. -
Jen applies styles to the textarea and select form elements. -
To make the submit button react to a user hovering over it, Jen adds a hover state to the submit button. -
Jen gives the inputs some breathing room. -
Jen demonstrates how to exclude certain tags from being styled by adding the not selector and rounds input corners. -
Jen gives the labels some breathing room. -
Jen brings attention to exercises from the course notes for students who would like to do more.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops