前の記事 «:2008年6月9日 管理人のブックマーク
次の記事 »:Photoshopで普通の城をホラー映画っぽく迫力ある画像にするチュートリアル

クリーンなデザインでピュアCSSなフォームを作るサンプル

2008年06月10日

スポンサード リンク

woork: Clean and pure CSS FORM design

クリーンなデザインでピュアCSSなフォームを作る
次のようなデザインの綺麗なフォームのサンプルがDL可能です。



マークアップは以下のようにシンプルかつクリーン

<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>

<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />

<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="email" id="email" />

<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />

<button type="submit">Sign-up</button>
<div class="spacer"></div>

</form>
</div>

コピペでざっとフォームを作りたい場合に活用しましょう。

関連エントリ

スポンサード リンク

投稿者 KJ : 2008年06月10日 07:04 | ブックマークに追加する Subscribe with livedoor Reader
間違いの指摘をしていただける方はメールでお願いします


本を執筆しました。