HTML/CSS/Form Style/label

Материал из Web эксперт
Перейти к: навигация, поиск

Inline label

 
<!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>
<div class="states">
<p>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
</p>
<p>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
</p>
<p>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
</p>
<p>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
  <label for="al"><input id="al" name="al" type="checkbox" value="Y">A</label>
</p>
</div>
</body>
</html>



Label above

 

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//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>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>
<table>
  <tr>
    <td><label for="fname">First name:</label></td>
    <td><label for="lname">Last name:</label></td>
  </tr>
  <tr>
    <td><input type="text" name="txtFirstName" id="fname" size="12" /></td>
    <td><input type="text" name="txtLastName" id="lname" size="12" /></td>
  </tr>
  <tr>
    <td><label for="email">E-mail address:</label></td>
    <td></td>
  </tr>
  <tr>
    <td><input type="text" name="txtEmail" id="email" size="12" /></td>
    <td><input type="submit" value="Register" /></td>
  </tr>
</table>
</fieldset>
</form>
</body>
</html>



label background-color: pink;

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <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>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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



label color: black;

 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <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>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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



label display: block;

 

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



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

 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <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>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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



label font-size: xx-small;

 



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <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>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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



label font-weight: bold;

 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <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>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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



label padding: 4px;

 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <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>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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



Label style text-align: right

 

<!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="">
  <p><label for="name">Name:</label> 
    <input type="text" id="name" value="type here" />
  </p>
  <p><label for="email">Email:</label> 
    <input type="text" id="email" value="type here" />
  </p>
  <p><label for="age">Age:</label> 
    <input type="text" id="age" value="type here" />
  </p>
  <p><label for="occupation">Occupation:</label> 
    <input type="text" id="occupation" value="type here" />
  </p>
</form>
</body>
</html>



label text-transform: uppercase;

 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <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>

<form action="" method="post">
  <label for="uname">Username</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <label for="pname">Password</label>
  <input type="text" name="uname" id="uname" value="" /><br />
  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

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



Positioning labels

 
<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>
<table>
  <tr>
    <td class="label">Phone number <span class="required">*</span></td>
    <td><input type="text" name="txtTelAreaCode" size="5" />
       <input type="text" name="txtTelNo" size="10" />
  </tr>
</table>
</fieldset>
</form>
</body>
</html>



Set color, background color and font for a label control

 
<!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="" /><br />
   <label for="pword">Password</label>
   <input type="text" name="pword" id="pword" value="" /> <br /> 
     <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



Set font for label

 

<!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">
  
  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>
<div id="divID">
<form action="" id="thisform" method="post">
  <p><label for="name">Name:</label><br />
  <input type="text" id="name" name="name" /></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" /></p>
  <p><input type="checkbox" id="remember" name="remember" /> 
  <label for="remember">Remember this info?</label></p>
  <p><input type="submit" value="submit" /></p>
</form>
</div>
</body>
</html>



Set label after style

 
<!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="" /><br />
   <label for="pword">Password</label>
   <input type="text" name="pword" id="pword" value="" /> <br /> 
     <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



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

 
<!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="" /><br />
   <label for="pname">Password</label>
   <input type="text" name="pname" id="pname" value="" /><br />
   <label for="recall">Remember you?</label> 
   <input type="checkbox" name="recall" id="recall"  class="checkbox" /><br />
   <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



Set label font family and font size

 
<!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="" /><br />
   <label for="pword">Password</label>
   <input type="text" name="pword" id="pword" value="" /> <br /> 
     <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



Set Label padding and text transformation

 
<!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="" /><br />
   <label for="pword">Password</label>
   <input type="text" name="pword" id="pword" value="" /> <br /> 
     <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



Set margin-top and display style for label

 

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

label {
  margin-top: .33em;
  display: block;
}

</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
      <form id="form1" name="form1" method="post" action="/">
    
      <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" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></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>
    
        <input type="submit" name="submit" value="send" class="submit" />
      </form>
    </div>
  </div>
  <div id="extra">
    <h2>quid pro quo</h2>
  </div>
  <div id="footer">
    <p>ask.</p>
  </div>
</div>
</body>
</html>



Set style for form label

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



Use different font for label and other form controls

 

<!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">
  
  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>
<div id="divID">
<form action="" id="thisform" method="post">
  <p><label for="name">Name:</label><br />
  <input type="text" id="name" name="name" /></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" /></p>
  <p><input type="checkbox" id="remember" name="remember" /> 
  <label for="remember">Remember this info?</label></p>
  <p><input type="submit" value="submit" /></p>
</form>
</div>
</body>
</html>



Using the label for element

 
<?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>Using the label element</title>
</head>
<body>
<form action="" method="post" name="frmLogin">
  <table>
    <tr>
      <td><label for="Uname">User name</label></td>
      <td><input type="text" id="Uname" name="txtUserName" /></td>
    </tr>
    <tr>
      <td><label for="Pwd">Password</label></td>
      <td><input type="password" id="Pwd" name="pwdPassword" /></td>
    </tr>
  </table>
</form>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Form_Style/label&oldid=5583»