prettyFormsで、フォーム画面をちょっとおしゃれに。
こんにちは。
新型MacBookのデザインの可愛さに惹かれつつも、いまいち購入に踏み切れないないでいる橋本です。
あと500グラム軽ければ、迷うこと無く購入に踏み切るのですが…。
さて、今日は「prettyForms」というツールを紹介します。
このブログを読んでくださっている方の中には、普段業務システムの開発に携わっておられる方もいらっしゃると思います。
業務システムを作成する際には、以下のようなシンプルなフォーム画面を目にすることも多いのではないでしょうか。
ソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>入力フォーム</title>
</head>
<body>
<form id="form-sample" name="form-sample" method="post" action="">
<p>
<label for="name">お名前</label>
</p>
<p>
<input type="text"name="name" id="name" >
<br class="clearAll">
</p>
<p>
<label>性別</label>
</p>
<p>
<input type="radio" name="sex" id="man" value="man" checked="checked">
<label for="man">男</label>
<input type="radio" name="sex" id="woman" value="woman">
<label for="woman">女</label>
<br class="clearAll">
</p>
<p>
<label for="from">出身地</label>
</p>
<p>
<select name="from" id="from">
<option>----</option>
<option value="1">東京</option>
<option value="2">千葉</option>
<option value="3">埼玉</option>
<option value="4">沖縄</option>
</select>
<br class="clearAll">
</p>
<p>
<label>趣味</label>
</p>
<p>
<input type="checkbox" name="hobby1" id="walking" value="1" />
<label for="hobby1">ウォーキング</label>
<input type="checkbox" name="hobby2" id="cooking" value="2" />
<label for="hobby2">料理</label>
<input type="checkbox" name="hobby3" id="programming" value="3" />
<label for="hobby3">プログラミング</label>
<br class="clearAll">
</p>
<p>
<label for="message">コメント記入欄</label>
<textarea name="message" id="message" rows="4" cols="40">一言コメントをどうぞ</textarea>
<br class="clearAll">
</p>
<p>
<input type="submit" name="submit" value="登録">
</p>
</form>
</body>
</html>
このようなシンプルなフォーム画面、
機能的には問題ないのですが、シンプルすぎてなんだか見た目がちょっと寂しいとは思いませんか。
ただ、そう思ったとしても、実際業務を行う中でこのようなシンプルなフォーム画面のデザインに、多くの時間を費やすことは中々難しいのではないかと思います。
今回紹介するツールは、そういったお悩みを解決するツールです。
使い方は非常に簡単。
1.まずは「prettyForms」を以下のサイトからDLし、中身をフォームのhtmlと同じフォルダに展開します 。
Agave Group >> Blog Archive >> (Functional) Pretty Forms
2.フォームのhtmlに以下の記述を加えます。
ヘッダ
<head>
<script type="text/javascript" src="prettyForms.js"></script>
<link rel="stylesheet" href="prettyForms.css" type="text/css" />
</head>
ボディ
<body onload="prettyForms()">
</body>
3.改めてフォームを表示します。
先ほどのシンプルなフォームがちょっとおしゃれなフォームに変わりましたね。
いやー、すばらしい！！
…と、手放しに喜びたいところなのですが、
このツールを使用するには、いくつか注意点があります。
もう皆さんお気づきかと思いますが、ソースコード中にlabel要素が多用してあります。
実は、このツールはlabel要素を基準としてレイアウトを行います。
そのため、表示する全ての要素に対してlabel要素を追加する必要があります。
また、ソースコード中に<br class="clearAll" />というタグが多数あるのですが、この「clearAll」というクラス名は元々定義されているクラス名で、自動で行われるレイアウト（labelの右側にフォーム部品が回り込むようなレイアウト）を解除するために使用します。
回り込みのレイアウトを解除するためには、いちいちこのタグを挿入する必要があり、この点が少し面倒です。
label要素の記述が必須だったり、clearAllクラスを使って回り込みレイアウトを解除したりしなければいけなかったりと、使用するには不便なことも多いのですが、デザインに時間をかけられない案件などで手軽に見栄えのするフォームを作りたい際には重宝するのではないかと思います。
是非一度使ってみてはいかがでしょうか。
