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:
Can anyone point me in the right direction?
Here's a screen shot, please notice how I demonstrated the tab order with numbers:
Please note that RedFilter's answer has a different tab order, which I have demonstrated in the screenshot below:
(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"> *</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"> *</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"> *</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"> *</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"> *</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"> *</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"> *</asp:RequiredFieldValidator>
<p>
</div>
There are many ways to do this - I have given you a very stripped-down solution below. There are a number of tweaks you need to do to make this cross-browser compliant, improve spacing, etc., but this should give you the basic idea as to how you can lay the elements out:
<html>
<head>
<style>
body {
font-family:arial;
font-size: 0.8em;
}
div.form p {
clear: both;
}
div.form label {
float: left;
width: 10em;
}
div.form input[type="text"] {
float: left;
width: 16em;
font-family:arial;
font-size: 1.0em;
}
div.form textarea {
width: 52em;
font-family:arial;
font-size: 1.0em;
}
</style>
</head>
<body>
<div class="form">
<p>
<label>Department:</label>
<input type=text>
<label>Project:</label>
<input type=text id=Project name=Project>
</p>
<p>
<label>Fund:</label>
<input type=text id=FundID name=FundID>
<label>SpeedKey:</label>
<input type=text id=SpeedKey name=SpeedKey>
</p>
<p>
<label>Program:</label>
<input type=text id=Program name=Program>
<label>Award:</label>
<input type=text id=Award name=Award>
</p>
<p>
<label>Project Description:</label>
</p>
<p>
<textarea id=ProjectDescription name=ProjectDescription></textarea>
</p>
</div>
</body>
</html>
Much the same as the previous answers, I offer you:
CSS:
fieldset {
clear: both;
padding: 0.4em;
border: 1px solid #000;
width: 80%;
min-width: 600px;
margin: 1em auto;
overflow: hidden;
}
ul {
width: 48%;
border: 1px solid #ccc;
margin: 0.5em;
}
ul:nth-child(odd) {
float: right;
}
label {
display: inline-block;
width: 30%;
text-align: right;
}
html:
<fieldset>
<ul>
<li><label for="fieldOne">Field One:</label> <input type="text" id="fieldOne" name="fieldOne" /></li>
<li><label for="fieldTwo">Field Two:</label> <input type="text" id="fieldTwo" name="fieldTwo" /></li>
</ul>
<ul>
<li><label for="fieldThree">Field Three:</label> <input type="text" id="fieldThree" name="fieldThree" /></li>
<li><label for="fieldFour">Field Four:</label> <input type="text" id="fieldFour" name="fieldFour" /></li>
</ul>
</fieldset>
<fieldset>
<input type="submit" value="Submit" />
</fieldset>
</form>
Demo at: http://www.davidrhysthomas.co.uk/so/formCols.html
This solution does use CSS3 (the nth-child(odd)), which limits its cross-browser friendliness (though works in Opera, Chrome, Safari and Firefox on Ubuntu 10.04), so for IE-friendliness you'd have to explicitly add a class name to whichever column(s) you wanted to float: right.
© 2022 - 2024 — McMap. All rights reserved.