HTML/CSS/Form Style/fieldset

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

borderless fieldsets

   <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>Removing the border from fieldsets</title>
 <style type="text/css">
 ul { list-style: none; margin: 0; padding: 0; }
 li { margin: .2em 0; }
 
 fieldset {
   border: none;
   padding: 0;
 }
 </style>

</head> <body> 

   <form method="post" action="">
     <fieldset>
       <legend>Subscribe to our mailing list</legend>

<label for="email">Your E-mail address</label> <input type="text" id="email" />

         <fieldset>
           <legend>Select your preferred format</legend>
  • <label for="text"><input type="radio" name="pref" id="text" /> Plain text</label>
  • <label for="html"><input type="radio" name="pref" id="html" /> HTML</label>
         </fieldset>

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

     </fieldset>
   </form>

</body> </html> 

</source>


fieldset background-color: #dfdfdf;

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

fieldset { 

   background-color:  #dfdfdf;
   border:  1px solid #ccc;
   margin:  2em 0;
   padding:  1em;

} 

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


fieldset border: 1px solid #ccc;

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

fieldset { 

   background-color:  #dfdfdf;
   border:  1px solid #ccc;
   margin:  2em 0;
   padding:  1em;

} 

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


fieldset margin: 2em 0;

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

fieldset { 

   background-color:  #dfdfdf;
   border:  1px solid #ccc;
   margin:  2em 0;
   padding:  1em;

} 

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


fieldset padding: 1em;

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

fieldset { 

   background-color:  #dfdfdf;
   border:  1px solid #ccc;
   margin:  2em 0;
   padding:  1em;

} 

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


Fieldsets and labels

   <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>Fieldsets and labels</title>

</head> <body> 

 <form method="post" action="/">
   
   <fieldset> 
     <legend>Subscribe to our mailing list</legend>

<label for="email">Your E-mail address</label> <input type="text" name="email" id="email" /> 

       <fieldset> 
         <legend>Select your preferred format</legend>
  • <label for="text"> <input type="radio" name="pref" value="text" id="text" /> Plain text </label>
  • <label for="html"> <input type="radio" name="pref" value="html" id="html" /> HTML </label> 
       </fieldset>

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

   </fieldset>
    
 </form>

</body> </html> 

</source>


nested fieldset background-color: #efefef;

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

fieldset fieldset { 

   background-color:  #efefef;
   margin:  1em 0;

} 

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


noframes for frameset

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

</head> <frameset> 

   <frame />
   <frame />
   <noframes>
       <body> In case of noframes
       </body>
   </noframes>

</frameset> </html> 

</source>


Set border for fieldset

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

 margin-bottom: 1em;
 border: 1px solid #888;
 border-right: 1px solid #666;
 border-bottom: 1px solid #666;

}

</style> </head> <body> 

     <form id="form1" name="form1" method="post" action="/">
       <fieldset>
       <legend>Contact Information</legend>
       <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" />
       </fieldset>
       <fieldset>
       <legend>Your Message</legend>
       <label for="fmstate" accesskey="y">Subject</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>
       </fieldset>
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

</body> </html> 

</source>


Set fieldset border to dashed style

   <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=utf-8" />
   <title></title>
   <style type="text/css" media="Screen">

fieldset { 

   border: 1px dashed #555555;
   padding: 20px;

} 

   </style>

</head> <body> 

   <form action="" enctype="x-www-form-encoded" method="post">
       <fieldset>
           <legend>Personal information</legend>

<label for="realname">Name</label>
<input class="formField" type="text" id="realname" name="realname" size="30" />

<label for="email">Email address</label>
<input class="formField" type="text" id="email" name="email" size="30" />

<label for="phone">Telephone</label>
<input class="formField" type="text" id="phone" name="phone" size="30" />

       </fieldset>
   </form>

</body> </html> 

</source>


Style for form fieldset

   <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">
 
 #divID #thisform {
     font-family: Georgia, serif;
     font-size: 12px;
     color: #999;
     }
 
 #divID #thisform label {
    font-family: Verdana, sans-serif;
     font-weight: bold;
     color: #660000;
     }
 
 #divID #thisform fieldset {
   border: 1px solid #ccc;
   padding: 0 20px;
   }
 </style>

</head> <body>

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

 <fieldset>
   <legend>Sign In</legend>

<label for="name" accesskey="9" >Name:</label>
<input type="text" id="name" name="name" tabindex="1" />

<label for="email">Email:</label>
<input type="text" id="email" name="email" tabindex="2" />

<input type="checkbox" id="remember" name="remember" tabindex="3" /> <label for="remember">Remember this info?</label>

<input type="submit" value="submit" tabindex="4" />

 </fieldset>

</form>

</body> </html> 

</source>


Use fieldset to create a set of 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>The fieldset element</title>

</head> <body> 

 <form method="post" action="/"> 
   <fieldset> 
     <legend>Subscribe to our mailing list</legend> 
     <label for="email">Enter your E-mail address</label> 
     <input type="text" id="email" name="email" /> 
     <input type="submit" name="subscribe" value="Subscribe" /> 
   </fieldset> 
 </form>

</body> </html> 

</source>


utf-8 charset page

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

   <title></title>

</head> <body> </body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Form_Style/fieldset&oldid=5601»