woork: Clean and pure CSS FORM design

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



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

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

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

関連エントリ

• フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」
• CSSを使ってファンシーなボタンを作成するテクニック
• HTMLを組んだ後のCSSの作成に役立つ「XHTML to CSS Converter」
• CSSでクールな3Dボタンを作ろう
• CSSでクールなINPUTフォームを作成するサンプル
• 用途別に使えるフォームのテンプレート集「The Wufoo FORM Gallery」