London-9-George Primentas-HTML/CSS-Challenges-Week-3 - #208
London-9-George Primentas-HTML/CSS-Challenges-Week-3#208GeorgePrimentas wants to merge 1 commit into
Conversation
Basic HTML
There was a problem hiding this comment.
This is a very good submission.
I have marked the checklist provided in the Readme for you below. You could also do it yourself next time and update the Readme.
- I have used HTML and CSS only.
HTML
- My form is semantic html.
- All inputs have associated labels.
- My Lighthouse Accessibility score is 100.
- I require a valid name. I have defined a valid name as a text string of two characters or more.
- I require a valid email.
- I require one colour from a defined set of 3 colours.
- I require one size from a defined set of 6 sizes.
- I require one date from a constrained date range.
CSS
- I show which element is focused.
- My Lighthouse Accessibility score is 100.
Did you check the lighthouse accessibility score, yours is 100, so well done.
Have a look at this page if you have not already.
|
|
||
| --> | ||
| <label for="full-name">Full name:</label> | ||
| <input id="full-name" type="text" required /> |
There was a problem hiding this comment.
After quick google search for the right regex pattern:
<input id="full-name" type="text" pattern="[a-zA-Z]{2,}" title= "Name must have two or more characters"required />
| </label> | ||
|
|
||
| <label for="date">Delivery date:</label> | ||
| <input id="date" type="date" required/> |
There was a problem hiding this comment.
You can use the min and max attributes on your date inputs, e.g. <input id="date" type="date" required min = "1990-01-01" max="1991-12-12"/>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
| @@ -0,0 +1,21 @@ | |||
| input[type=text], input[type=email], input[type=date], select { | |||
| width: 15rem; | |||
Basic HTML