HTML/CSS/Form Style/legend

Содержание

1 form legend style
2 legend font-size: 1.4em;
3 legend font-weight: bold;
4 legend position: relative;
5 legend top: -.4em;
6 Organizing Elements With fieldset and legend Elements
7 Set font, color, background color and text-transform for legend tag
8 Set form access key
9 Set style for legend
10 Style for form legend
11 The legend element

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>

HTML/CSS/Form Style/legend

Содержание

form legend style

legend font-size: 1.4em;

legend font-weight: bold;

legend position: relative;

legend top: -.4em;

Organizing Elements With fieldset and legend Elements

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

Set form access key

Set style for legend

Style for form legend

The legend element

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты