Set margin-top and display style for label : label « Form « HTML / CSS






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>

   
    
  








Related examples in the same category

1.'label' creates a label and associates it with another element
2.label:after
3.Using the label for element
4.Set style for form label
5.Set font for label
6.Use different font for label and other form controls
7.Set label control for right text alignment, padding right 20px
8.Set label after style
9.Set color, background color and font for a label control
10.Set Label padding and text transformation
11.Set label font family and font size
12.Inline label
13.Label style text-align: right
14.label background-color: pink;
15.label color: black;
16.label font-weight: bold;
17.label padding: 4px;
18.label text-transform: uppercase;
19.label font-family: Verdana, Arial, Helvetica, sans-serif;
20.label font-size: xx-small;
21.Positioning labels
22.Label above
23.label display: block;
24.label font-weight:bold;
25.label margin:5px 0;
26.label font-weight:bold;
27.label font-family: "Trebuchet MS", Verdana, Halvetica, Arial;
28.label font-size: 12px;
29.label color: #040507;
30.label display: block;
31.label text-align: right;
32.label width: 100px;
33.Adding underline for labels
34.Place label on the top of a field
35.label text-align: left; text-align: center;
36.Labelled fields
37.Using the label element
38.Implicit labels
39.label float:left; width:100px;
40.Fieldsets and labels
41.Aligning labels with List
42.Block-level labels
43.Top-positioned Text Labels
44.Left-aligned Text Labels