Help with Forms

HTML & CSS
1

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?

Thanks.

2

I think what I did in years past was to set the input label and the input field to block and maybe inline-block when I had side by side fields, but I don’t really remember.

3

I guess it would help to see exactly what you already have and users could then be able to comment with suggestions.

Edit:

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 :slight_smile:

4

Hi @John_Betong.

Am working on some code right now before bed.

In the mean time, here is a simple mockup…

Form Mockup
Form Mockup952×1142 28.3 KB

5

Showing the code would be helpful :slight_smile:

Edit:

Also note that the code should be text and wrapped in ``` rather than an image/screen dump so users can copy and paste to try on their own computers…

6

Note that “Step 1: Review Cart” has been dealt with here…

coothead

2 Likes
7

@coothead,

Yeah, good point, I already forgot about that…

(See, I have too much in my head to remember!) :biggrin:

One of the things that confuses me about Flexbox is how to implement it…

When I think of using Flexbox I think of applying it to he entire web page. But based on yoru comment above, now I am thinking maybe you can use Flexbox just in certain aprts of a web page?

Am still working n my code…

8

No, it is much more flexible than that. :rofl:

coothead

9

@coothead,

There is no substitute for experience…

So while I am working on my form, do you agree with what I said in post #2 about just using display: block and maybe display: inline-block for the labels/input fields?

10

@UpstateLeafPeeper,

here is the very basic form skeleton HTML/CSS code…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
#account fieldset {
    border: 0;
 }
#account input{
    margin-bottom: 1em;
 }
#account span {
    display: inline-block;
 }
</style>

</head>
<body> 

<div id="container">

<form id="account" action="#">

 <fieldset>
  <label for="uname">Username</label><br>
  <input id="uname" name="username" type="text" required><br>
  <label for="email">Email</label><br>
  <input id="email" name="email" type="email" required>
 </fieldset>

 <fieldset>
  <span>
   <label for="fname">First Name</label><br>
   <input id="fname" name="firstname" type="text" required>
  </span>
  <span>
   <label for="mi">M.I.</label><br>
   <input id="mi" name="MI" type="text" required>
  </span><br>
  <label for="lname">Last Name</label><br>
  <input id="lname" name="lastname" type="text" required>
 </fieldset>
 
 <fieldset>
  ...and so on...
 </fieldset>
</form>

</div>

</body>
</html>

coothead

11

@coothead,

Yeah, that is basically what I was thinking, except I was going to add display: block to the input and label.

Maybe input and label are block items by default?

12

No, I just used the <br> element. :winky:

coothead

13

Oh, so you are saying they are not block items?

I guess using display:block would make sense then for most of my label/input pairs.

14

Yes. :winky:

coothead

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.