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..

    How to make the content of a span wrap onto the next line in an embedded

    CSS/XHTML: Show div after a specific count of table rows

    How to display an Image after the main page

    How to go about making an image move up in the div on hover

    How to remove space above the
    tag?

    CSS: How to get rid of the extra space of first line of a paragraph?

    How to apply css to div content based on regex

    How to make a site have a built in user-friendly editor?

    How to hide crossed-out CSS lines on firebug?

    Uncaught SyntaxError: Unexpected token . AKA how to check for an Id in jQuery [closed]

    How to make a resizable menu centered on the middle?

    How to make a svg-filled background go animating by pure CSS?

    how to achieve this this horizontal line from css or bootstrap

    How to apply properties to 3 types of input on HOVER?

    How to add a border around a canvas?

    How to add css for specific input type text

    How can I make LIs push their siblings to the same height?

    How to style multiple instances differently of the same jquery control?

    How do I get spotlight/shadow position to remain exactly same relative horizontal center position regardless of zoom?

    How do I apply properties to a previous sibling on hover?

    How can I center Twitter-Bootstrap 3 navbar buttons?

    Why my tabs (i.e HOME, ABOUT ME..) doesn't show the corresponding paragraph or section?

    How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

    css: how to display prev and next links outside slider

    How to check if two elements are toggled using Jquery?

    How to change horizontal block-level elements to vertical elements after specific width?

    CSS help - how to keep my div in place with a responsive design

    Customizing ebay store HTML and CSS code (How to?)

    How to style diff implementation for PHP with CSS

    How do I get a value from the style element?