Hello. I haven’t created an HTML form in ages, and could use some advice on the best way to tackle things.
I have a checkout/registration form that is pretty vanilla, where most of it is just a label on top and an input field beneath for each item.
But then I have a few areas where things are smaller and so I put them side by side (e.g. “State” and “Zipcode”, or “First Name” and “M.I.”).
Also, in the shopping basket section, I was going to have a thumbnail or the item being purchased on the far left, then the Product Title, Description, Price to the right of it. (So it would look like to blocks side by side.)
I guess my question is more about how I put things side by side, because I have forgotten how.
Do I use floats?
Ideally my solution would be mobile-friendly. And I just spent the last two nights reading every MDN guide on Flexbox, although I cannot say that I can go out and code like an expert yet - mostly bcause I’m not sure when and where to really use Flexbox.
So can someone give me some tips on the best way to approach this?
I guess it would help to see exactly what you already have and users could then be able to comment with suggestions.
Remember there are numerous ways too achieve the same result, CSS floats, Flex, tables and grids spring to mind. The ultimate choice depends on content so please also supply simple and extreme content examples.
Personally I would go for an example I could understand because it is easier to modify. Just cutting and pasting examples make modifications difficult but great for learning from your mistakes