HTML/CSS/Form Style/label

Содержание

1 Inline label
2 Label above
3 label background-color: pink;
4 label color: black;
5 label display: block;
6 label font-family: Verdana, Arial, Helvetica, sans-serif;
7 label font-size: xx-small;
8 label font-weight: bold;
9 label padding: 4px;
10 Label style text-align: right
11 label text-transform: uppercase;
12 Positioning labels
13 Set color, background color and font for a label control
14 Set font for label
15 Set label after style
16 Set label control for right text alignment, padding right 20px
17 Set label font family and font size
18 Set Label padding and text transformation
19 Set margin-top and display style for label
20 My Amazing Web Site
- 20.1 Contact Form
- 20.2 quid pro quo
- 20.3 Set style for form label
- 20.4 Use different font for label and other form controls
- 20.5 Using the label for element

Inline label

   <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"> .states label {

 display:inline-block;
 width:24.5%;/* rounding error */
 margin:0;
 padding:0;
 white-space:nowrap;

} html>body label{display:inline;float:left} p { white-space:nowrap;margin:0 0 1em 0;padding:0} </style> </head> <body>

</body> </html>

</source>

Label above

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <head>
   <title>Register for E-Mail</title>
   <style rel="stylesheet" type="text/css">

body {

 color: #000000;
 background-color: #ffffff;
 font-family: arial, verdana, sans-serif;
 font-size: 12pt;

} fieldset {

 font-size: 12px;
 padding: 10px;
 width: 250px;

} label {

 font-size: 12px;

} </style>

 </head>
 <body>

<form name="frmExample" action="" method="post"> <fieldset> <legend>Register for e-mail updates:</legend>

<label for="fname">First name:</label>	<label for="lname">Last name:</label>
<input type="text" name="txtFirstName" id="fname" size="12" />	<input type="text" name="txtLastName" id="lname" size="12" />
<label for="email">E-mail address:</label>
<input type="text" name="txtEmail" id="email" size="12" />	<input type="submit" value="Register" />

</fieldset> </form> </body> </html>

</source>

label background-color: pink;

   <source lang="html4strict">

 <title></title>
 <style type="text/css">

label:after {

 content: ": ";

} label {

 background-color: pink;
 color: black;
 font-weight: bold;
 padding: 4px;
 text-transform: uppercase;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: xx-small;

}

 </style>

</head> <body>

 <label for="uname">Username</label>
 <input type="text" name="uname" id="uname" value="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form> </body> </html>

</source>

label color: black;

   <source lang="html4strict">

 <title></title>
 <style type="text/css">

label:after {

 content: ": ";

} label {

 background-color: pink;
 color: black;
 font-weight: bold;
 padding: 4px;
 text-transform: uppercase;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: xx-small;

}

 </style>

</head> <body>

 <label for="uname">Username</label>
 <input type="text" name="uname" id="uname" value="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form> </body> </html>

</source>

label display: block;

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

label {

   display:  block;
   font-weight:  bold;

}

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

label font-family: Verdana, Arial, Helvetica, sans-serif;

   <source lang="html4strict">

 <title></title>
 <style type="text/css">

label:after {

 content: ": ";

} label {

 background-color: pink;
 color: black;
 font-weight: bold;
 padding: 4px;
 text-transform: uppercase;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: xx-small;

}

 </style>

</head> <body>

 <label for="uname">Username</label>
 <input type="text" name="uname" id="uname" value="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form> </body> </html>

</source>

label font-size: xx-small;

   <source lang="html4strict">

 <title></title>
 <style type="text/css">

label:after {

 content: ": ";

} label {

 background-color: pink;
 color: black;
 font-weight: bold;
 padding: 4px;
 text-transform: uppercase;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: xx-small;

}

 </style>

</head> <body>

 <label for="uname">Username</label>
 <input type="text" name="uname" id="uname" value="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form> </body> </html>

</source>

label font-weight: bold;

   <source lang="html4strict">

 <title></title>
 <style type="text/css">

label:after {

 content: ": ";

} label {

 background-color: pink;
 color: black;
 font-weight: bold;
 padding: 4px;
 text-transform: uppercase;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: xx-small;

}

 </style>

</head> <body>

 <label for="uname">Username</label>
 <input type="text" name="uname" id="uname" value="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form> </body> </html>

</source>

label padding: 4px;

   <source lang="html4strict">

 <title></title>
 <style type="text/css">

label:after {

 content: ": ";

} label {

 background-color: pink;
 color: black;
 font-weight: bold;
 padding: 4px;
 text-transform: uppercase;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: xx-small;

}

 </style>

</head> <body>

 <label for="uname">Username</label>
 <input type="text" name="uname" id="uname" value="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form> </body> </html>

</source>

Label style text-align: right

   <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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>unstyled form</title> <style type="text/css"> label {

 text-align: right;
 width: 100px;
 display: block;
 float: left;
 clear: left;
 margin-right: 3px;
 cursor: pointer

} </style> </head> <body> <form id="form1" method="post" action="">

<label for="email">Email:</label> <input type="text" id="email" value="type here" />

<label for="occupation">Occupation:</label> <input type="text" id="occupation" value="type here" />

</form> </body> </html>

</source>

label text-transform: uppercase;

   <source lang="html4strict">

 <title></title>
 <style type="text/css">

label:after {

 content: ": ";

} label {

 background-color: pink;
 color: black;
 font-weight: bold;
 padding: 4px;
 text-transform: uppercase;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: xx-small;

}

 </style>

</head> <body>

 <label for="uname">Username</label>
 <input type="text" name="uname" id="uname" value="" />

 <label for="pname">Password</label>
 <input type="text" name="uname" id="uname" value="" />

 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form> </body> </html>

</source>

Positioning labels

   <source lang="html4strict">

<html>

 <head>
   <title>Positioning labels</title>
   <style rel="stylesheet" type="text/css">

body {

 color: #000000;
 background-color: #ffffff;
 font-family: arial, verdana, sans-serif;
 font-size: 12pt;

} fieldset {

 font-size: 12px;
 padding: 10px;
 width: 500px;

} span.required {

 font-weight: bold;
 font-size: 20px;
 color: #ff0000;

} td {

 font-size: 12px;

} </style>

 </head>
 <body>

<form name="frmExample" action="" method="post"> <fieldset> <legend>Contact details</legend>

Phone number *

      <input type="text" name="txtTelNo" size="10" />

</fieldset> </form> </body> </html>

</source>

Set color, background color and font for a label control

   <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"> <head> <title></title> <style type="text/css"> label {

background-color: gray;
color: black;
font-weight: bold;

} </style> </head> <body>

   <form method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" />

  <label for="pword">Password</label>
  <input type="text" name="pword" id="pword" value="" /> 
 
    <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html>

</source>

Set font for label

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Forms</title>
 <style type="text/css" media="screen">
 
 div {
   margin-bottom: 30px;
   }  
 
 
 #divID #name, #divID #email {
   width: 200px;
   }
 
 #divID #thisform label {
   font-family: Verdana, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #660000;
   }  
 </style>

</head> <body>

<label for="email">Email:</label>
<input type="text" id="email" name="email" />

<input type="checkbox" id="remember" name="remember" /> <label for="remember">Remember this info?</label>

</form>

</body> </html>

</source>

Set label after style

   <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"> <head> <title></title> <style type="text/css"> label:after {

content: ": ";

} </style> </head> <body>

   <form method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" />

  <label for="pword">Password</label>
  <input type="text" name="pword" id="pword" value="" /> 
 
    <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html>

</source>

Set label control for right text alignment, padding right 20px

   <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"> <head> <title></title> <style type="text/css"> label {

display: block;
text-align: right;
float: left;
width: 75px;
padding-right: 20px;

} </style> </head> <body>

  <form action="login.php" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" />

  <label for="pname">Password</label>
  <input type="text" name="pname" id="pname" value="" />

  <label for="recall">Remember you?</label> 
  <input type="checkbox" name="recall" id="recall"  class="checkbox" />

  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html>

</source>

Set label font family and font size

   <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"> <head> <title></title> <style type="text/css"> label {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;

}

</style> </head> <body>

   <form method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" />

  <label for="pword">Password</label>
  <input type="text" name="pword" id="pword" value="" /> 
 
    <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html>

</source>

Set Label padding and text transformation

   <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"> <head> <title></title> <style type="text/css"> label {

padding: 4px;
text-transform: uppercase;

} </style> </head> <body>

   <form method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" />

  <label for="pword">Password</label>
  <input type="text" name="pword" id="pword" value="" /> 
 
    <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html>

</source>

Set margin-top and display style for label

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

label {

 margin-top: .33em;
 display: block;

}

</style> </head> <body>

Contact Form

     <form id="form1" name="form1" method="post" action="/">
   
     <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" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</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>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

quid pro quo

</body> </html>

</source>

Set style for form label

   <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"> .fmname {

text-align: left;

} .fmemail {

text-align: center;

} </style> </head> <body class="required">

 <label for="fmname">Name</label>
 <input type="text" name="fmname" class="fmname" />
 <label for="fmemail">Email</label>
 <input type="text" name="fmemail" class="fmemail" />

</body> </html>

</source>

Use different font for label and other form controls

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Forms</title>
 <style type="text/css" media="screen">
 
 div {
   margin-bottom: 30px;
 }  
 
 #divID #thisform {
     font-family: Georgia, serif;
     font-size: 12px;
     color: #999;
   }
 
 #divID #thisform label {
   font-family: Verdana, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #660000;
   }
 </style>

</head> <body>

<label for="email">Email:</label>
<input type="text" id="email" name="email" />

<input type="checkbox" id="remember" name="remember" /> <label for="remember">Remember this info?</label>

</form>

</body> </html>

</source>

Using the label for element

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

 <title>Using the label element</title>

</head> <body> <form action="" method="post" name="frmLogin">

<label for="Uname">User name</label>	<input type="text" id="Uname" name="txtUserName" />
<label for="Pwd">Password</label>	<input type="password" id="Pwd" name="pwdPassword" />

</form> </body> </html>

</source>

HTML/CSS/Form Style/label

Содержание

Inline label

Label above

label background-color: pink;

label color: black;

label display: block;

label font-family: Verdana, Arial, Helvetica, sans-serif;

label font-size: xx-small;

label font-weight: bold;

label padding: 4px;

Label style text-align: right

label text-transform: uppercase;

Positioning labels

Set color, background color and font for a label control

Set font for label

Set label after style

Set label control for right text alignment, padding right 20px

Set label font family and font size

Set Label padding and text transformation

Set margin-top and display style for label

My Amazing Web Site

Contact Form

quid pro quo

Set style for form label

Use different font for label and other form controls

Using the label for element

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты