Forms for collecting data & Forms validation Copy

Introduction

Forms are an essential part of our site. The users provide data in a form, we collect that data and we can do various things. Therefore we can say that forms are the user’s gateway into our back end.

For this reason forms need to be very simple, clear and we need to do them right. This is due the fact that we not only want the correct data to be collected but we also want the users to have a nice experience while submitting their data so as not to lose them.

So it is important to specify the proper types of inputs for each possible data item. There are many possible ways to collect a piece of data, however there is only one way that is easiest for the user and eliminates the chances the user inputting erroneous data.

Learning Objectives

The importance of forms in a site.
How to construct a basic form.
HTML form attributes (action, method etc…)
How to specify which path the form gets submitted to.
When we submit using GET vs POST requests.
HTML Form Elements.
When we use checkboxes instead of radio buttons.
When we use combobox/dropdown instead of a text field.
How to make a very large text field.
How to link elements with their labels.
How to link element selections together (e.g. check boxes).
What other options we have of our "submit" button to say instead of "submit".
What is client-side form validation.
validation attributes on form elements

Study

Study Shay Howe on Forms
Browse through Form Basics from MDN to see if you’ve missed anything.
Go through this interactive screencast by Scrimba: HTML Forms and Input

MUST READ

Read the What is accessibility? section from Google’s page on Accessiblity which contains important notes about form accessibility.

MUST READ

Carefully study and bookmark this Forms Accessiblity Checklist and always ensure that your forms are created with these rules in mind

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

HTML Forms Docs

Introduction to Forms validation

Forms are a very important part of most websites. There are several types of forms such as sign-up forms, search forms and contact forms. Almost every website has one or more types of a form. For this reason HTML5 and JavaScript have some handy built-in methods.

HTML form validation is really important and this tutorial covers pretty much everything you need to know.
For Reference, this document covers the JavaScript validation API in a more concise format. These functions were explained in the previous article. With HTML forms, the inputs are validated upon form submission, but you can use these functions to check validity whenever you like (such as when a user clicks or tabs out of a specific input field).

Additional resources

web.dev

Back to Lesson