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

実行結果


ソース

<style type="text/css">
    #demo {
        width:60%;
    }
    #demo ul {
        list-style:none;
        margin:0; padding:0;
    }
    #demo li {
        list-style:none;
        margin:0; padding:6px;
        clear:both;
    }
    #demo label {
        display:block;
        font-weight:bold;
        color:#666;
    }
    #demo li span {
        float:left;
        margin:0 5px 0 0; padding:0;
    }
    #demo li span label {
        color:#999;
        font-weight:normal;
        font-size:80%;
    }
    #demo input.field,
    #demo textarea {
        background:#fff url(/content/img/css/fieldborder.png) repeat-x 0 0;
        border:1px solid #ddd;
        border-top-color:#ccc;
        border-left-color:#ccc;
        padding:3px;
    }
    #demo textarea {
        width:100%;
    }
    #demo input#email {
        width:200px;
    }
</style>

<form id="demo" action="#" onsubmit="return false;">
    <ul>
        <li>
            <label for="name">名前:</label>
            <span>
                <input id="firstname" name="firstname" type="text" class="field" value="" maxlength="20" tabindex="1" /><br>
                <label for="Field4">姓</label>
            </span>
            <span>
                <input id="lastname" name="lastname" type="text" class="field" value="" maxlength="20" tabindex="2" />
                <label for="lastname">名</label>
            </span>
         </li>
        <li>
            <label for="email">メールアドレス:</label>
            <input id="email" name="email" type="text" class="field" value="" maxlength="255" tabindex="3" /> 
        </li>
        <li>
            <label for="message">メッセージ:</label>
            <textarea id="message" name="message" rows="10" cols= "5" tabindex="4" /></textarea>
        </li>
    </ul>
    <input id="btn_submit" name="btn_submit" value="送信" type="submit" />
</form>

polarized women