woork: Beautiful CSS Form

シンプルでカッコいいFacebook風のWEBフォームレイアウトサンプル。
次のように、シンプルだけどカッコいいフォームがダウンロード可能です。

動作デモ


マークアップは次のように綺麗になっているようです。

<div class="box">
<h1>Sign in</h1>
<p>Do you have an account? Sign in!</p>
<form action="" method="post">
<label><span>E-mail</span>
<input type="text"name="email" id="email" class="input-text"/>
</label>
<label><span>Password</span>
<input type="password"name="psw" id="psw" class="input-text"/>
</label>
</form>
<div class="spacer"><a href="#" onClick="" class="green">Sign in</a></div>
<div class="spacer">
Lost your data? <a href="#">Get your password</a><br/>
New User? <a href="#">Sign up</a>
</div>
</div>

シンプルなデザインでもしっくりきてしまう。
凝りすぎないのが一番じゃないかと思ってしまいますね。

他にも、ＣＳＳでクールに整形した色々

• CSSでクールなINPUTフォームを作成するサンプル
• クロスブラウザでちゃんと動作するCSSボタン集サイト「CSS Buttons」
• CSSでクールなリストボックスを作るサンプル