Nested Fieldset Example : fieldset « Form « HTML / CSS






  1. HTML / CSS
  2. Form
  3. fieldset

Nested Fieldset Example

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Nested Fieldset Example</title>
    <style type="text/css">
      fieldset fieldset {
        width: 45%;
        float: left;
      }
      #submit {
        margin-bottom: 10px;
        float: right;
      }
    </style>
  </head>
  <body>
    <form method="get" action="nested.html">
      <fieldset>
        <legend>Personal Details</legend>
        <fieldset>
          <legend>Address Details</legend>
            <p>
              <label for="city">City:</label>
              <input type="text" name="city" id="city"/>
            </p>
            <p>
              <label for="yourname">Zip Code:</label>
              <input type="text" name="address" id="yourname"/>
            </p>
        </fieldset>
        <fieldset>
          <legend>Telephone Details</legend>
            <p>
              <label for="city">Home:</label>
              <input type="text" name="city" id="city"/>
            </p>
            <p>
              <label for="yourname">Mobile:</label>
              <input type="text" name="address" id="yourname"/>
            </p>
        </fieldset>
      </fieldset>
      <p><input type="submit" id="submit"/></p>
    </form>
  </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 Alternating
25.fieldset font-size:12px; padding:10px; width:250px;text-align:right;
26.fieldset font-size:12px; padding:10px; width:250px; line-height:1.8;
27.Using legend for fieldset
28.>Organizing Elements With fieldset and legend Elements
29.The fieldset element
30.Removing the border from fieldsets
31.fieldset border: 1px solid royalblue;
32.Element Subgroups