http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FForm_Style%2Flabel
HTML/CSS/Form Style/label - История изменений
2026-04-04T12:31:31Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Form_Style/label&diff=5582&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Form_Style/label&diff=5583&oldid=prev
Admin: 1 версия
2010-05-26T08:17:01Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Inline label==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Untitled Document</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style type="text/css"><br />
.states label {<br />
display:inline-block;<br />
width:24.5%;/* rounding error */<br />
margin:0;<br />
padding:0;<br />
white-space:nowrap;<br />
}<br />
html>body label{display:inline;float:left}<br />
p { white-space:nowrap;margin:0 0 1em 0;padding:0}<br />
</style><br />
</head><br />
<body><br />
<div class="states"><br />
<p><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
</p><br />
<p><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
</p><br />
<p><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
</p><br />
<p><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
<label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label><br />
</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Label above==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Register for E-Mail</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
color: #000000;<br />
background-color: #ffffff;<br />
font-family: arial, verdana, sans-serif;<br />
font-size: 12pt;<br />
}<br />
fieldset {<br />
font-size: 12px;<br />
padding: 10px;<br />
width: 250px;<br />
}<br />
label {<br />
font-size: 12px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<form name="frmExample" action="" method="post"><br />
<fieldset><br />
<legend>Register for e-mail updates:</legend><br />
<table><br />
<tr><br />
<td><label for="fname">First name:</label></td><br />
<td><label for="lname">Last name:</label></td><br />
</tr><br />
<tr><br />
<td><input type="text" name="txtFirstName" id="fname" size="12" /></td><br />
<td><input type="text" name="txtLastName" id="lname" size="12" /></td><br />
</tr><br />
<tr><br />
<td><label for="email">E-mail address:</label></td><br />
<td></td><br />
</tr><br />
<tr><br />
<td><input type="text" name="txtEmail" id="email" size="12" /></td><br />
<td><input type="submit" value="Register" /></td><br />
</tr><br />
</table><br />
</fieldset><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==label background-color: pink;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label:after {<br />
content: ": ";<br />
}<br />
label {<br />
background-color: pink;<br />
color: black;<br />
font-weight: bold;<br />
padding: 4px;<br />
text-transform: uppercase;<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: xx-small;<br />
}<br />
<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<form action="" method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pname">Password</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
<br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==label color: black;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label:after {<br />
content: ": ";<br />
}<br />
label {<br />
background-color: pink;<br />
color: black;<br />
font-weight: bold;<br />
padding: 4px;<br />
text-transform: uppercase;<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: xx-small;<br />
}<br />
<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<form action="" method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pname">Password</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
<br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==label display: block;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><br />
<title>Example form</title><br />
<style rel="stylesheet" type="text/css" media="screen"><br />
<br />
label {<br />
display: block;<br />
font-weight: bold;<br />
}<br />
<br />
</style><br />
</head><br />
<br />
<body><br />
<form id="" action="" method="post"><br />
<br />
<fieldset id="name"><br />
<legend>Name</legend><br />
<label>Title<br />
<select id="title1" name="title1"><br />
<option selected="selected">Mr.</option><br />
<option>Mrs.</option><br />
<option>Ms.</option><br />
</select><br />
</label><br />
<label>First name<br />
<input id="first-name" name="first-name" type="text" /><br />
</label><br />
<label>Last name<br />
<input id="las-name" name="last-name" type="text" /><br />
</label><br />
<br /><br />
</fieldset><br />
<fieldset id="address"><br />
<legend>Address</legend><br />
<label>Street<br />
<input id="street" name="street" type="text" /><br />
</label><br />
<br /><br />
<label>City<br />
<input id="city" name="city" type="text" /><br />
</label><br />
<label>State<br />
<input id="state" name="state" type="text" /><br />
</label><br />
<label>Zip code<br />
<input id="zip" name="zip" type="text" /><br />
</label><br />
<br /><br />
<label>Country<br />
<input id="country" name="country" type="text" /><br />
</label><br />
<br /><br />
</fieldset><br />
<fieldset id="payment"><br />
<legend>Payment option</legend><br />
<fieldset id="credit_card"><br />
<legend>Credit card</legend><br />
<label><input id="visa" name="visa" type="radio" /> Visa</label><br />
<label><input id="mastercard" name="mastercard" type="radio" /> Mastercard</label><br />
<label><input id="discover" name="discover" type="radio" /> Discover</label><br />
<br /><br />
</fieldset><br />
<label>Card number<br />
<input id="card_number" name="card_number" type="text" /><br />
</label><br />
<label>Expiration date<br />
<input id="expiration" name="expiration" type="text" /><br />
</label><br />
<br /><br />
<input class="submit" type="submit" value="Submit" /><br />
<br /><br />
</fieldset><br />
<br />
</form><br />
</body><br />
<br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==label font-family: Verdana, Arial, Helvetica, sans-serif;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label:after {<br />
content: ": ";<br />
}<br />
label {<br />
background-color: pink;<br />
color: black;<br />
font-weight: bold;<br />
padding: 4px;<br />
text-transform: uppercase;<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: xx-small;<br />
}<br />
<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<form action="" method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pname">Password</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
<br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==label font-size: xx-small;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label:after {<br />
content: ": ";<br />
}<br />
label {<br />
background-color: pink;<br />
color: black;<br />
font-weight: bold;<br />
padding: 4px;<br />
text-transform: uppercase;<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: xx-small;<br />
}<br />
<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<form action="" method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pname">Password</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
<br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==label font-weight: bold;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label:after {<br />
content: ": ";<br />
}<br />
label {<br />
background-color: pink;<br />
color: black;<br />
font-weight: bold;<br />
padding: 4px;<br />
text-transform: uppercase;<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: xx-small;<br />
}<br />
<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<form action="" method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pname">Password</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
<br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==label padding: 4px;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label:after {<br />
content: ": ";<br />
}<br />
label {<br />
background-color: pink;<br />
color: black;<br />
font-weight: bold;<br />
padding: 4px;<br />
text-transform: uppercase;<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: xx-small;<br />
}<br />
<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<form action="" method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pname">Password</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
<br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Label style text-align: right==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title>unstyled form</title><br />
<style type="text/css"><br />
label {<br />
text-align: right;<br />
width: 100px;<br />
display: block;<br />
float: left;<br />
clear: left;<br />
margin-right: 3px;<br />
cursor: pointer<br />
}<br />
</style><br />
</head><br />
<body><br />
<form id="form1" method="post" action=""><br />
<p><label for="name">Name:</label> <br />
<input type="text" id="name" value="type here" /><br />
</p><br />
<p><label for="email">Email:</label> <br />
<input type="text" id="email" value="type here" /><br />
</p><br />
<p><label for="age">Age:</label> <br />
<input type="text" id="age" value="type here" /><br />
</p><br />
<p><label for="occupation">Occupation:</label> <br />
<input type="text" id="occupation" value="type here" /><br />
</p><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==label text-transform: uppercase;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label:after {<br />
content: ": ";<br />
}<br />
label {<br />
background-color: pink;<br />
color: black;<br />
font-weight: bold;<br />
padding: 4px;<br />
text-transform: uppercase;<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: xx-small;<br />
}<br />
<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<form action="" method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pname">Password</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
<br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Positioning labels==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Positioning labels</title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
color: #000000;<br />
background-color: #ffffff;<br />
font-family: arial, verdana, sans-serif;<br />
font-size: 12pt;<br />
}<br />
fieldset {<br />
font-size: 12px;<br />
padding: 10px;<br />
width: 500px;<br />
}<br />
span.required {<br />
font-weight: bold;<br />
font-size: 20px;<br />
color: #ff0000;<br />
}<br />
td {<br />
font-size: 12px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<form name="frmExample" action="" method="post"><br />
<fieldset><br />
<legend>Contact details</legend><br />
<table><br />
<tr><br />
<td class="label">Phone number <span class="required">*</span></td><br />
<td><input type="text" name="txtTelAreaCode" size="5" /><br />
<input type="text" name="txtTelNo" size="10" /><br />
</tr><br />
</table><br />
</fieldset><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set color, background color and font for a label control==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label {<br />
background-color: gray;<br />
color: black;<br />
font-weight: bold;<br />
}<br />
</style><br />
</head><br />
<body><br />
<form method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pword">Password</label><br />
<input type="text" name="pword" id="pword" value="" /> <br /> <br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set font for label==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Forms</title><br />
<style type="text/css" media="screen"><br />
<br />
div {<br />
margin-bottom: 30px;<br />
} <br />
<br />
<br />
#divID #name, #divID #email {<br />
width: 200px;<br />
}<br />
<br />
#divID #thisform label {<br />
font-family: Verdana, sans-serif;<br />
font-size: 12px;<br />
font-weight: bold;<br />
color: #660000;<br />
} <br />
</style><br />
</head><br />
<body><br />
<div id="divID"><br />
<form action="" id="thisform" method="post"><br />
<p><label for="name">Name:</label><br /><br />
<input type="text" id="name" name="name" /></p><br />
<p><label for="email">Email:</label><br /><br />
<input type="text" id="email" name="email" /></p><br />
<p><input type="checkbox" id="remember" name="remember" /> <br />
<label for="remember">Remember this info?</label></p><br />
<p><input type="submit" value="submit" /></p><br />
</form><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set label after style==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label:after {<br />
content: ": ";<br />
}<br />
</style><br />
</head><br />
<body><br />
<form method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pword">Password</label><br />
<input type="text" name="pword" id="pword" value="" /> <br /> <br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set label control for right text alignment, padding right 20px==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label {<br />
display: block;<br />
text-align: right;<br />
float: left;<br />
width: 75px;<br />
padding-right: 20px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<form action="login.php" method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pname">Password</label><br />
<input type="text" name="pname" id="pname" value="" /><br /><br />
<label for="recall">Remember you?</label> <br />
<input type="checkbox" name="recall" id="recall" class="checkbox" /><br /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set label font family and font size==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label {<br />
font-family: Verdana, Arial, Helvetica, sans-serif;<br />
font-size: xx-small;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<form method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pword">Password</label><br />
<input type="text" name="pword" id="pword" value="" /> <br /> <br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set Label padding and text transformation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
label {<br />
padding: 4px;<br />
text-transform: uppercase;<br />
}<br />
</style><br />
</head><br />
<body><br />
<form method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pword">Password</label><br />
<input type="text" name="pword" id="pword" value="" /> <br /> <br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set margin-top and display style for label==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
<br />
label {<br />
margin-top: .33em;<br />
display: block;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="header"><br />
<h1>My Amazing Web Site </h1><br />
</div><br />
<div id="wrapper"><br />
<div id="content"><br />
<h2>Contact Form</h2><br />
<form id="form1" name="form1" method="post" action="/"><br />
<br />
<label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label><br />
<select name="fmtitle" id="fmtitle"><br />
<option value="ms">Ms.</option><br />
<option value="mrs">Mrs.</option><br />
<option value="miss">Miss</option><br />
<option value="mr">Mr.</option><br />
</select><br />
<br />
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label><br />
<input type="text" name="fmname" id="fmname" /><br />
<br />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label><br />
<input type="text" name="fmemail" id="fmemail" /><br />
<br />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label><br />
<input type="text" name="fmstate" id="fmstate" /><br />
<br />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label><br />
<input type="text" name="fmcountry" id="fmcountry" /><br />
<br />
<label for="fmmsg"><span class="akey">M</span>essage</label><br />
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea><br />
<br />
<input type="submit" name="submit" value="send" class="submit" /><br />
</form><br />
</div><br />
</div><br />
<div id="extra"><br />
<h2>quid pro quo</h2><br />
</div><br />
<div id="footer"><br />
<p>ask.</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set style for form label==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
.fmname {<br />
text-align: left;<br />
}<br />
.fmemail {<br />
text-align: center;<br />
}<br />
</style><br />
</head><br />
<body class="required"><br />
<label for="fmname">Name</label><br />
<input type="text" name="fmname" class="fmname" /><br />
<label for="fmemail">Email</label><br />
<input type="text" name="fmemail" class="fmemail" /><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Use different font for label and other form controls==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Forms</title><br />
<style type="text/css" media="screen"><br />
<br />
div {<br />
margin-bottom: 30px;<br />
} <br />
<br />
#divID #thisform {<br />
font-family: Georgia, serif;<br />
font-size: 12px;<br />
color: #999;<br />
}<br />
<br />
#divID #thisform label {<br />
font-family: Verdana, sans-serif;<br />
font-size: 12px;<br />
font-weight: bold;<br />
color: #660000;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="divID"><br />
<form action="" id="thisform" method="post"><br />
<p><label for="name">Name:</label><br /><br />
<input type="text" id="name" name="name" /></p><br />
<p><label for="email">Email:</label><br /><br />
<input type="text" id="email" name="email" /></p><br />
<p><input type="checkbox" id="remember" name="remember" /> <br />
<label for="remember">Remember this info?</label></p><br />
<p><input type="submit" value="submit" /></p><br />
</form><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Using the label for element==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Using the label element</title><br />
</head><br />
<body><br />
<form action="" method="post" name="frmLogin"><br />
<table><br />
<tr><br />
<td><label for="Uname">User name</label></td><br />
<td><input type="text" id="Uname" name="txtUserName" /></td><br />
</tr><br />
<tr><br />
<td><label for="Pwd">Password</label></td><br />
<td><input type="password" id="Pwd" name="pwdPassword" /></td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html><br />
</source></div>
Admin