How to create multi-column data entry form using CSS in Asp.Net?


Tags: asp.net,css,forms,data-entry

Problem :

While converting a desktop application to a web app, I've run across my ignorance when attempting to implement a multi-column data entry form using CSS. I'm resolved to avoid using tables for this type of thing, and while I found a good reference to laying out a data entry form, I can find nothing that applies to multiple-column layouts like this one:

enter image description here

Can anyone point me in the right direction?



Solution :

Here's a screen shot, please notice how I demonstrated the tab order with numbers:

alt text

Please note that RedFilter's answer has a different tab order, which I have demonstrated in the screenshot below:

alt text

(code below complete with ASP.NET validators)

CSS (cross browser friendly)

p
{
 margin:1em 0;
}
label
{
 float:left;
 width:5em;
 text-align:right;
 margin-right:0.5em;
}
input[type="text"]
{
 width: 10em;
}
.left-column, right-column
{
 float:left;
}
.left-column
{
 margin-right:1em;
}​
.textarea-label
{
 float:none;
}
textarea
{
 height:5em;
 width:35em;
}​

HTML

<div class="left-column">
  <p>
    <label for="tbDepartment">Department:</label>
    <asp:TextBox ID="tbDepartment" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valDepartment" TabIndex="-1" runat="server" ControlToValidate="tbDepartment">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
    <label for="tbFund">Fund:</label>
    <asp:TextBox ID="tbFund" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valFund" TabIndex="-1" runat="server" ControlToValidate="tbFund">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
  <label for="tbProgram">Program:</label>
    <asp:TextBox ID="tbProgram" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valProgram" TabIndex="-1" runat="server" ControlToValidate="tbProgram">&nbsp;*</asp:RequiredFieldValidator>
  </p>
</div>
<div class="right-column">
  <p>
    <label for="tbProject">Project:</label>
    <asp:TextBox ID="tbProject" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valProject" TabIndex="-1" runat="server" ControlToValidate="tbProject">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
    <label for="tbSpeedKey">Speed Key:</label>
    <asp:TextBox ID="tbSpeedKey" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valSpeedKey" TabIndex="-1" runat="server" ControlToValidate="tbSpeedKey">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
    <label for="tbAward">Award:</label>
    <asp:TextBox ID="tbAward" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valAward" TabIndex="-1" runat="server" ControlToValidate="tbAward">&nbsp;*</asp:RequiredFieldValidator>
  </p>
</div>​
<div>
  <p>
    <label class="textarea-label" for="taProjectDesc">Project Description:</label>
  </p>
  <p>
    <asp:TextBox ID="taProjectDesc" runat="server" TextMode="MultiLine" />
    <asp:RequiredFieldValidator ID="valProjectDesc" TabIndex="-1" runat="server" ControlToValidate="taProjectDesc">&nbsp;*</asp:RequiredFieldValidator>
  <p>
</div>

    CSS Howto..

    JQuery : How to disable mouse move vertically?

    how do i include css based on screen size of the device

    CSS how to select nav and li tags but exclude specified class?

    I want to apply an existing CSS style to all labels on a page. How?

    How to place 2 div side by side (alternative solution)

    How to format date elements (year, month, date) individually with CSS and Rails i18n?

    How to Format text boxes with Css

    How to declare JavaScript and CSS XHTML-compatible?

    Show first image and display none other image

    How to use a lower resolution image for mobile?

    How to create shape image border with clickable container?(use HTML and CSS)

    How do I keep a horizontal column of divs in the same row when it is extends past the screen?

    How do I apply padding or a margin to this heading displayed as a table-cell?

    How do I get my Bootstrap webpage to have a full width

    how to use CSS opacity to let background bleed through in IE8?

    CSS how to transition(with transform) a parent and child both, differently

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

    How to select first a element of li with CSS?

    How to use padding and lengthen bootstrap search bar?

    How do I make numbered paragraphs (HTML5/CSS3)

    How to echo individual css classes for li's?

    How Is This Effect Achieved? HTML/CSS/jQuery [closed]

    css - can't get dropdown nav to show above content below it

    Slideshow using Jquery, images do not fit window

    How to change a position of css sprite image?

    How to fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in joomla

    Box-shadow is not showing or z-index

    how to reposition label which sits on top of the checkbox

    How do I achieve this animation using javascript/jquery? [closed]

    How to make centered fixed width body responsive?