Wrap form controls in a DIV and set style to float left and padding : form : Form Style HTML CSS TUTORIALS


HTML CSS TUTORIALS » Form Style » form »

 

Wrap form controls in a DIV and set style to float left and padding


 

<!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=ISO-8859-1" />
<title></title>
<style type="text/css">
#register {
  float: left;
}

#contactinfo {
  padding-left: 275px;
}

</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
      <form id="regform" name="regform" method="post" action="">
        <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" id="fmstate" />
          <label for="fmzip">Zip</label>
          <input type="text" name="fmzip" id="fmzip"  size="5" />
          <label for="fmcountry">Country</label>
          <input type="text" name="fmcountry" id="fmcountry" />
          <input type="submit" name="submit" value="send" class="submit" />
        </div>
      </form>
    </div>
  </div>
</div>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Form Style
» form