Colt Steele's The Web Developer Bootcamp 2021- HTML5 Forms and Form Validation 
Tags: html, webdev, womenintech
Published: 2021-01-12 17:34:56

I've graduated from HTML to CSS in Colt Steele's <a href="https://www.udemy.com/course/the-web-developer-bootcamp/">'The Web Developer Bootcamp 2021' </a>. 

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. 

<img width="100%" style="width:100%" src="https://media.giphy.com/media/1jl173guBKkbvC03rQ/giphy.gif">

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!) 

<img width="100%" style="width:100%" src="https://external-preview.redd.it/N_bB0Oszfuks9wLTax6viC4Hh9FzHgpMcpYiuUHoQQU.jpg?auto=webp&s=22d6a707521ffee7ea809ec405a10477ee7bd2b8">

I began taking notes on the course on <a href="https://github.com/soniacweb/colt-webdevbootcamp-notes">github</a> - feel free to check it out, I'll endeavour to commit to it regularly.  

<h1>HTML Forms</h1>

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

<img width="100%" style="width:100%"  src="https://media.giphy.com/media/MzId7vT7YOUzm/giphy.gif" >

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. 

<h1>HTML form tags:</h1>

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>`

<h1>Common input types</h1>

`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 %}

<h1>HTML5 Form Validations</h1>

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