Customizing Forms - What are some tips and tricks?

I'm building a food ordering site, very simple one for now, and I'm trying to customize the form layout without much success. https://codepen.io/Laing91/pen/bGOaEwr There will only be a few sections until I get it up and running and look to add more, potentially, so I'm not sure how you would separate each selection? Choose a bun: gluten, glutenfree, vegan (lettuce?) Choose toppings: cheese, onions, ketchup, mustard Choose hot dog: meat, vegan(?) Right now it's all in a single row, would you use span or divs to separate each section inside the Form? or what is a common way to create this layout?
6 Replies
snxxwyy
snxxwyyβ€’15mo ago
You would use divs, spans are used to style text mainly. And then I’d recommend using something like a flow utility class for spacing.
CDL
CDLOPβ€’15mo ago
<h2>Choose Your Toppings:</h2>
<label for="toppings">Select Toppings:</label>
<label for="cheese">Cheese</label>
<input type="checkbox" id="cheese" name="toppings" value="cheese">
<label for="onions">Onions</label>
<input type="checkbox" id="onions" name="toppings" value="onions">
<h2>Choose Your Toppings:</h2>
<label for="toppings">Select Toppings:</label>
<label for="cheese">Cheese</label>
<input type="checkbox" id="cheese" name="toppings" value="cheese">
<label for="onions">Onions</label>
<input type="checkbox" id="onions" name="toppings" value="onions">
is the h2 AND label for Selecting toppings necessary, or can I just use 1 or the other?
snxxwyy
snxxwyyβ€’15mo ago
I don’t really think you need the h2 imo.
CDL
CDLOPβ€’15mo ago
I figure, I just didn't really know how to style it similarily, such as
Select your toppings:
Cheese / Onions /
Ketchup / Mustard /
Select your toppings:
Cheese / Onions /
Ketchup / Mustard /
Chooβ™šπ•‚π•šπ•Ÿπ•˜
When designing something like this for the first time, it is useful to see what others have done. I did an image search for food service software and found this: https://www.ezschoolapps.com/assets/images/school-lunch/lunch-point-of-sale-software,w_600.png Look for more examples like that and decide which features to emulate and which ones you need to customize to fit the needs of your application. Also note that this specific type of application is usually designed for touch screens. The select element would not work well in that situation.
CDL
CDLOPβ€’15mo ago
Ah. Appreciate that, thank you, I tried looking for some but obviously failed miserably in my search.
Want results from more Discord servers?
Add your server