HTML/CSS/Form Style/form

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

Add BR to table cell to layout the form controls

   <source lang="html4strict">

<?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"> 

       Account name: 

       Password: 

       <input type="text" name="txtLogin" size="20" />

       <input type="password" name="txtPwd" size="20" />
       <input type="submit" value="Log in" />

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

</source>


Add form controls to paragraph

   <source lang="html4strict">

<!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>

<form action="" method="post">

Name: <input type="text" name="name" />
Email: <input type="text" name="email" />
<input type="submit" value="submit" />

</form>

</body> </html> 

</source>


Align the form controls

   <source lang="html4strict">

<?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>

Reply to ad

Use the following form to respond to the ad:

<form action="" method="post" name="frmRespondToAd">

<label for="emailTo">To</label> <input type="text" name="txtTo" readonly="readonly" id="emailTo" size="20" value="Star seller" />
<label for="emailFrom">To</label> <input type="text" name="txtFrom" id="emailFrom" size="20" />
<label for="emailSubject">Subject</label> <input type="text" name="txtSubject" id="emailSubject" size="50" />
<label for="emailBody">Body</label> <textarea name="txtBody" id="emailBody" cols="50" rows="10"> </textarea>

<input type="submit" value="Send email" /> </form> </body> </html> 

</source>


A login form with submit button

   <source lang="html4strict">

<!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="">

<label for="username">Your Username:</label> <input type="text" id="username" name="username" />

<label for="password">Your Password:</label> <input type="password" id="password" name="password" />

<input type="submit" name="login" value="Log In" />

 </form>

</body> </html> 

</source>


Define style based on form id

   <source lang="html4strict">

<!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="">

  • <label>Your name</label> <input type="text" />
  • <label>Your E-mail address</label> <input type="text" />
  • <label>Your telephone number</label> <input type="text" />

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

</source>


Disable a form control

   <source lang="html4strict">

<!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>

<input type="button" onclick="this.disabled=true;" onkeypress="this.disabled=true;" value="submit" />

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

</source>


Form for registration

   <source lang="html4strict">

<?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>

<label for="fname">First name: *</label> <input type="text" name="txtFirstName" id="fname" size="12" />
<label for="lname">Last name: *</label> <input type="text" name="txtLastName" id="lname" size="12" />
  
<label for="email">E-mail address: *</label> <input type="password" name="txtEmail" id="email" size="20" />
  
<label for="pwd">Password: *</label> <input type="password" name="txtPassword" id="pwd" size="12" /> must be between 6 and 12 characters long
<label for="pwdConf">Confirm password: *</label> <input type="password" name="txtPasswordConf" id="pwdConf" size="12" />
<input type="submit" value="Register" />

* = required </fieldset> </form> </body> </html> 

</source>


Form layout

   <source lang="html4strict">

<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;

}

  1. buttonSubmit {
 margin-left: 220px;
 margin-top: 4px;

} 

 </style>

</head> <body> <form action="" method="post">

Account Information
Login Name* <input name="uname" type="text" size="12" maxlength="12" />
Password* <input name="pword" type="text" size="12" maxlength="12" />
Confirm Password* <input name="pword2" type="text" size="12" maxlength="12" />
Email Address* <input name="email" type="text" />
Contact Information
First Name* <input name="fname" type="text" size="11" />
Last Name* <input name="lname" type="text" size="11" />
Address 1* <input name="address1" type="text" size="11" />
Address 2 <input type="text" name="address2" />
City* <input type="text" name="city" />
State or Province* <select name="state"> 
         <option selected="selected" disabled="disabled">Select...</option>
         <option value="alabama">Alabama</option>
</select>
Zip* <input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" />
Country* <input type="text" name="country" id="country" />
Gender* <input type="radio" name="sex" value="female" /> 
       Female
       <input type="radio" name="sex" value="male" />
Male
Misc.
Income 
      <select name="income" size="1" >
        <option selected="selected" disabled="disabled">Select...</option>
         <option value="notsay">no</option>
</select>
Interests <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
Eye Color <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		 
 <input type="submit" name="Submit" value="Submit" id="buttonSubmit" />
 <input type="reset" name="Submit2" value="Reset" id="buttonReset" />

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

</source>


form margin: 3em auto

   <source lang="html4strict">

<!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>
       

     </fieldset>
     <fieldset id="address">
       <legend>Address</legend>
       <label>Street
         <input id="street" name="street" type="text" />
       </label>
       

       <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>
       

       <label>Country
         <input id="country" name="country" type="text" />
       </label>
       

     </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>
           

         </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>
       

       <input class="submit" type="submit" value="Submit" />
       

     </fieldset>
     
   </form>
 </body>

</html> 

</source>


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

   <source lang="html4strict">

<?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>

Feedback Form

Please fill out this form to help us improve our site.

     <form method = "post" action = "">

<label>Name: <input name = "name" type = "text" size = "25" maxlength = "30" /> </label>

<input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> 

     </form>
  </body>

</html> 

</source>


form width: 75%

   <source lang="html4strict">

<!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>
       

     </fieldset>
     <fieldset id="address">
       <legend>Address</legend>
       <label>Street
         <input id="street" name="street" type="text" />
       </label>
       

       <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>
       

       <label>Country
         <input id="country" name="country" type="text" />
       </label>
       

     </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>
           

         </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>
       

       <input class="submit" type="submit" value="Submit" />
       

     </fieldset>
     
   </form>
 </body>

</html> 

</source>


Introducing Form Design

   <source lang="html4strict">

<HTML> <HEAD> <TITLE> - Forms</TITLE> </HEAD> <BODY>

Feedback Form

Please fill out this form to help us improve our site.

<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">

Name: <INPUT NAME = "name" TYPE = "text" SIZE = "25">

<INPUT TYPE = "submit" VALUE = "Submit Your Entries"> <INPUT TYPE = "reset" VALUE = "Clear Your Entries"> </FORM> </BODY> </HTML> 

</source>


Layout form controls with table

   <source lang="html4strict">

<?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>

Register your opinion

<form action="" method="get" name="frmRespondToAd">

<input type="radio" name="radVote" value="1" id="vpoor" /> <input type="radio" name="radVote" value="2" id="poor" /> <input type="radio" name="radVote" value="3" id="average" checked="checked" /> <input type="radio" name="radVote" value="4" id="good" /> <input type="radio" name="radVote" value="5" id="vgood" />
<label for="vpoor">1
Very Poor</label>		 <label for="poor">2
Poor</label>		 <label for="average">3
Average</label>		 <label for="good">4
Good</label>		 <label for="vgood">5
Very Good</label>

<input type="submit" value="Vote now" /> </form> </body> </html> 

</source>


Layout form with CSS

   <source lang="html4strict">

<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="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <label for="recall">Remember you?</label>
 <input type="checkbox" name="recall" id="recall" class="checkbox" />
 

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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

</source>


Registration Form

   <source lang="html4strict">

<?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>

User Registration

<form action="" method="post" 

     name="frmRegister">

<fieldset> 

   <legend accesskey="y">About You (ALT + Y)</legend>
<label for="userName">User name:</label> <input type="text" name="txtUserName" size="20" id="userName" />
<label for="password">Password:</label> <input type="password" name="pwdPassword" size="20" id="password" />
<label for="confPassword">Confirm Password:</label> <input type="password" name="pwdPasswordConf" size="20" id="confPassword" />
   
<label for="firstName">First name:</label> <input type="text" name="txtFirstName" size="20" id="firstName" />
<label for="lastName">Last name:</label> <input type="text" name="txtLastName" size="20" id="lastName" />
   
<label for="email">Email address:</label> <input type="text" name="txtEmail" size="20" id="email" />
   
Gender: <input type="radio" name="radSex" value="male" />Male
<input type="radio" name="radSex" value="female" />Female
  

</fieldset> <fieldset> 

   <legend accesskey="u">About Us (ALT + U)</legend>
<label for="referrer">How did you hear about us?</label>: 
     <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>
   
<label for="mailList">Please select</label> <input type="checkbox" name="chkMailingList" id="mailList" />

</fieldset> <input type="submit" value="Register now" /> </form> </body> </html> 

</source>


Set margin, padding and border for form

   <source lang="html4strict">

<!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>

Contact Form

     <form id="form1" name="form1" method="post" action="/">
   
     <label for="fmtitle" accesskey="i">Title</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">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

quid pro quo

</body> </html> 

</source>


simple form with label, text field and submit button

   <source lang="html4strict">

<!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="">

<label for="email">Enter your E-mail address.</label>

<input type="text" name="email" id="email" /> <input type="submit" name="subscribe" value="Subscribe" />

 </form>

</body> </html> 

</source>


styleless order form

   <source lang="html4strict">

<?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>

Order Form

<label for="fname">First Name<label>: <input class="fillout" name="fname" type="text" id="fname" />
Last Name: <input class="fillout" name="lname" type="text" id="lname" />
Email: <input class="fillout" name="email" type="text" id="email" />
Address: <input class="fillout" name="address1" type="text" id="address1" />
  <input class="fillout" name="address2" type="text" id="address2" />
City: <input class="fillout" name="city" type="text" id="city" />
State/Province: <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>
Zip Code: <input class="fillout" name="zip" type="text" id="zip" />
Daytime Phone: <input class="fillout" name="dayphone" type="text" id="dayphone" />
Product(s): <input name="product" type="checkbox" id="product" value="ezweb" />Web ($19.95) <input name="product" type="checkbox" id="product" value="ezwebultra" />Ping ($29.95)
Type of Credit Card: <input type="radio" name="cc" value="mastercard" /> 
       Mastercard 
       <input type="radio" name="cc" value="visa" />
       Visa
       <input type="radio" name="cc" value="discover" />
Discover
Name on Credit Card: <input class="fillout" name="ccname" type="text" id="ccname" />
Card Number: <input class="fillout" name="ccnumber" type="text" id="ccnumber" />
Card Expiration Date: <input class="fillout" name="ccnumber" type="text" id="ccnumber" />

<input type="submit" name="Submit" value="Submit" id="submit" /> </form> </body> </html> 

</source>


Styling text in form controls

   <source lang="html4strict">

<!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="">

  1. <label for="name">Your name</label> <input type="text" id="name" size="35" />
  2. <label for="email">Your E-mail address</label> <input type="text" id="email" size="35" />
  3. <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>
  4. <label for="message">Your message</label> <textarea id="message" cols="33" rows="10"></textarea>
  5. <input id="submit" type="submit" value="Send It!" />

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

</source>


Table and Form Example

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Table and Form Example</TITLE> </HEAD> <BODY>

Contact Form

<FORM ACTION="mailto: info@company.ru" METHOD="POST">

First Name: <INPUT NAME="firstname" SIZE="40">
Last Name: <INPUT NAME="lastname" SIZE="40">
Company: <INPUT NAME="company" SIZE="40">
Address:<INPUT NAME="address" SIZE="40">
City: <INPUT NAME="city" SIZE="25">
State: <INPUT NAME="state" SIZE="15">
Country: <INPUT NAME="country" SIZE="25">
Postal Code: <INPUT NAME="zip" SIZE="10">

Enter any comments below:
<TEXTAREA NAME="text" ROWS="5" COLS="50"></TEXTAREA>		 

   <INPUT TYPE="submit" VALUE="Submit">     
<INPUT TYPE="reset">

</FORM>

</BODY> </HTML> 

      </source>


Use DIV to wrap form control

   <source lang="html4strict">

<!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="/"> 

   <label for="q">Search</label>
   <input type="search" placeholder="keywords" autosave="com.domain.search" results="7" name="q" />

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

</source>


Use DL, DT to layout the form controls

   <source lang="html4strict">

<!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>

<form action="/path/to/script" id="thisform" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
<label for="remember">Remember this info?</label></dd>
<input type="checkbox" id="remember" name="remember" />

<input type="submit" value="submit" /></dt> </dl> </form>

</div> </body> </html> </source>

Use table to align the form controls

   <source lang="html4strict">

<?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">

Account name: <input type="text" name="txtLogin" size="20" />
Password <input type="password" name="txtPwd" size="20" />
<input type="submit" value="Log in" />

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

</source>


Use table to layout form controls

   <source lang="html4strict">

<!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;

}

  1. buttonSubmit {
margin-left: 220px;
margin-top: 4px;

} </style> </head> <body>

Account Information
Login Name* <input name="uname" type="text" size="12" maxlength="12" />
Password* <input name="pword" type="text" size="12" maxlength="12" />
Confirm Password* <input name="pword2" type="text" size="12" maxlength="12" />
Email Address* <input name="email" type="text" />
Confirm Email* <input type="text" name="email2" />
Contact Information
First Name* <input name="fname" type="text" size="11" />
Last Name* <input name="lname" type="text" size="11" />
Address 1* <input name="address1" type="text" size="11" />
Address 2 <input type="text" name="address2" />
City* <input type="text" name="city" />
State or Province* <select name="state"> 
           <option selected="selected" disabled="disabled">Select...</option> 
           <option value="alabama">Alabama</option>
</select>
Zip* <input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" />
Country* <input type="text" name="country" />
Gender* <input type="radio" name="sex" value="female" /> Female 
         <input type="radio" name="sex" value="male" /> Male
Misc. Information
Annual Household Income 
        <select name="income" size="1" > 
          <option selected="selected" disabled="disabled">Select...</option> 
           <option value="notsay">I"d rather not say</option>
</select>
Interests <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
Eye Color <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		 
   <input type="submit" name="Submit" value="Submit" id="buttonSubmit" /> 
   <input type="reset" name="Submit2" value="Reset" id="buttonReset" /> 
 </form>

</body> </html> 

</source>


Use UL and LI to layout form controls

   <source lang="html4strict">

<!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">

  • <label>Your name</label> <input type="text" />
  • <label>Your E-mail address</label> <input type="text" />
  • <label>Your telephone number</label> <input type="text" />

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

</source>


Wizard form

   <source lang="html4strict">

<?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>
Step One Step Two Step Three

<form name="frmExample" action="" method="post"> <fieldset> <legend>Contact details:</legend>

<label for="address1">Address 1:</label> <input type="text" name="txtAddress1" id="address1" size="30" />
<label for="address2">Address 2:</label> <input type="text" name="txtAddress2" id="address2" size="30" />
<label for="town">Town/Suburb:</label> <input type="text" name="txtTown" id="town" size="12" />
<label for="city">City/State:</label> <input type="text" name="txtState" id="city" size="12" />
<label for="postcode">Postal/Zip Code:</label> <input type="text" name="txtPostCode" id="postcode" size="12" />


<input type="submit" value="Back" /> <input type="submit" value="Proceed" />

</fieldset>
* = required </form> </body> </html> 

</source>


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

   <source lang="html4strict">

<!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">

  1. register {
 float: left;

}

  1. contactinfo {
 padding-left: 275px;

} </style> </head> <body>

Contact Form

     <form id="regform" name="regform" method="post" action="">

Register

         <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" />

Contact Information

         <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" />

     </form>

</body> </html>

</source>

Источник — «http://www.wbex.ru/index.php?title=HTML/CSS/Form_Style/form&oldid=5615»