lesson 4: registration form

MDN: CSS units (to look up what vh, rem, etc are)
html forms
final result: 4: registration form final code

—

Learn HTML Forms by Building a Registration Form: Step 8 | freeCodeCamp.org
- Setting the body width: 100% and height: 100vh should in theory make the body exactly the size of the window, with no scrollbars. But by default it does add scrollbars, i.e. it made the body bigger than the screen. What gives? Well, there’s some margin added by default. If you explicitly set body to have margin: 0 then the scrollbars go away and it’s exactly the size of the window, as expected.
  - Weird thing when the margins are left at their default: the extra space added when height is 100vh is more than the extra space added when the height is 100% . Why does defining in terms of viewport create more margin than defining relative to the parent element, which in this case is just <html>?
  - And interesting, the text in the next step implies that FCC thinks it should’ve caused only a horizonal scrollbar; they don’t acknowledge the vertical one. So i guess that’s consistent with 100vh seeming to add more margin than 100%—they expected that only the one defined in vh would end up with margin added.
  - They say “the default margin added by some browsers.” Try this in some different browsers to compare!
- 100vh means 100% of the viewport's height
- what’s the definition of viewport anyway?
- Why do they have us use a percent for one and vh for the other? Is it because 100% height could take up more than one screen length, whereas 100vh takes up only exactly one screen length?
- What would happen if the parent element of something with height: 100vh was more than one screen long?
you can use attributes to add validation to <input>, like minlength , or even match regex with pattern="[a-z0-5]{8,}"
- but someone pointed out that you don’t necessarily want to use this client side validation for passwords, because those should get validated server side, and you don’t want the two sets of validation criteria to clash. dunno if it applies to other fields too.
- the built in validation that’s automatic to type="email" only checks for it having a @ and period—better email validation methods are available elsewhere
- be careful to take edge cases and all possible populations into account when you make restrictions for validation. for instance, some forms might enforce a character minimum on names and then be unable to accept 2-letter surnames like are common among chinese folks. also, last names shouldn’t be required because some people only have one name. and some people have more than one last name!

questions

step 35: <select> options
any difference between using an input element vs button element for the submit button? is there a best practice about it?
are there any guidelines for when to use a select dropdown vs when to use a series of radio buttons?