tableもdlも使わない様々なデザインのフォーム[CSS]

CSS Globeより、<table>も<dl>も使わないでコーディングされた様々なデザインのフォームの紹介です。

デモページはこちらから

フォーム1

form0901151.jpg


フォーム2

form0901152.jpg


フォーム3

form0901153.jpg


フォーム4

form0901154.jpg


フォーム5

form0901155.jpg


HTML

<form id="form5" action="/" method="post">
	<fieldset><legend>Contact form</legend>
		<p class="first">
			<label for="name">Name</label>
			<input type="text" name="name" id="name" size="30" />
		</p>
		<p>
			<label for="email">Email</label>
			<input type="text" name="email" id="email" size="30" />
		</p>
		<p>
			<label for="web">Website</label>
			<input type="text" name="web" id="web" size="30" />
		</p>
		<p>
			<label for="message">Message</label>
			<textarea name="message" id="message" cols="30" rows="10"></textarea>
		</p>
		<p class="submit"><button type="submit">Send</button></p>
	</fieldset>	
</form>

フォームのマークアップは同じですが、CSSによってデザインが異なります。

気に入ったフォームのCSSを設置すればOKですね。