Layout of a Form

Get Started
1

I am trying to layout a form without using lists in HTML; to organize the label and input tags

label label2 label3
input input2 input3

I am trying to accomplish the above; i know how to do it if i inclose all of the label tags in an UL tag and all of the inputs in an UL tag. I want to use css to arrange the labels and inputs like above. Any help is appreciated

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>I929</title>
</head>
<link type="text/css" href="../css/smoothness/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<link type="text/css" href="../css/Forms.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="../js/Forms.js"></script>
<body>
<cfform id="Part1">
  <!---Creates the Container for the Tabs--->
  <div id="tabs">
    <!---Creates the Headings for the Tabs--->
    <ul id="tab_headings">
      <li><a href="#Information_About_You" class="tab_heading">Part 1. Information About You</a></li>
      <li><a href="#tab2" class="tab_heading">Part 2. </a></li>
      <li><a href="#tab4" class="tab_heading">Part 4. </a></li>
    </ul>
    <!---Ending of the Tab Headings--->
    <!---Creates the Container for Tab 1--->
    <div id="Information_About_You">
    <!---Controls the dropdown at the top that says who the customer is filing for--->
     <div id="filing_for">
      <label>I am filing for my:</label>
      <!---This will be dynamically added from the table.only here for formatting purposes--->
      <select id="filing_for_selection">
        <option>Select One</option>
        <option>Spouse</option>
        <option>Biological Child</option>
        <option>Stepchild</option>
        <option>Adopted Child</option>
        <option>Biological Parent</option>
        <option>Stepparent</option>
        <option>Parent who adopted me</option>
      </select>
    </div>
    <!---End of Filing for--->
    <hr />
    <!---Begining of Row 1--->
    <div id="row1">
    	<fieldset>
    	<label>Last Name (Family Name)</label><input type="text" class="name" name="IAY_lastname" value=""/>
        <label>First Name (Given Name)</label><input type="text" class="name" name="IAY_firstname" value=""/>
        <label>Middle Name</label><input type="text" class="name" name="IAY_middlename" value=""/>
        
        </fieldset>
    </div>
    <!---End of Row 1--->
    
    <!---Begining of Row 2--->
    <!---End of Row 2--->
    
    </div>
    <!---Ending of the Container for Tab 1--->
  </div>
</cfform>
</body>
</html>



@charset "utf-8";
/* CSS Document */

*{
	font-family:"Joanna MT";
	font-size:12px;
}
body{
	background-color:gray;
}

input
{
	width:150px;
}

#row1 fieldset label
{
	margin-left:0px;
	margin-right:0px;
	display:list-item;
}

#row1 fieldset input
{
	margin-left:0px;
	margin-right:0px;
	display:list-item;
	
}

#row1 fieldset label input .name
{
	display:list-item;
}
2

Is this supposed to be a purely HTML solution? You are using coldfusion markup, which is not HTML.

3

The way I would do it would be to use ‘inline-block’, and to put the input inside the label (this is an alternative method to using the ‘for’ attribute.

<fieldset class="name">
<label>Last Name (Family Name) <input type="text" name="IAY_lastname"></label>
<label>First Name (Given Name) <input type="text" name="IAY_firstname"></label>
<label>Middle Name <input type="text" name="IAY_middlename"></label>
</fieldset>

.name label {display:inline-block; width:10em;}
.name input {display:block;}

Obviously you can play with the width to determine the spacing that suits your site best, and add padding, margins and formatting as you want.

I haven’t tested it in obsolete versions of IE, and I know that inline-block is flaky in IE7 and older, so you may need a workaround there.

4

Yes this actually will be a Coldfusion site. Sorry i should have stated that in my initial post.

5

That’s alright :slight_smile: I was just hoping you didn’t google something, copy and paste the code, and then wonder why it didn’t work/validate. :slight_smile:

6

Awesome that worked…Thanks

7

imho, more often than not it can be legitimately argued that the form’s content is tabular, especially when the rows and columns in the form need to align vertically and horizontally.

therefore it is semantically correct to use tables to more easily line up columns and rows in a form.

8

It can be argued that a tail is a leg, too. Doesn’t make it one.

9

yep agree but we’ve gone through this debate in another thread.

in post 7 in this thread is how I justify using tables in forms.

we can just agree to disagree.