Use DL, DT to layout the form controls : form : Form Style HTML CSS TUTORIALS

HTML CSS TUTORIALS » Form Style » form »

Use DL, DT to layout the form controls


 


<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Forms</title>
  <style type="text/css" media="screen">
  
  div {
    margin-bottom: 30px;
  }  
  
  #divID p {
    margin: 6px 0;
  }

  </style>
</head>
<body>

<div id="divID">
<form action="/path/to/script" id="thisform" method="post">
  <dl>
    <dt><label for="name">Name:</label></dt>
    <dd><input type="text" id="name" name="name" /></dd>
    <dt><label for="email">Email:</label></dt>
   <dd><input type="text" id="email" name="email" /></dd>
   <dt><label for="remember">Remember this info?</label></dd>
    <dd><input type="checkbox" id="remember" name="remember" /></dd>
    <dt><p><input type="submit" value="submit" /></dt>
  </dl>
</form>
<br /><br />
</div>

</body>
</html>