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

実行結果

サインイン

アカウントをお持ちの方はサインイン!

パスワードを忘れた場合:パスワード取得
新規ユーザーの場合:サインアップ

サインアップ

アカウントを作りましょう!

パスワードを忘れた場合:パスワード取得
新規ユーザーの場合:サインアップ

ソース

<style type="text/css">
    div#login1 a {
        color:#0033cc;
    }
    div#login1 a:hover{
        background-color:transparent;
    }
    div#login1 h1,
    div#login1 h2,
    div#login1 p,
    div#login1 form {
        margin:0; padding:0;
        border:0;
    }
    div#login1 h2{
        margin:0 0 20px 0;
        color:#666666;
        font-size:16px;
    }
    div#login1 div.box {
        margin-bottom:20px;    padding:10px;
        border:solid 1px #c6cfe1;
        background:#dfe4ee;
        color:#333333;
    }
        div#login1 div.box h1 {
            color:#000000;
            padding:0 0 4px 0;
            font-size:14px;
        }
        div#login1 div.box p {
            padding-bottom:14px;
        }
        div#login1 div.box input .input-text {
            width:180px;
            border:1px solid #3b6e22;
            color:#666666;
        }
        div#login1 div.box label {
            display:block;
            margin-bottom:10px;
            color:#555555;
        }
            div#login1 div.box label span {
                display:block;
                float:left;
                width:10em;
                padding-right:6px;
                font-weight:bold;
                text-align:right;
            }
        div#login1 .spacer {
            margin-left:80px; margin-bottom:10px;
            font-size:11px;
            color:#555555;
        }
        div#login1 .green {
            background:url(/content/img/css/green.gif);
            padding:3px 6px;
            border:1px solid #3b6e22;
            height:24px; 
            line-height:24px;
            color:#FFFFFF;
            font-size:12px;
            margin-right:10px;
            display:inline-block;
            text-decoration:none;
        }
</style>

<div id="login1">
    <div class="box">
        <h1>サインイン</h1>
        <p>アカウントをお持ちの方はサインイン!</p>
        <form action="" method="post">
            <label><span>メールアドレス</span><input type="text"name="email" id="email" class="input-text"/></label>
            <label><span>パスワード</span><input type="password"name="psw" id="psw" class="input-text"/></label>
        </form>
        <div class="spacer"><a href="#" onClick="" class="green">サインイン</a></div>
        <div class="spacer">
            パスワードを忘れた場合:<a href="#">パスワード取得</a><br/>
            新規ユーザーの場合:<a href="#">サインアップ</a>
        </div>
    </div>
    <div class="box">
        <h1>サインアップ</h1>
        <p>アカウントを作りましょう!</p>
        <form action="" method="post">
            <label><span>氏名</span><input type="text"name="name" id="name" class="input-text"/></label>
            <label><span>メールアドレス</span><input type="text"name="email" id="email" class="input-text"/></label>
            <label><span>パスワード</span><input "psw" type="password" id="psw" class="input-text"/></label>
        </form>
        <div class="spacer"><a href="#" onClick="" class="green">アカウント作成</a></div>
        <div class="spacer">
            パスワードを忘れた場合:<a href="#">パスワード取得</a><br/>
            新規ユーザーの場合:<a href="#">サインアップ</a>
        </div>
    </div>
</div>

polarized women