Fieldset Alternating : fieldset « Form « HTML / CSS






Fieldset Alternating

 
<!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 Alternating</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen">
fieldset
{
  position: relative;
  float: left;
  clear: left;
  width: 100%;
  margin: 0 0 -1em 0;
  padding: 0 0 1em 0;
  border-style: none;
  border-top: 1px solid #BFBAB0;
  background-color: #F2EFE9;
}

fieldset.alt
{
  background-color: #E6E3DD;
}

legend
{
  padding: 0;
  color: #545351;
  font-weight: bold;
}

legend span
{
  position: absolute;
  left: 0.74em;
  top: 0;
  margin-top: 0.5em;
  font-size: 135%;
}

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

fieldset li
{
  float: left;
  clear: left;
  width: 100%;
  padding-bottom: 1em;
}

label
{
  float: left;
  width: 10em;
  margin-right: 1em;
}

fieldset.submit
{
  float: none;
  width: auto;
  padding-top: 1.5em;
  padding-left: 12em;
  background-color: #FFFFFF;
}  </style>

</head>
<body>
  <div id="page">
    <div id="header">
      <h1>
        Fieldset Alternating
      </h1>
    </div> <!-- END #header -->
    <div id="content">
      <p>
        Fill in your details below.
      </p>
      <form action="example.php">
        <fieldset>
          <legend>
            <span>Contact Details</span>
          </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>
            <span>Login Details</span>
          </legend>
          <ol>
            <li>
              <label for="password">
                Password:
              </label>
              <input id="password" name="password" class="password" type="password" />
            </li>
            <li>
              <label for="confirmPassword">
                Confirm password:
              </label>
              <input id="confirmPassword" name="confirmPassword" class="password" type="password" />
            </li>
          </ol>
        </fieldset>
        <fieldset>
          <legend>
            <span>Delivery Address</span>
          </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="alt">
          <legend>
            <span>Payment Details</span>
          </legend>
          <ol>
            <li>
              <label for="cardNumber">
                Credit card number:
              </label>
              <input id="cardNumber" name="cardNumber" class="text" type="text" />
            </li>
            <li>
              <label for="cardName">
                Credit card name:
              </label>
              <input id="cardName" name="cardName" 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 Background
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