Top-positioned Text Labels : label « Form « HTML / CSS






Top-positioned Text 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>
  <title>Top-positioned Text Labels</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen">

fieldset
{
  margin: 0 0 1.5em 0;
  padding: 0;
}

legend
{
  color: #000;
  font-weight: bold;
}

fieldset ol
{
  padding: 1em 1em 0 1em;
  list-style: none;
}

fieldset li
{
  padding-bottom: 1em;
}

label
{
  display: block;
}

fieldset.submit
{
  border-style: none;
}
  </style>
</head>
<body>
  <div id="page">
    <div id="header">
      <h1>
        Top-positioned Text Labels
      </h1>
    </div>
    <div id="content">
      <p>
        Fill in your details below.
      </p>
      <form action="example.php">
        <fieldset>
          <legend>
            Contact Details
          </legend>
          <ol>
            <li>
              <label for="name">
                Name:
              </label>
              <input id="name" name="name" class="text" type="text" />
            </li>
            <li>
              <label for="email">
                Email address:
              </label>
              <input id="email" name="email" class="text" type="text" />
            </li>
            <li>
              <label for="phone">
                Telephone:
              </label>
              <input id="phone" name="phone" class="text" type="text" />
            </li>
          </ol>
        </fieldset>
        <fieldset class="alt">
          <legend>
            Delivery Address
          </legend>
          <ol>
            <li>
              <label for="address1">
                Address 1:
              </label>
              <input id="address1" name="address1" class="text" type="text" />
            </li>
            <li>
              <label for="address2">
                Address 2:
              </label>
              <input id="address2" name="address2" class="text" type="text" />
            </li>
            <li>
              <label for="suburb">
                Suburb/Town:
              </label>
              <input id="suburb" name="suburb" class="text" type="text" />
            </li>
            <li>
              <label for="postcode">
                Postcode:
              </label>
              <input id="postcode" name="postcode" class="text textSmall" type="text" />
            </li>
            <li>
              <label for="country">
                Country:
              </label>
              <input id="country" name="country" class="text" type="text" />
            </li>
          </ol>
        </fieldset>
        <fieldset class="submit">
          <input class="submit" type="submit" value="Begin download" />
        </fieldset>
      </form>
    </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 margin-top and display style for label
8.Set label control for right text alignment, padding right 20px
9.Set label after style
10.Set color, background color and font for a label control
11.Set Label padding and text transformation
12.Set label font family and font size
13.Inline label
14.Label style text-align: right
15.label background-color: pink;
16.label color: black;
17.label font-weight: bold;
18.label padding: 4px;
19.label text-transform: uppercase;
20.label font-family: Verdana, Arial, Helvetica, sans-serif;
21.label font-size: xx-small;
22.Positioning labels
23.Label above
24.label display: block;
25.label font-weight:bold;
26.label margin:5px 0;
27.label font-weight:bold;
28.label font-family: "Trebuchet MS", Verdana, Halvetica, Arial;
29.label font-size: 12px;
30.label color: #040507;
31.label display: block;
32.label text-align: right;
33.label width: 100px;
34.Adding underline for labels
35.Place label on the top of a field
36.label text-align: left; text-align: center;
37.Labelled fields
38.Using the label element
39.Implicit labels
40.label float:left; width:100px;
41.Fieldsets and labels
42.Aligning labels with List
43.Block-level labels
44.Left-aligned Text Labels