Fieldset Background : fieldset « Form « HTML / CSS






Fieldset Background

 
<!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>Fieldset Background</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css" media="all">
fieldset
{
  position: relative;
}

legend
{
  position: relative;
  left: -7px;
  top: -0.75em;
}

fieldset ol
{
  padding-top: 0.25em;
}  </style>

</head>
<body>
  <div id="page">
    <div id="header">
      <h1>
        Fieldset Background Image
      </h1>
    </div> <!-- END #header -->
    <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><!-- END #content -->
  </div> <!-- END #page -->
</body>
</html>

   
  








Related examples in the same category

1.'fieldset' groups 'form' elements by drawing a rectangle
2.Fieldset and Legend Example
3.Form field set with legend
4.Style for form fieldset
5.Use fieldset to create a set of form controls
6.Fieldsets and labels
7.Set border for fieldset
8.borderless fieldsets
9.Set fieldset border to dashed style
10.Organizing Elements With fieldset and legend Elements
11.noframes for frameset
12.utf-8 charset page
13.nested fieldset background-color: #efefef;
14.fieldset padding: 1em;
15.fieldset margin: 2em 0;
16.fieldset border: 1px solid #ccc;
17.fieldset background-color: #dfdfdf;
18.fieldset margin-bottom: 1em;
19.fieldset border: 1px solid #888; border-right: 1px solid #666; border-bottom: 1px solid #666;
20.fieldset border: 3px solid rgb(234, 234, 234);
21.fieldset background: rgb(244, 244, 244);
22.Fieldset and Legend
23.Fieldset Alternating
24.fieldset font-size:12px; padding:10px; width:250px;text-align:right;
25.fieldset font-size:12px; padding:10px; width:250px; line-height:1.8;
26.Using legend for fieldset
27.>Organizing Elements With fieldset and legend Elements
28.The fieldset element
29.Removing the border from fieldsets
30.Nested Fieldset Example
31.fieldset border: 1px solid royalblue;
32.Element Subgroups