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

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

Версия 09:21, 26 мая 2010

form legend style

 

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



legend font-size: 1.4em;

 

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



legend font-weight: bold;

 

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



legend position: relative;

 

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



legend top: -.4em;

 

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



Organizing Elements With fieldset and legend Elements

 
<?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 &lt;fieldset&gt; and &lt;legend&gt;Elements</title>
</head>
<body>
<form action="" method="post" name="frmComp">
  <fieldset>
    <legend><em>Contact Information</em></legend>
      <label>First name: <input type="text" name="txtFName" size="20" /></label><br />
      <label>Last name: <input type="text" name="txtLName" size="20" /></label><br />
      <label>E-mail: <input type="text" name="txtEmail" size="20" /></label><br />
  </fieldset>
  <fieldset>
      <legend><em>Competition Question</em></legend>
  </fieldset>
  <fieldset>
    <legend><em>Question</em></legend>
      <label>say why you would like to win $10,000: <br />
        <textarea name="txtTiebreaker" rows="10" cols="40"></textarea>
      </label>
  </fieldset>
  <fieldset>
    <legend><em>Enter competition</em></legend>
       <input type="submit" value="Enter Competition" />
  </fieldset>
</form>
</body>
</html>



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

 

<!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>
            <p><strong><label for="realname">Name</label></strong><br />
            <input class="formField" type="text" id="realname" name="realname" size="30" /></p>
            <p><strong><label for="email">Email address</label></strong><br />
            <input class="formField" type="text" id="email" name="email" size="30" /></p>
            <p><strong><label for="phone">Telephone</label></strong><br />
            <input class="formField" type="text" id="phone" name="phone" size="30" /></p>
        </fieldset>
    </form>
</body>
</html>



Set form access key

 
<?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"><u>L</u>ogin Details (Alt + L)</legend>
    <table>
      <tr>
        <td class="caption">Email address:</td>
        <td><input type="text" name="txtEmail" size="20" /></td>
      </tr><tr>
        <td class="caption">Password</td>
        <td><input type="password" name="txtPwd" size="20" /></td>
      </tr>
    </table>
  </fieldset>
<br /><br />
  <fieldset>
  <legend accesskey="a"><u>A</u>ddress Details (Alt + A)</legend>
    <table>
      <tr>
        <td class="caption">Full name: </td>
        <td><input type="text" name="txtName" size="20" /></td>
      </tr><tr>
        <td class="caption">Street Address 1: </td>
        <td><input type="text" name="txtStreet1" size="40" /></td>
      </tr><tr>
        <td class="caption">Street Address 2: </td>
        <td><input type="text" name="txtStreet2" size="40" /></td>
      </tr><tr>
        <td class="caption">Town: </td>
        <td><input type="text" name="txtTown" size="20" /></td>
      </tr><tr>
        <td class="caption">City: </td>
        <td><input type="text" name="txtCity" size="20" /></td>
      </tr><tr>
        <td class="caption">State / Region: </td>
        <td><input type="text" name="txtState" size="20" /></td>
      </tr><tr>
        <td class="caption">Zip or Postal Code</td>
        <td><input type="text" name="txtZip" size="20" /></td>
      </tr>
    </table>
  </fieldset><br />
  <input type="submit" />
</form>

</body>
</html>



Set style for legend

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



Style for form legend

 

<!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>
<div id="divID">
<form action="" id="thisform" method="post">
  <fieldset>
    <legend>Sign In</legend>
    <p><label for="name" accesskey="9" >Name:</label><br />
    <input type="text" id="name" name="name" tabindex="1" /></p>
    <p><label for="email">Email:</label><br />
    <input type="text" id="email" name="email" tabindex="2" /></p>
    <p><input type="checkbox" id="remember" name="remember" tabindex="3" /> 
    <label for="remember">Remember this info?</label></p>
    <p><input type="submit" value="submit" tabindex="4" /></p>
  </fieldset>
</form>
</div>
</body>
</html>



The legend element

 
<!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> 
      <ul> 
        <li><label for="top1"><input type="checkbox" id="top1" name="top1" value="peppers" /> Peppers</label></li>
        <li><label for="top2"><input type="checkbox" id="top2" name="top2" value="xcheese" /> Extra cheese</label></li> 
        <li><label for="top3"><input type="checkbox" id="top3" name="top3" value="mushrooms" /> Mushrooms</label></li> 
        <li><label for="top4"><input type="checkbox" id="top4" name="top4" value="olives" /> Olives</label></li> 
      </ul> 
    </fieldset>
  </form>
</body>
</html>