HTML/CSS/Form Style/fieldset — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Версия 09:21, 26 мая 2010
Содержание
- 1 borderless fieldsets
- 2 fieldset background-color: #dfdfdf;
- 3 fieldset border: 1px solid #ccc;
- 4 fieldset margin: 2em 0;
- 5 fieldset padding: 1em;
- 6 Fieldsets and labels
- 7 nested fieldset background-color: #efefef;
- 8 noframes for frameset
- 9 Set border for fieldset
- 10 Set fieldset border to dashed style
- 11 Style for form fieldset
- 12 Use fieldset to create a set of form controls
- 13 utf-8 charset page
borderless fieldsets
<!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>Removing the border from fieldsets</title>
<style type="text/css">
ul { list-style: none; margin: 0; padding: 0; }
li { margin: .2em 0; }
fieldset {
border: none;
padding: 0;
}
</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Subscribe to our mailing list</legend>
<p><label for="email">Your E-mail address</label> <input type="text" id="email" /></p>
<fieldset>
<legend>Select your preferred format</legend>
<ul>
<li><label for="text"><input type="radio" name="pref" id="text" /> Plain text</label></li>
<li><label for="html"><input type="radio" name="pref" id="html" /> HTML</label></li>
</ul>
</fieldset>
<p><input type="submit" id="subscribe" value="Subscribe" /></p>
</fieldset>
</form>
</body>
</html>
fieldset background-color: #dfdfdf;
<!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">
fieldset {
background-color: #dfdfdf;
border: 1px solid #ccc;
margin: 2em 0;
padding: 1em;
}
</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>
fieldset border: 1px solid #ccc;
<!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">
fieldset {
background-color: #dfdfdf;
border: 1px solid #ccc;
margin: 2em 0;
padding: 1em;
}
</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>
fieldset margin: 2em 0;
<!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">
fieldset {
background-color: #dfdfdf;
border: 1px solid #ccc;
margin: 2em 0;
padding: 1em;
}
</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>
fieldset padding: 1em;
<!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">
fieldset {
background-color: #dfdfdf;
border: 1px solid #ccc;
margin: 2em 0;
padding: 1em;
}
</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>
Fieldsets and labels
<!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>Fieldsets and labels</title>
</head>
<body>
<form method="post" action="/">
<fieldset>
<legend>Subscribe to our mailing list</legend>
<p>
<label for="email">Your E-mail address</label>
<input type="text" name="email" id="email" />
</p>
<fieldset>
<legend>Select your preferred format</legend>
<ul>
<li>
<label for="text">
<input type="radio" name="pref" value="text" id="text" /> Plain text
</label>
</li>
<li>
<label for="html">
<input type="radio" name="pref" value="html" id="html" /> HTML
</label>
</li>
</ul>
</fieldset>
<p><input type="submit" id="subscribe" value="Subscribe" /></p>
</fieldset>
</form>
</body>
</html>
nested fieldset background-color: #efefef;
<!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">
fieldset fieldset {
background-color: #efefef;
margin: 1em 0;
}
</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>
noframes for frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
</head>
<frameset>
<frame />
<frame />
<noframes>
<body> In case of noframes
</body>
</noframes>
</frameset>
</html>
Set border for fieldset
<!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">
fieldset {
margin-bottom: 1em;
border: 1px solid #888;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}
</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>
Set fieldset border to dashed 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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
fieldset {
border: 1px dashed #555555;
padding: 20px;
}
</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>
Style for form fieldset
<!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 {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}
#divID #thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #660000;
}
#divID #thisform fieldset {
border: 1px solid #ccc;
padding: 0 20px;
}
</style>
</head>
<body>
<div id="divID">
<form action="/path/to/script" 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>
Use fieldset to create a set of form controls
<!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 fieldset element</title>
</head>
<body>
<form method="post" action="/">
<fieldset>
<legend>Subscribe to our mailing list</legend>
<label for="email">Enter your E-mail address</label>
<input type="text" id="email" name="email" />
<input type="submit" name="subscribe" value="Subscribe" />
</fieldset>
</form>
</body>
</html>
utf-8 charset page
<!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>
</head>
<body>
</body>
</html>