formatting HTML form layout

Question

I have a HTML form which I need to format. It is a long form and people have to scroll(Vertically) to access the entire from. Now, I have a lot of white space on the right side of the form fields, I want to divide the form into three sections and display Three sections Horizontally as compared to one long vertical form.

Current Layout:

Field1
Field2
Field3
Field4
Field5
Field6

New Layout:

Field1     Field3     Field5
Field2     Field4     Field6

What is the best way of approaching this?

Thanks in advance

what have you tried? a simple approach may be to use a table but a lot depends on how your page is set up — Borophyll
– Borophyll, Commented Jul 13, 2012 at 18:21
Read about Twitter Bootstrap. It's a "CSS Framework", and it's amazing. But, first of all, go learn CSS. W3Schools is a great place to start. — Andre Calil
– Andre Calil, Commented Jul 13, 2012 at 18:22

Jørgen · Accepted Answer · 2012-07-13 18:25:20Z

2

In order to acheive the correct tab order (if you don't want to set them manually), you should create one wrapper element for each column and have them float next to eachother.

<div class="col">
<label>Field1 <input type="text"/></label>
<label>Field2 <input type="text"/></label>
</div>
<div class="col">
<label>Field3 <input type="text"/></label>
<label>Field4 <input type="text"/></label>
</div>
<div class="col">
<label>Field5 <input type="text"/></label>
<label>Field6 <input type="text"/></label>
</div>

CSS:

.col{
  width: 30%;
  float: left;
}

...and here's the jsFiddle.

answered Jul 13, 2012 at 18:25

Jørgen

9,2109 gold badges51 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shyju · Accepted Answer · 2012-07-13 18:26:22Z

1

You can simply use DIV and CSS

<div class="divContainer">
@foreach(var item in Model.YourCollectionProperty)
{
  <div class="divItem">
       Some content here
  </div>
}
</div>

Have this CSS now

.divContainer
{
   width:100%;
}
.divItem
{
  width:33%; float:left;
}

answered Jul 13, 2012 at 18:26

Shyju

220k106 gold badges421 silver badges499 bronze badges

Comments

user1484136 · Accepted Answer · 2012-07-13 18:23:00Z

0

You can either use a table with 3 columns, or do divs.

answered Jul 13, 2012 at 18:23

user1484136

Comments

HatSoft · Accepted Answer · 2012-07-13 18:25:02Z

0

I would suggest you use div with css for layouts not table

table is good for tabular data but if need more than that then div is better

http://www.w3schools.com/html/html_layout.asp

answered Jul 13, 2012 at 18:25

HatSoft

11.3k3 gold badges30 silver badges43 bronze badges

Collectives™ on Stack Overflow

formatting HTML form layout

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related