Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Designing a Two-Column Form Without Tables

Problem

You want to transform a one-column form (as shown in Figure 8-15) to two columns.

The form in one column

Figure 8-15. The form in one column

Solution

First, mark out the areas of the form into two different sections using div elements:

<form id="regform" name="regform" method="post" action="/regform.php">
 <div id="register">
  <h4>Register</h4>
  <label for="fmlogin">Login</label>
  <input type="text" name="fmlogin" id="fmlogin" />
  <label for="fmemail">Email Address</label>
  <input type="text" name="fmemail" id="fmemail" />
  <label for="fmemail2">Confirm Address</label>
  <input type="text" name="fmemail2" id="fmemail2" />
  <label for="fmpswd">Password</label>
  <input type="password" name="fmpswd" id="fmpswd" />
  <label for="fmpswd2">Confirm Password</label>
  <input type="password" name="fmpswd2" id="fmpswd2" />
 </div>
 <div id="contactinfo"> <h4>Contact Information</h4> <label for="fmfname">First Name</label> <input type="text" name="fmfname" id="fmfname" /> <label for="fmlname">Last Name</label> <input type="text" name="fmlname" id="fmlname" /> <label for="fmaddy1">Address 1</label> <input type="text" name="fmaddy1" id="fmaddy1" /> <label for="fmaddy2">Address 2</label> <input type="text" name="fmaddy2" id="fmaddy2" /> <label for="fmcity">City</label> <input type="text" name="fmcity" id="fmcity" /> <label for="fmstate">State or Province</label> <input type="text" name="fmstate" ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required