Kevin Powell - Community•12mo ago

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?

Callum

CodePen

Food Ordering Menu

...

6 Replies

snxxwyy•12mo 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•12mo 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•12mo ago

I don’t really think you need the h2 imo.

CDL•12mo 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♚𝕂𝕚𝕟𝕘•12mo ago

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•12mo ago

Ah. Appreciate that, thank you, I tried looking for some but obviously failed miserably in my search.

Gaming

Programming

Customizing Forms - What are some tips and tricks?