AND SOLUTIONS RATED A+
✔✔Form input validation to follow a string (code line example) that has 4 valid inputs:
Banana, banana, Cherry, or cherry. Make sure you understand why only those four are
valid. - ✔✔<input id="choose" name="i-like" required pattern="[Bb]anana|[Cc]herry" />
✔✔<input ????="number"/> - ✔✔type
✔✔what is <fieldset> - ✔✔group several controls and labels within a web form. Regroup
in semantic ways
<form>
<fieldset>
<legend></legend>
<input type="radio" id="S1" name="S1" value="S1">
<label for="S1">S1</label><br>
<input type="radio" id="S2" name="S2" value="S2">
<label for="S2">S2</label><br>
</fieldset>
</form>
✔✔what is <datalist> - ✔✔Input form to give the user different options (dropdown list)
remember this
✔✔what is <keygen> - ✔✔Create hidden keys for encryption within HTML using RSA.
Not used anymore but still:
remember this
✔✔what is <output> - ✔✔makes use of the FOR attribute in froms. Shows the value
calculated by entries
remember this
✔✔How to set a string or node as the children of a element - ✔✔Element.after()
i.e. a.after(span);
js code. () are after the element
remember this
✔✔Input validation
Phone number - ✔✔pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
✔✔Input validation ipv4 - ✔✔pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"
do you see the difference between the phone example with [ ] and this example with \ to
group the segments? Here I also used \d for any digits instead of [0-9]
remember this
, ✔✔Input validation country code (3 letter code like USA CAN GER) - ✔✔pattern="[A-
Za-z]{3}
✔✔pattern understanding
(?=^.{8,}$) - ✔✔there are at least 8 characters. See the , after 8? That means 8 or
infinity
?=look, ^=start with, .=any character, 8,= 8 or more, $=end
remember this
✔✔pattern understanding
(?=.*\d) - ✔✔there is at least a digit
remember this
✔✔pattern understanding
(?=.*\W+) - ✔✔there is one or more "non word" characters (\W is equivalent to [^a-zA-
Z0-9_])
capitalization flips it to non. Like /D would be non digit
✔✔pattern understanding
(?![.\n]) - ✔✔there is no space or newline
!=no
remember this
✔✔pattern understanding
(?=.*[A-Z]) - ✔✔there is at least an upper case letter
remember this
✔✔pattern understanding
(?=.*[a-z]) - ✔✔there is at least a lower case letter
remember this
✔✔pattern understanding
.*$ - ✔✔in a string of any characters
comes at the end
✔✔pattern understanding bonus round
.
^
\d
\D
\s
x(?=y)
! - ✔✔. matches any single character from class