HTML/CSS/Form Style/legend — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 08:17, 26 мая 2010
Содержание
- 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 <fieldset> and <legend>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>