Colt Steele's The Web Developer Bootcamp 2021- HTML5 Forms and Form Validation

I've graduated from HTML to CSS in Colt Steele's 'The Web Developer Bootcamp 2021' .

A comprehensive course he recently launched at the beginning of the new year, the online dev community and the adroit Udemy community have been buzzing over the complete overhaul.. and frankly? I can see why.

Colt is an in-person instructor in the Seattle Bay area, and me being a bootcamp grad and software development teaching assistant, I was curious to see how his online material faired. I'll be detailing my key learnings for each section on dev.to and would be interested to hear your thoughts! #begentle

Colt's course boasts a humble 63 hours on-demand video, 47 articles, 122 downloadable resources, 62 coding exercises, and the standard certificate of completion.

As most of us already are well aware, 63 hours of on-demand videos and tutorials doesn't necessarily equate to exactly 63 hours of studying. This is a behemoth course. I can't speak for everyone, but it takes perhaps a day or two to understand a 25 minute video introducing a new concept.

And that's perfectly okay! Everyone learns at their own pace, and I'm the pedantic type that needs to understand every nut and bolt before I can move onto the next topic.

I enrolled in Colt's course for a number of reasons, but largely to revise topics I was already comfortable with in lockdown, while learning old concepts that I wasn't very comfortable with yet (Hello, JavaScript, my old friend!)

I began taking notes on the course on github - feel free to check it out, I'll endeavour to commit to it regularly.

HTML Forms

I completed the HTML portion of the course in one sitting- 10% of the course done! *pats self on back *

BUT I came to the embarrassing realisation I hadn't paid much attention to forms aside from acknowledging we all use them in practically every app we've come across to input personal information.

The verbatim definition taken from MDN:

"The HTML <form> element represents a document section containing interactive controls for submitting information."

Forms are a collection of HTML elements for users to input values. They are for information collecting.

HTML form tags:

The <form> element is the container tag for a range of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

A simple search can be from a form- it fires across a HTTP request to a server to retrieve results for the search.

• The action attribute- specifies WHERE (usually servers) the form data should be sent.

• The method attribute specifies which HTTP method is being used, eg the GET method.

• <form action="/query" method="get"></form>

The label tag is considered important for accessibility. It comes with the for attribute, which needs to match the id attribute of the input.

• <label for="inputID">Your Name</label>

Common input types

Type is where the magic happens- specifying a `type' can dramatically alter the input's behaviour and appearance.

• <input type="text"></input>
  • types include:
    • time
    • text
    • password
    • color
    • number

The placeholder attribute - this is the initial text specifying (and prompting) the user in what they should include in the input.

Here's a fairly basic, ugly form for you to admire:

{% codepen https://codepen.io/soniaweb/pen/BaLqWra %}

HTML5 Form Validations

HTML5 has some built in browser validations on the frontend that we can make work to our advantage.

• The required attribute: this is a boolean attribute. When present, it marks the input field as mandatory to complete.

• minlength, maxlength attributes - defines the minimum/maximum number of characters permitted before submission.

• min, max attributes - specifies the min/max values in an input

• type="email" - expects a certain format/pattern -
  defines a field for an e-mail address and automatically validates assuming it is a correctly formatted email address.

• type="url" - expects a url formatted/patterned input before validation.

And that about wraps it up without boring everyone- I often overlooked the importance of forms and thanks to lockdown revision, I possess an appreciation for them now. Hopefully it's the start of a beautiful friendship.

Further Resources:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
https://www.tutorialspoint.com/html/html_forms.htm
https://www.youtube.com/watch?v=fNcJuPIZ2WE