Forms for collecting data (v1)

Introduction

Forms are one of the most important parts of your site. They are your user’s gateway into your back end — the user provides data in a form and you do stuff with it.

Forms are important to get right not just because you want the correct data getting sent to your back end but also because you want the experience of interacting with the form to be as dead-stupid-simple as humanly possible so you don’t lose users while they are doing it. You need to specify the proper types of inputs for each possible data item, since there are often multiple ways to collect a piece of data but only one way which is easiest for your user and eliminates the chances of that user inputting erroneous data.

Learning Objectives

  • Why are forms probably the most important part of your site?
  • How do you construct a basic form?
  • How do you specify which path the form gets submitted to?
  • When would you want to submit using GET vs POST requests?
  • What are all the possible form element types?
  • When should you use checkboxes instead of radio buttons?
  • When should you use a combobox/dropdown instead of a text field?
  • How do you make a very large text field?
  • How do you link elements with their labels?
  • How do you link element selections together (e.g. check boxes) so they are nicely formatted when your server receives them?
  • What should your "submit" button probably say instead of "submit"?

Study

  1. Study Shay Howe on Forms

  2. Browse through Form Basics from MDN to see if you’ve missed anything.

  3. Go through this interactive screencast by Scrimba: HTML Forms and Input

MUST READ

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

MUST READ

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

Additional Resources

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack