PHP & JavaScript Room :: 設置サンプル

<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>