As mentioned yesterday, I decided to spend today practicing my HTML review so far by framing up an order form for a local company selling delicious-looking appetisers via whatsapp order. I scoured their FB page to gather the relevant details and got to work.
Not everything I did in this form was included in yesterday’s review, but it brought back enough that I either recalled what to do or knew where to look to get answers to the questions that arose, such as:
- How do I handle the subcategories of wonton types? Nesting a new <ul> within the relevant <li>. This makes a kind of intuitive sense and is helpful for indexing and accessibility.
- Should I use a table to lay out my order form? Short answer, nope.
- How do I set relative date limitations in the delivery date field? That’s gonna be a JS addition as HTML doesn’t accomodate those kinds of values in the min/max attributes.
- Should I use <select> or more <input> checkboxes to handle the mixed wonton orders? Either would do and I went with <select> for variety (the rest of the section is all checkboxes), but there are inherent pitfalls in using a format that requires a special note that the customer can select multiple, particularly if they don’t already know how to do it.
- What type of <input> is best for phone numbers? “tel” will do.
This was great practice and I look forward to building it out further as I continue my coding review. If you’d like to check out the coding, I’ve set up a project on codepen here.
Tomorrow: Form validation!
undefined 