HTML/CSS/Form Style/form — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Текущая версия на 08:17, 26 мая 2010

Add BR to table cell to layout the form controls

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Form Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
  font-family: arial, verdana, sans-serif;
}
</style>
</head>
<body>
<form action="login.asp" method="post" name="frmLogin">
  <table>
    <tr>
      <td align="right">
        Account name: <br />
        Password: 
      </td>
      <td>
        <input type="text" name="txtLogin" size="20" /><br />
        <input type="password" name="txtPwd" size="20" />
        <input type="submit" value="Log in" />
      </td>
    </tr>
  </table>
</form>
</body>
</html>



Add form controls to paragraph

 

<!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="" method="post">
  <p>
    Name: <input type="text" name="name" /><br />
    Email: <input type="text" name="email" /><br />
    <input type="submit" value="submit" />
  </p>
</form>
</div>
</body>
</html>



Align the form controls

 

<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
  <title>Reply to ad</title>
</head>
<body>
<h2>Reply to ad</h2>
<p>Use the following form to respond to the ad:</p>
<form action="" method="post" name="frmRespondToAd">
<table>
  <tr>
    <td><label for="emailTo">To</label></td>
    <td><input type="text" name="txtTo" readonly="readonly" id="emailTo" size="20" value="Star seller" /></td>
  </tr>
  <tr>
    <td><label for="emailFrom">To</label></td>
    <td><input type="text" name="txtFrom" id="emailFrom" size="20"  /></td>
  </tr>
  <tr>
    <td><label for="emailSubject">Subject</label></td>
    <td><input type="text" name="txtSubject" id="emailSubject"  size="50"  /></td>
  </tr>
  <tr>
    <td><label for="emailBody">Body</label></td>
    <td><textarea name="txtBody" id="emailBody"  cols="50" rows="10"> </textarea></td>
  </tr>
</table>
<input type="submit" value="Send email" />
</form>
</body>
</html>



A login form with submit button

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>A login form with submit button</title>
  
</head>
<body>
  <form method="post" action="">
    <p><label for="username">Your Username:</label> <input type="text" id="username" name="username" /></p> 
    <p><label for="password">Your Password:</label> <input type="password" id="password" name="password" /></p> 
    <p><input type="submit" name="login" value="Log In" /></p>
  </form>

</body>
</html>



Define style based on form id

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Aligning labels</title>
  <style type="text/css">
  ul { list-style: none; margin: 0; padding: 0; }
  li { margin: .2em 0; }
  
  #info label { 
    float: left; 
    width: 200px; 
    margin-right: 15px; 
    text-align: right; 
  }
  </style>
</head>
<body>
  
<form id="info" method="post" action="">
  <ul>
    <li><label>Your name</label> <input type="text" /></li>
    <li><label>Your E-mail address</label> <input type="text" /></li>
    <li><label>Your telephone number</label> <input type="text" /></li>
  </ul>
</form>
</body>
</html>



Disable a form control

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Disabled form control</title>
</head>
<body>
<form>
<p><input type="button" onclick="this.disabled=true;" onkeypress="this.disabled=true;" value="submit" /></p>
</form>
</body>
</html>



Form for registration

 

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Try it out</title>
    <style rel="stylesheet" type="text/css">
body {
  font-size: 12pt;
}
fieldset {
  font-size: 12px;
  font-weight: bold;
  padding: 10px;
  width: 500px;
}
td {
  font-size: 12px;
}
td.label {
  text-align: right;
  width: 175px;
}
td.form {
  width: 350px;
}
div.submit {
  width: 450px;
  text-align: right;
  padding-top: 15px;
}
span.small {
  font-size: 10px;
}
span.required {
  font-weight: bold;
  font-size: 20px;
  color: #ff0000;
}
input {
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  background-color: #f2f2f2;
}
.steps {
  width: 500px;
}
td.stepOn,td.stepOff {
  width: 100px;;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  padding: 5px;
  font-size: 14px;
}
td.stepOff {
  background-color: #efefef;
}
.proceed {
  text-align: right;
}
</style>
  </head>
  <body>
<form name="frmExample" action="" method="post">
<fieldset>
<legend>Register with us:</legend>
<table>
  <tr>
    <td class="label">
       <label for="fname">First name: <span class="required">*</span></label></td>
    <td class="form"><input type="text" name="txtFirstName" id="fname" size="12" /></td>
  </tr>
  <tr>
    <td class="label"><label for="lname">Last name: <span class="required">*</span></label></td>
    <td class="form"><input type="text" name="txtLastName" id="lname" size="12" /></td>
  </tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr>
    <td class="label"><label for="email">E-mail address: <span class="required">*</span></label></td>
    <td class="form"><input type="password" name="txtEmail" id="email" size="20" /></td>
  </tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr>
    <td class="label"><label for="pwd">Password: <span class="required">*</span></label></td>
    <td class="form"><input type="password" name="txtPassword" id="pwd" size="12" /><span class="small">&nbsp;must be between 6 and 12 characters long</span></td>
  </tr>
  <tr>
    <td class="label"><label for="pwdConf">Confirm password: <span class="required">*</span></label></td>
    <td class="form"><input type="password" name="txtPasswordConf" id="pwdConf" size="12" /></td>
  </tr>
</table>
<div class="submit"><input type="submit" value="Register" /><br /></div>
<span class="required">*</span> = required
</fieldset>
</form>
</body>
</html>



Form layout

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table {
  border-collapse: collapse;
  color: black;
  border: 1px solid black;
}
th {
  width: 200px;
  text-align: right;
  padding-right: 12px;
  padding-top: .75em;
  padding-bottom: .75em;
  vertical-align: top;
  border-top: 1px solid black;
  font-family: Verdana;
  font-size: .7em;
}
td {
  vertical-align: middle;
  background-color: pink;
  border-bottom: 1px solid white;
  color: white;
  border-left: 4px solid grey;
  padding: 4px;
  font-family: Verdana;
  font-size: .7em;
}
.required {
  color: red;
}
.header th {
  text-align: left;
  text-transform: uppercase;
  font-size: .9em;
  padding-left: 220px;
  border-bottom: 2px solid grey;
  border-top: 2px solid black;
}
#buttonSubmit {
  margin-left: 220px;
  margin-top: 4px;
}
  </style>
</head>
<body>
<form action="" method="post">
  <table cellspacing="0">
    <tr class="header">
      <th colspan="2">Account Information</th>
    </tr>
    <tr class="required">
      <th scope="row">Login Name*</th>
      <td> <input name="uname" type="text" size="12" maxlength="12" /> </td>
    </tr>
    <tr class="required">
      <th scope="row">Password*</th>
      <td><input name="pword" type="text" size="12" maxlength="12" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Confirm Password* </th>
      <td><input name="pword2" type="text" size="12" maxlength="12" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Email Address*</th>
      <td><input name="email" type="text" /></td>
    </tr>
    <tr class="header">
      <th colspan="2">Contact Information</th>
    </tr>
    <tr class="required">
      <th scope="row">First Name* </th>
      <td><input name="fname" type="text" size="11" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Last Name* </th>
      <td><input name="lname" type="text" size="11" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Address 1*</th>
      <td><input name="address1" type="text" size="11" /></td>
    </tr>
    <tr>
      <th scope="row">Address 2 </th>
      <td><input type="text" name="address2" /></td>
    </tr>
    <tr class="required">
      <th scope="row">City* </th>
      <td><input type="text" name="city" /></td>
    </tr>
    <tr class="required">
      <th scope="row">State or Province*</th>
      <td><select name="state">
          <option selected="selected" disabled="disabled">Select...</option>
          <option value="alabama">Alabama</option>
        </select></td>
    </tr>
    <tr class="required">
      <th scope="row">Zip*</th>
      <td><input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Country*</th>
      <td><input type="text" name="country" id="country" /></td>
    </tr>
    <tr class="required">
      <th scope="row">Gender*</th>
      <td> <input type="radio" name="sex" value="female" />
        Female
        <input type="radio" name="sex" value="male" />
        Male </td>
    </tr>
    <tr class="header">
      <th colspan="2">Misc. </th>
    </tr>
    <tr>
      <th scope="row"> Income </th>
      <td>
       <select name="income" size="1" >
         <option selected="selected" disabled="disabled">Select...</option>
          <option value="notsay">no</option>
        </select> </td>
    </tr>
    <tr>
      <th scope="row">Interests</th>
      <td><input name="interests" type="checkbox" value="shopping-fashion" />
        Shopping/fashion
        <input name="interests" type="checkbox" value="sports" />
        Sports
        <input name="interests" type="checkbox" value="travel" />
        Travel</td>
    </tr>
    <tr>
      <th scope="row">Eye Color</th>
      <td><input name="eye" type="checkbox" value="red" />
        Red
        <input name="eye" type="checkbox" value="green" />
        Green
        <input name="eye" type="checkbox" value="brown" />
        Brown
        <input name="eye" type="checkbox" value="blue" />
        Blue Gold</td>
    </tr>
  </table>
  <input type="submit" name="Submit" value="Submit" id="buttonSubmit" />
  <input type="reset" name="Submit2" value="Reset" id="buttonReset" />
</form>
</body>
</html>



form margin: 3em auto

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Example form</title>
    <style rel="stylesheet" type="text/css" media="screen">
form {
    margin:  3em auto;
    width:  75%;
}

    </style>
  </head>
  
  <body>
    <form id="" action="" method="post">
      
      <fieldset id="name">
        <legend>Name</legend>
        <label>Title
          <select id="title1" name="title1">
            <option selected="selected">Mr.</option>
            <option>Mrs.</option>
            <option>Ms.</option>
          </select>
        </label>
        <label>First name
          <input id="first-name" name="first-name" type="text" />
        </label>
        <label>Last name
          <input id="las-name" name="last-name" type="text" />
        </label>
        <br />
      </fieldset>
      <fieldset id="address">
        <legend>Address</legend>
        <label>Street
          <input id="street" name="street" type="text" />
        </label>
        <br />
        <label>City
          <input id="city" name="city" type="text" />
        </label>
        <label>State
          <input id="state" name="state" type="text" />
        </label>
        <label>Zip code
          <input id="zip" name="zip" type="text" />
        </label>
        <br />
        <label>Country
          <input id="country" name="country" type="text" />
        </label>
        <br />
      </fieldset>
      <fieldset id="payment">
        <legend>Payment option</legend>
          <fieldset id="credit_card">
            <legend>Credit card</legend>
            <label><input id="visa" name="visa" type="radio" /> Visa</label>
            <label><input id="mastercard" name="mastercard" type="radio" /> Mastercard</label>
            <label><input id="discover" name="discover" type="radio" /> Discover</label>
            <br />
          </fieldset>
        <label>Card number
          <input id="card_number" name="card_number" type="text" />
        </label>
        <label>Expiration date
          <input id="expiration" name="expiration" type="text" />
        </label>
        <br />
        <input class="submit" type="submit" value="Submit" />
        <br />
      </fieldset>
      
    </form>
  </body>
  
</html>



form starts the form, gives the method of sending information and the location of form scripts

 

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
   </head>
   <body>
      <h1>Feedback Form</h1>
      <p>Please fill out this form to help us improve our site.</p>
      <form method = "post" action = "">
         <p><label>Name:
               <input name = "name" type = "text" size = "25"
                  maxlength = "30" />
            </label></p>
  
         <p>
            <input type = "submit" value = "Submit Your Entries" />
            <input type = "reset" value = "Clear Your Entries" />
         </p>   
      </form>
   </body>
</html>



form width: 75%

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Example form</title>
    <style rel="stylesheet" type="text/css" media="screen">
form {
    margin:  3em auto;
    width:  75%;
}

    </style>
  </head>
  
  <body>
    <form id="" action="" method="post">
      
      <fieldset id="name">
        <legend>Name</legend>
        <label>Title
          <select id="title1" name="title1">
            <option selected="selected">Mr.</option>
            <option>Mrs.</option>
            <option>Ms.</option>
          </select>
        </label>
        <label>First name
          <input id="first-name" name="first-name" type="text" />
        </label>
        <label>Last name
          <input id="las-name" name="last-name" type="text" />
        </label>
        <br />
      </fieldset>
      <fieldset id="address">
        <legend>Address</legend>
        <label>Street
          <input id="street" name="street" type="text" />
        </label>
        <br />
        <label>City
          <input id="city" name="city" type="text" />
        </label>
        <label>State
          <input id="state" name="state" type="text" />
        </label>
        <label>Zip code
          <input id="zip" name="zip" type="text" />
        </label>
        <br />
        <label>Country
          <input id="country" name="country" type="text" />
        </label>
        <br />
      </fieldset>
      <fieldset id="payment">
        <legend>Payment option</legend>
          <fieldset id="credit_card">
            <legend>Credit card</legend>
            <label><input id="visa" name="visa" type="radio" /> Visa</label>
            <label><input id="mastercard" name="mastercard" type="radio" /> Mastercard</label>
            <label><input id="discover" name="discover" type="radio" /> Discover</label>
            <br />
          </fieldset>
        <label>Card number
          <input id="card_number" name="card_number" type="text" />
        </label>
        <label>Expiration date
          <input id="expiration" name="expiration" type="text" />
        </label>
        <br />
        <input class="submit" type="submit" value="Submit" />
        <br />
      </fieldset>
      
    </form>
  </body>
  
</html>



Introducing Form Design

 
<HTML>
<HEAD>
<TITLE> - Forms</TITLE>
</HEAD>
<BODY>
<H2>Feedback Form</H2>
<P>Please fill out this form to help us improve our site.</P>
<FORM METHOD = "POST" ACTION = "/cgi-bin">
<INPUT TYPE = "hidden" NAME = "recipient" VALUE = "d@d.ru">
<INPUT TYPE = "hidden" NAME = "subject"   VALUE = "Feedback Form">
<INPUT TYPE = "hidden" NAME = "redirect"  VALUE = "main.html">
<P><STRONG>Name:</STRONG>
<INPUT NAME = "name" TYPE = "text" SIZE = "25"></P>
<INPUT TYPE = "submit" VALUE = "Submit Your Entries"> 
<INPUT TYPE = "reset" VALUE = "Clear Your Entries"> 
</FORM>
</BODY>
</HTML>



Layout form controls with table

 

<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
  <title>Voting</title>
  <style type="text/css">td {width:100; text-align:center;}</style>
</head>
<body>
<h2>Register your opinion</h2>
<form action="" method="get" name="frmRespondToAd">
<table>
  <tr>
    <td><input type="radio" name="radVote" value="1" id="vpoor" /></td>
    <td><input type="radio" name="radVote" value="2" id="poor" /></td>
    <td><input type="radio" name="radVote" value="3" id="average" checked="checked" /></td>
    <td><input type="radio" name="radVote" value="4" id="good" /></td>
    <td><input type="radio" name="radVote" value="5" id="vgood" /></td>
  </tr>
  <tr>
    <td><label for="vpoor">1 <br />Very Poor</label></td>
    <td><label for="poor">2 <br />Poor</label></td>
    <td><label for="average">3 <br />Average</label></td>
    <td><label for="good">4 <br />Good</label></td>
    <td><label for="vgood">5 <br />Very Good</label></td>
  </tr>
</table>
<input type="submit" value="Vote now" />
</form>
</body>
</html>



Layout form with CSS

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
input {
        width: 175px;
        margin-bottom: 10px;
}
label {
        display: block;
        text-align: right;
        float: left;
        width: 75px;
        padding-right: 20px;
}
.checkbox {
  width:1em;
}
br {
   clear: left;
}
.buttonSubmit {
  width: 75px;
  margin-left: 95px;
}
  </style>
</head>
<body>

<form action="" method="post">
  <label for="uname">User Name</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="recall">Remember you?</label>
  <input type="checkbox" name="recall" id="recall" class="checkbox" />
  <br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form>
</body>
</html>



Registration Form

 
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
  <title>Registration</title>
</head>
<body>
<h2>User Registration</h2>
<form action="" method="post"
      name="frmRegister">
<fieldset>
    <legend accesskey="y">About <u>Y</u>ou (ALT + Y)</legend>
<table>
  <tr>
    <td><label for="userName">User name:</label></td>
    <td><input type="text" name="txtUserName" size="20" id="userName" /></td>
  </tr>
  <tr>
    <td><label for="password">Password:</label></td>
    <td><input type="password" name="pwdPassword" size="20" id="password" /></td>
  </tr>
  <tr>
    <td><label for="confPassword">Confirm Password:</label></td>
    <td><input type="password" name="pwdPasswordConf" size="20" id="confPassword" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><label for="firstName">First name:</label></td>
    <td><input type="text" name="txtFirstName" size="20" id="firstName" /></td>
  </tr>
  <tr>
    <td><label for="lastName">Last name:</label></td>
    <td><input type="text" name="txtLastName" size="20" id="lastName" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><label for="email">Email address:</label></td>
    <td><input type="text" name="txtEmail" size="20" id="email" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Gender:</td>
    <td><input type="radio" name="radSex" value="male" />Male</td>
  </tr>
  <tr>
    <td></td>
    <td><input type="radio" name="radSex" value="female" />Female</td>
  </tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
</fieldset>
<fieldset>
    <legend accesskey="u">About <u>U</u>s (ALT + U)</legend>
<table>
  <tr>
    <td><label for="referrer">How did you hear about us?</label>:</td>
    <td>
      <select name="selReferrer" id="referrer">
        <option selected="selected" value="">Select answer</option>
        <option value="website">Another website</option>
        <option value="printAd">Magazine ad</option>
        <option value="friend">From a friend</option>
        <option value="other">Other</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><label for="mailList">Please select</label></td>
    <td><input type="checkbox" name="chkMailingList" id="mailList" /></td>
  </tr>
</table>
</fieldset>
<input type="submit" value="Register now" />
</form>
</body>
</html>



Set margin, padding and border for form

 

<!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">
form {
 margin: 0;
 padding: 1em 0;
 border: 1px dotted red;
}
</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="form1" name="form1" method="post" action="/">
    
      <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
      <select name="fmtitle" id="fmtitle">
      <option value="ms">Ms.</option>
      <option value="mrs">Mrs.</option>
      <option value="miss">Miss</option>
      <option value="mr">Mr.</option>
        </select>

        <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
        <input type="text" name="fmname" id="fmname" />
    
        <label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
        <input type="text"  name="fmemail" id="fmemail" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
        <input type="text" name="fmcountry" id="fmcountry" />
    
        <label for="fmmsg"><span class="akey">M</span>essage</label>
        <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
    
        <input type="submit" name="submit" value="send" class="submit" />
      </form>
    </div>
  </div>
  <div id="extra">
    <h2>quid pro quo</h2>
  </div>
  <div id="footer">
    <p>ask.</p>
  </div>
</div>
</body>
</html>



simple form with label, text field and submit button

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>A simple form</title>
</head>
<body>
  <form method="post" action=""> 
    <p><label for="email">Enter your E-mail address.</label></p> 
    <p><input type="text" name="email" id="email" /> 
    <input type="submit" name="subscribe" value="Subscribe" /></p> 
  </form>
</body>
</html>



styleless order form

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" media="print">
  .fillout {
   color: black;
   border-width: 0;
   border-bottom: 1px solid #000;
   width: 300pt;
  .postselect {
   display: block;
   width: 300pt;
   height: 1em;
   border: none;
   border-bottom: 1px solid #000;
  }
  </style>
</head>
<body>
<form>
<h2>Order Form</h2>
  <table cellspacing="0">
    <tr> 
      <td width="116"><label for="fname">First Name<label>:</td>
      <td><input class="fillout" name="fname" type="text" id="fname" /></td>
    </tr>
    <tr> 
      <td>Last Name:</td>
      <td><input class="fillout" name="lname" type="text" id="lname" /></td>
    </tr>
    <tr> 
      <td>Email:</td>
      <td><input class="fillout" name="email" type="text" id="email" /></td>
    </tr>
    <tr> 
      <td>Address:</td>
      <td><input class="fillout" name="address1" type="text" id="address1" /> </td>
    </tr>
    <tr> 
      <td>&nbsp;</td>
      <td><input class="fillout" name="address2" type="text" id="address2" /></td>
    </tr>
    <tr> 
      <td>City:</td>
      <td><input class="fillout" name="city" type="text" id="city" /></td>
    </tr>
    <tr> 
      <td>State/Province:</td>
      <td> <select name="state" size="1">
          <option selected="selected">Select</option>
          <option>Alabama </option>
          <option>Alaska </option>
          <option>Arizona </option>
          <option>Arkansas </option>
          <option>California </option>
          <option>Colorado </option>
          <option>Connecticut </option>
          <option>Delaware </option>
          <option>Florida </option>
          <option>Georgia </option>
          <option>Hawaii </option>
          <option>Idaho </option>
          <option>Illinois </option>
          <option>Indiana </option>
          <option>Iowa </option>
          <option>Kansas </option>
          <option>Kentucky </option>
          <option>Louisiana </option>
          <option>Maine </option>
          <option>Maryland </option>
          <option>Massachusetts </option>
          <option>Michigan </option>
          <option>Minnesota </option>
          <option>Mississippi </option>
          <option>Missouri </option>
          <option>Montana </option>
          <option>Nebraska </option>
          <option>Nevada </option>
          <option>New Hampshire </option>
          <option>New Jersey </option>
          <option>New Mexico </option>
          <option>New York </option>
          <option>North Carolina </option>
          <option>North Dakota </option>
          <option>Ohio </option>
          <option>Oklahoma </option>
          <option>Oregon </option>
          <option>Pennsylvania </option>
          <option>Rhode Island </option>
          <option>South Carolina </option>
          <option>South Dakota </option>
          <option>Tennessee </option>
          <option>Texas </option>
          <option>Utah </option>
          <option>Vermont </option>
          <option>Virginia </option>
          <option>Washington </option>
          <option>Washington, D.C. </option>
          <option>West Virginia </option>
          <option>Wisconsin </option>
          <option>Wyoming </option>
          <option>---------- </option>
          <option>Alberta </option>
          <option>British Columbia </option>
          <option>Manitoba </option>
          <option>New Brunswick </option>
          <option>New Foundland </option>
          <option>Nova Scotia </option>
          <option>Northwest Territories </option>
          <option>Ontario </option>
          <option>Prince Edward Island </option>
          <option>Quebec </option>
          <option>Saskatchewan </option>
          <option>Yukon Territory </option>
          <option>Other </option>
        </select><span class="postselect"> </span>
      </td>
    </tr>
    <tr> 
      <td>Zip Code:</td>
      <td><input class="fillout" name="zip" type="text" id="zip" /></td>
    </tr>
    <tr> 
      <td>Daytime Phone:</td>
      <td><input class="fillout" name="dayphone" type="text" id="dayphone" /></td>
    </tr>
    <tr> 
      <td>Product(s):</td>
      <td><input name="product" type="checkbox" id="product" value="ezweb" />Web ($19.95) 
         <input name="product" type="checkbox" id="product" value="ezwebultra" />Ping ($29.95)</td>
    </tr>
    <tr> 
      <td>Type of Credit Card:</td>
      <td><input type="radio" name="cc" value="mastercard" />
        Mastercard 
        <input type="radio" name="cc" value="visa" />
        Visa
        <input type="radio" name="cc" value="discover" />
        Discover</td>
    </tr>
    <tr> 
      <td>Name on Credit Card:</td>
      <td><input class="fillout"  name="ccname" type="text" id="ccname" /></td>
    </tr>
    <tr> 
      <td>Card Number:</td>
      <td><input class="fillout"  name="ccnumber" type="text" id="ccnumber" /></td>
    </tr>
    <tr> 
      <td>Card Expiration Date:</td>
      <td><input class="fillout"  name="ccnumber" type="text" id="ccnumber" /></td>
    </tr>
  </table>
<input type="submit" name="Submit" value="Submit" id="submit" />
</form>
</body>
</html>



Styling text in form controls

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Styling text in form controls</title>
  <style type="text/css">
  body { font-family: "Trebuchet MS", verdana, sans-serif;  }
  ol { list-style: none; margin: 0; padding: 0; }
  li { margin: .5em 0; }
  label { float: left; width: 200px; margin-right: 15px; text-align: right; }
  input#submit { margin-left: 215px; }
  input, select, textarea { font-family: inherit; }
  </style>
  
</head>
<body>
  
<form method="post" action="">
  <ol>
    <li>
      <label for="name">Your name</label> 
      <input type="text" id="name" size="35" />
    </li>
    <li>
      <label for="email">Your E-mail address</label> 
      <input type="text" id="email" size="35" />
    </li>
    <li>
      <label for="subject">What"s this about?</label> 
      <select id="subject">
        <option value="" selected="selected">-- select --</option>
        <option value="Hello">"hello"</option>
        <option value="Menu Question">menu</option>
        <option value="Catering">catering</option>
        <option value="Complaint">complaint</option>
      </select>
    </li>
    <li>
      <label for="message">Your message</label> 
      <textarea id="message" cols="33" rows="10"></textarea>
    </li>
    <li>
      <input id="submit" type="submit" value="Send It!" />
    </li>
  </ol>
</form>
</body>
</html>



Table and Form Example

<HTML>
<HEAD>
<TITLE>Table and Form Example</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="CENTER">
<H2>Contact Form</H2>
<FORM ACTION="mailto: info@company.ru" METHOD="POST">
<TABLE BORDER="1">
<TR>
  <TD>First Name:</TD>
  <TD><INPUT NAME="firstname" SIZE="40"></TD>
</TR>
<TR>
  <TD>Last Name: </TD>
  <TD><INPUT NAME="lastname" SIZE="40"></TD>
</TR>
<TR>
  <TD>Company:</TD>
<TD><INPUT NAME="company" SIZE="40"></TD>
</TR>
<TR>
  <TD>Address:</TD><TD><INPUT NAME="address" SIZE="40"></TD>
</TR>
<TR>
  <TD>City: </TD>
  <TD><INPUT NAME="city" SIZE="25"></TD>
</TR>
<TR>
  <TD>State: </TD>
  <TD><INPUT NAME="state" SIZE="15"></TD>
</TR>
<TR>
  <TD>Country: </TD>
  <TD><INPUT NAME="country" SIZE="25"></TD>
</TR>
<TR>
    <TD>Postal Code: </TD>
  <TD><INPUT NAME="zip" SIZE="10"></TD>
</TR>
<TR>
  <TD COLSPAN=2><BR>Enter any comments below:<BR>
  <TEXTAREA NAME="text" ROWS="5" COLS="50"></TEXTAREA></TD>
</TR>
<TR> 
  <TD COLSPAN=2><CENTER><BR>
    <INPUT TYPE="submit" VALUE="Submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <INPUT TYPE="reset"><BR><BR></CENTER></TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>



Use DIV to wrap form control

 
<!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">
div {
  margin: 2em;
}
</style>
</head>
<body class="required">
<form method="get" action="/">
    
    <div>
    <label for="q">Search</label>
    <input type="search" placeholder="keywords" autosave="com.domain.search" results="7" name="q" /> 
    </div>
</form>
</body>
</html>



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>



Use table to align the form controls

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Form Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
  font-family: arial, verdana, sans-serif;
}
</style>
</head>
<body>
<form action="login.asp" method="post" name="frmLogin">
  <table>
    <tr>
      <td align="right">Account name: </td>
      <td><input type="text" name="txtLogin" size="20" /></td>
    </tr>
    <tr>
      <td align="right">Password </td>
      <td><input type="password" name="txtPwd" size="20" /></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" value="Log in" /></td>
    </tr>
  </table>
</form>
</body>
</html>



Use table to layout form controls

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table {
 border-collapse: collapse;
 color: black;
 border: 1px solid black;
}
th {
 width: 200px;
 text-align: right;
 vertical-align: top;
 border-top: 1px solid black;
 font-family: Verdana;
 font-size: 0.7em;
 padding-right: 12px;
 padding-top: 0.75em;
 padding-bottom: 0.75em;
}
td {
 vertical-align: middle;
 background-color: #333333;
 border-bottom: 1px solid white;
 color: white;
 border-left: 4px solid gray;
 padding: 4px;
 font-family: Verdana;
 font-size: .7em;
}
.required {
 color: red;
}
.header th {
 text-align: left;
 text-transform: uppercase;
 font-size: .9em;
}
.header th {
 text-align: left;
 text-transform: uppercase;
 font-size: .9em;
 padding-left: 220px;
}
.header th {
 text-align: left;
 text-transform: uppercase;
 font-size: .9em;
 padding-left: 220px;
 border-bottom: 2px solid gray;
 border-top: 2px solid black;
}
#buttonSubmit {
 margin-left: 220px;
 margin-top: 4px;
}
</style>
</head>
<body>
     <table cellspacing="0"> 
      <tr class="header"> 
        <th colspan="2">Account Information</th> 
      </tr> 
      <tr class="required"> 
        <th scope="row">Login Name*</th> 
        <td><input name="uname" type="text" size="12" maxlength="12" /></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">Password*</th> 
        <td><input name="pword" type="text" size="12" maxlength="12" /></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">Confirm Password* </th> 
        <td><input name="pword2" type="text" size="12" maxlength="12" /></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">Email Address*</th> 
        <td><input name="email" type="text" /></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">Confirm Email*</th> 
        <td><input type="text" name="email2" /></td> 
      </tr> 
      <tr class="header"> 
        <th colspan="2">Contact Information</th> 
      </tr> 
      <tr class="required"> 
        <th scope="row">First Name* </th> 
        <td><input name="fname" type="text" size="11" /></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">Last Name* </th> 
        <td><input name="lname" type="text" size="11" /></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">Address 1*</th> 
        <td><input name="address1" type="text" size="11" /></td> 
      </tr> 
      <tr> 
        <th scope="row">Address 2 </th> 
        <td><input type="text" name="address2" /></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">City* </th> 
        <td><input type="text" name="city" /></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">State or Province*</th> 
        <td><select name="state"> 
            <option selected="selected" disabled="disabled">Select...</option> 
            <option value="alabama">Alabama</option> 
          </select></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">Zip*</th> 
        <td><input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" /></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">Country*</th> 
        <td><input type="text" name="country" /></td> 
      </tr> 
      <tr class="required"> 
        <th scope="row">Gender*</th> 
        <td> <input type="radio" name="sex" value="female" /> Female
          <input type="radio" name="sex" value="male" /> Male 
        </td> 
      </tr> 
      <tr class="header"> 
        <th colspan="2">Misc. Information</th> 
      </tr> 
      <tr> 
        <th scope="row"> Annual Household Income </th> 
        <td> 
         <select name="income" size="1" > 
           <option selected="selected" disabled="disabled">Select...</option> 
            <option value="notsay">I"d rather not say</option> 
          </select> </td> 
      </tr> 
      <tr> 
        <th scope="row">Interests</th> 
        <td><input name="interests" type="checkbox" value="shopping-fashion" /> Shopping/fashion
          <input name="interests" type="checkbox" value="sports" /> Sports
          <input name="interests" type="checkbox" value="travel" /> Travel</td> 
      </tr> 
      <tr> 
        <th scope="row">Eye Color</th> 
        <td><input name="eye" type="checkbox" value="red" /> Red
          <input name="eye" type="checkbox" value="green" /> Green
          <input name="eye" type="checkbox" value="brown" /> Brown
          <input name="eye" type="checkbox" value="blue" /> Blue Gold</td> 
      </tr> 
    </table> 
    <input type="submit" name="Submit" value="Submit" id="buttonSubmit" /> 
    <input type="reset" name="Submit2" value="Reset" id="buttonReset" /> 
  </form>
</body>
</html>



Use UL and LI to layout form controls

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Aligning labels</title>
  <style type="text/css">
  ul { list-style: none; margin: 0; padding: 0; }
  li { margin: .2em 0; }
  
  #info label { 
    float: left; 
    width: 200px; 
    margin-right: 15px; 
    text-align: right; 
  }
  </style>
</head>
<body>
  
<form id="info" method="post" action="/formhandler.cgi">
  <ul>
    <li><label>Your name</label> <input type="text" /></li>
    <li><label>Your E-mail address</label> <input type="text" /></li>
    <li><label>Your telephone number</label> <input type="text" /></li>
  </ul>
</form>
</body>
</html>



Wizard form

 

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Try it out</title>
    <style rel="stylesheet" type="text/css">
body {
  font-size: 12pt;
}
fieldset {
  font-size: 12px;
  font-weight: bold;
  padding: 10px;
  width: 500px;
}
td {
  font-size: 12px;
}
td.label {
  text-align: right;
  width: 175px;
}
td.form {
  width: 350px;
}
div.submit {
  width: 450px;
  text-align: right;
  padding-top: 15px;
}
span.small {
  font-size: 10px;
}
span.required {
  font-weight: bold;
  font-size: 20px;
  color: #ff0000;
}
input {
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  background-color: #f2f2f2;
}
.steps {
  width: 500px;
}
td.stepOn,td.stepOff {
  width: 100px;;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  padding: 5px;
  font-size: 14px;
}
td.stepOff {
  background-color: #efefef;
}
.proceed {
  text-align: right;
}
</style>
  </head>
  <body>
<table class="steps">
  <tr>
    <td class="stepOff">Step One</td>
    <td class="stepOn">Step Two</td>
    <td class="stepOff">Step Three</td>
  </tr>
</table>
<form name="frmExample" action="" method="post">
<fieldset>
<legend>Contact details:</legend>
<table>
  <tr>
    <td class="label"><label for="address1">Address 1:</label></td>
    <td class="form"><input type="text" name="txtAddress1" id="address1" size="30" /></td>
  </tr>
  <tr>
    <td class="label"><label for="address2">Address 2:</label></td>
    <td class="form"><input type="text" name="txtAddress2" id="address2" size="30" /></td>
  </tr>
  <tr>
    <td class="label"><label for="town">Town/Suburb:</label></td>
    <td class="form"><input type="text" name="txtTown" id="town" size="12" /></td>
  </tr>
  <tr>
    <td class="label"><label for="city">City/State:</label></td>
    <td class="form"><input type="text" name="txtState" id="city" size="12" /></td>
  </tr>
  <tr>
    <td class="label"><label for="postcode">Postal/Zip Code:</label></td>
    <td class="form"><input type="text" name="txtPostCode" id="postcode" size="12" /></td>
  </tr>
</table>
<br />
<table class="steps">
  <tr>
    <td class="back"><input type="submit" value="Back" /></td>
    <td class="proceed"><input type="submit" value="Proceed" /></td>
  </tr>
</table>
</fieldset>
<br /><span class="required">*</span> = required
</form>
</body>
</html>



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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Form_Style/form&oldid=5615»