HTML/CSS/Form Style/legend

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

form legend 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> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> legend {

 background:#ccc;
 border:1px solid #000;

}

  • html legend{
 margin-top:-10px;
 position:relative;

} </style> </head> <body> <form name="form1" id="form1" method="post" action="">

 <fieldset>
 <legend>Testing</legend>
 </fieldset>

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

</source>
   
  


legend font-size: 1.4em;

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

legend {

   font-size:  1.4em;
   font-weight:  bold;
   position:  relative;
   top:  -.4em;

}

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


legend font-weight: bold;

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

legend {

   font-size:  1.4em;
   font-weight:  bold;
   position:  relative;
   top:  -.4em;

}

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


legend position: relative;

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

legend {

   font-size:  1.4em;
   font-weight:  bold;
   position:  relative;
   top:  -.4em;

}

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


legend top: -.4em;

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

legend {

   font-size:  1.4em;
   font-weight:  bold;
   position:  relative;
   top:  -.4em;

}

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


Organizing Elements With fieldset and legend Elements

   <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>Organizing Elements With <fieldset> and <legend>Elements</title>

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

 <fieldset>
   <legend>Contact Information</legend>
     <label>First name: <input type="text" name="txtFName" size="20" /></label>
<label>Last name: <input type="text" name="txtLName" size="20" /></label>
<label>E-mail: <input type="text" name="txtEmail" size="20" /></label>
</fieldset> <fieldset> <legend>Competition Question</legend> </fieldset> <fieldset> <legend>Question</legend> <label>say why you would like to win $10,000:
<textarea name="txtTiebreaker" rows="10" cols="40"></textarea> </label> </fieldset> <fieldset> <legend>Enter competition</legend> <input type="submit" value="Enter Competition" /> </fieldset>

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

</source>
   
  


Set font, color, background color and text-transform for legend tag

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

legend {

   padding: 0 10px;
   font: 12px Verdana, Arial, sans-serif;
   color: #000000;
   background-color: #ccc;
   text-transform: uppercase;

}

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


Set form access key

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

 width: 500px;

} </style> </head> <body> <form action="" method="post" name="">

 <fieldset>
   <legend accesskey="l">Login Details (Alt + L)</legend>
Email address: <input type="text" name="txtEmail" size="20" />
Password <input type="password" name="txtPwd" size="20" />
 </fieldset>



 <fieldset>
 <legend accesskey="a">Address Details (Alt + A)</legend>
Full name: <input type="text" name="txtName" size="20" />
Street Address 1: <input type="text" name="txtStreet1" size="40" />
Street Address 2: <input type="text" name="txtStreet2" size="40" />
Town: <input type="text" name="txtTown" size="20" />
City: <input type="text" name="txtCity" size="20" />
State / Region: <input type="text" name="txtState" size="20" />
Zip or Postal Code <input type="text" name="txtZip" size="20" />
 </fieldset>
<input type="submit" />

</form>

</body> </html>

</source>
   
  


Set style for legend

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

 font-weight: bold;
 border: 1px solid #888;
 border-right: 1px solid #666;
 border-bottom: 1px solid #666;
 padding: .5em;
 background-color: #CCC;

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


Style for form legend

   <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 legend {
   font-family: arial, sans-serif;
   font-weight: bold;
   font-size: 90%;
   color: #666;
   background: #eee;
   border: 1px solid #ccc;
   border-bottom-color: #999;
   border-right-color: #999;
   padding: 4px 8px;
   }
 </style>

</head> <body>

<form action="" 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>
   
  


The legend element

   <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 legend element</title>

</head> <body>

 <form method="post" action="/">
   
   <fieldset> 
     <legend accesskey="T">Choose additional toppings</legend> 
  • <label for="top1"><input type="checkbox" id="top1" name="top1" value="peppers" /> Peppers</label>
  • <label for="top2"><input type="checkbox" id="top2" name="top2" value="xcheese" /> Extra cheese</label>
  • <label for="top3"><input type="checkbox" id="top3" name="top3" value="mushrooms" /> Mushrooms</label>
  • <label for="top4"><input type="checkbox" id="top4" name="top4" value="olives" /> Olives</label>
   </fieldset>
 </form>

</body> </html>

</source>