MercurySyscomトップページ
09
Jun

CSSだけで作られた綺麗なフォームテンプレート

HTML+CSSコーディング

フォームを作成するときは綺麗にレイストするためにtableを使うことが多いですが、
cssだけで綺麗なフォームを作れるテンプレートを紹介します。

form.jpg

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のみでフォームを作成したい場合は、参考にしたいですね。

by ueoka 2008年6月 9日 14:39 トラックバックTrackback (0) コメントComments (0) このエントリーを含むはてなブックマーク
RSSATOM

トラックバック

トラックバックURL:http://www.mercury-sys.com/cgi-bin/mt/mt-tb.cgi/566