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