<style type="text/css">
form.cmxform {
    margin:1em 0; padding:0;
    font-size:11px;
}
form.cmxform fieldset {
    width:370px;
    border:0;
    border-top:1px solid #c9dca6;
    background:url(/content/img/css/cmxform-fieldset.gif) left bottom repeat-x;
}
form.cmxform legend {
    padding:1em 2px 0 2px;
    font-weight:bold;
}
form.cmxform em {
    color:#f00;
    background-color:transparent;
    font-weight:normal;
    font-style:normal;
    font-size:.8em;
}
form.cmxform label {
    display:block;
    float:left;
    width:120px;
}
form.cmxform fieldset ol {
    margin:0;
    padding:0;
}
form.cmxform fieldset li {
    list-style:none;
    clear:both;
    margin:0; padding:5px 5px 7px 7px;
    background:url(/content/img/css/cmxform-divider.gif) left bottom repeat-x;
}
form.cmxform fieldset fieldset {
    border:none;
    background:none;
}
    form.cmxform fieldset fieldset legend {
        font-weight:normal;
        padding-left:0;
    }
    form.cmxform fieldset fieldset label {
        float:none;
        width:auto;
    }
form.cmxform .sr {
    position:absolute;
    left:-9999px; top:0;
    width:1px; height:1px;
    overflow:hidden;
}
</style>

<form class="cmxform" action="#">
    <p><em>*</em>印は必須入力項目です。</p>
    <fieldset>
        <legend>お届け先</legend>
        <ol>
          <li>
            <label for="name">氏名<em>*</em></label>
            <input id="name" />
          </li>
          <li>
            <label for="address1">住所<em>*</em></label>
            <input id="address1" />
          </li>
          <li>
            <label for="address2">住所2</label>
            <input id="address2" />
          </li>
          <li>
            <label for="town-city">市区町村</label>
            <input id="town-city" />
          </li>
          <li>
            <label for="county">国<em>*</em></label>
            <input id="county" />
          </li>
          <li>
            <label for="postcode">郵便番号<em>*</em></label>
            <input id="postcode" />
          </li>
          <li>
            <fieldset>
              <legend>請求書の送り先も同じですか？<em>*</em></legend>
              <label><input type="radio" &raquo; name="invoice-address" />Yes</label>
              <label><input type="radio" &raquo; name="invoice-address" />No</label>
            </fieldset>
          </li>
        </ol>
    </fieldset>
    <fieldset>
        <legend>その他の情報</legend>
        <ol>
            <li><label for="dob">生年月日 <span class="sr">(日)</span> <em>*</em></label> <select id="dob"><option value="1">1</option><option value="2">2</option></select> <label for="dob-m" class="sr">生年月日（月) <em>*</em></label> <select id="dob-m"><option value="1">Jan</option><option value="2">Feb</option></select> <label for="dob-y" class="sr">生年月日 (年) <em>*</em></label> <select id="dob-y"><option value="1979">1979</option><option value="1980">1980</option></select></li>
            <li><label for="sex">性別 <em>*</em></label> <select id="sex"><option value="female">女</option><option value="male">男</option></select></li>
            <li>
                <fieldset>
                    <legend>次のスポーツの内、あなたはどれを楽しみますか？</legend>
                    <label for="football"><input id="football" type="checkbox" /> フットボール</label>
                    <label for="golf"><input id="golf" type="checkbox" /> ゴルフ</label>
                    <label for="rugby"><input id="rugby" type="checkbox" /> ラグビー</label>
                    <label for="tennis"><input id="tennis" type="checkbox" /> テニス</label>
                    <label for="basketball"><input id="basketball" type="checkbox" /> バスケットボール</label>
                    <label for="boxing"><input id="boxing" type="checkbox" /> ボクシング</label>
                </fieldset>
            </li>
            <li><label for="comments">コメント</label> <textarea id="comments" rows="7" cols="25"></textarea></li>
        </ol>
    </fieldset>
    <p><input type="submit" value="注文する" /></p>
</form>

<style type="text/css">
    form#frm_a {
        margin:10px 0; padding:0;
    }
    form#frm_a fieldset {
        margin:0; padding:10px;
        border:1px solid #6bba70;
        background-color:inherit;
        color:#fff;
        font-size:12px;
    }
    form#frm_a legend {
        margin:0 0 10px 0; padding:2px 5px;
        color:#6bba70;
        font-weight:bold;
    }
    form#frm_a p {
        margin:0; padding:0 0 10px 0;
        color:#666;
    }
    form#frm_a input.txt {
        border:1px solid #cdeb8b;;
        font-weight:bold;
        padding:1px 3px;
    }
    form#frm_a input.submit {
        border:3px double #cdeb8b;
        background-color:#fff;
        color:#6bba70;
        font-weight:bold;
    }
</style>

<form id="frm_a" action="#" onsubmit="alert('サンプルのため送信しません'); return false;">
    <fieldset>
        <legend>会員登録</legend>
        <p>
            <label for="lastname">氏: <input type="text" class="txt" id="lastname" name="lastname" size="10" /></label>
            <label for="firstname">名: <input type="text" class="txt" id="firstname" name="firstname" size="10" /></label>
        </p>
        <p>
            <label for="email">E-mail: <input type="text" class="txt" id="email" name="email" size="40" /></label>
        </p>
        <p>
            生年月日: 西暦 
            <label for="birth_y"><input type="text" class="txt" id="birth_y" name="birth_y" size="4" maxlength="4" />年</label>
            <label for="birth_m"><input type="text" class="txt" id="birth_m" name="birth_m" size="2" maxlength="2" />月</label>
            <label for="birth_d"><input type="text" class="txt" id="birth_d" name="birth_d" size="2" maxlength="2" />日</label>
        </p>
        <p>
            性別: 
            <label for="sex1"><input type="radio" id="sex1" name="sex" value="male" />男</label>
            <label for="sex2"><input type="radio" id="sex2" name="sex" value="female" />女</label>
        </p>
        <input type="submit" class="submit" value="登録する" />
    </fieldset>
</form>