人気ブログランキング | 話題のタグを見る
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSS
3流PGのようにデザインセンスがヘタレでXHTML+CSSがどうも苦手なプログラマに役立つスクリプトが、Niceforms です。

これを使うと、入力フォームの見栄えを簡単によくすることができます。

こんな感じになります。
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSS_e0091163_1482373.jpg


使い方は簡単で、http://www.emblematiq.com/lab/niceforms/download/からスクリプトダウンロードし、niceforms.js , niceforms-default.css を読み込みよう設定します。
そして、form のクラスを class="niceform" とするだけです。

HTML側は下記のような感じにしています。(文字数制限のためハイライト無し)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hoge</title>
<link href="niceforms-default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="niceforms.js"></script>
</head>
<body>
<form class="niceform" method="post" action="chk.php" id="input">
<fieldset>
<legend>個人情報入力</legend>
<dl>
<dt>氏名</dt>
<dd><input type="text" maxlength="20" id="name" ></dd>
</dl>
<dl>
<dt>氏名(カナ)</dt>
<dd><input type="text" maxlength="20" id="kana" ></dd>
</dl>
<dl>
<dt>性別</dt>
<dd>
<input type="radio" id="sex" value="男">男
<input type="radio" id="sex" value="女">女
</dd>
</dl>
<dl>
<dt>年齢</dt>
<dd>
<select id="age" name="age" size="1">
<option value="0">10代</option>
<option value="1">20代</option>
<option value="2">30代</option>
<option value="3">40代</option>
<option value="4">50代</option>
<option value="5">60代</option>
</select>
</dd>
</dl>
<dl>
<dt>利用出来る言語</dt>
<dd>
<input type="checkbox" id="pg" value="">C/C++
<input type="checkbox" id="pg" value="">C#
<input type="checkbox" id="pg" value="">Objective-C
<input type="checkbox" id="pg" value="">Java
<input type="checkbox" id="pg" value="">VB/VB.Net
<input type="checkbox" id="pg" value="">JavaScript
<input type="checkbox" id="pg" value="">PHP
<input type="checkbox" id="pg" value="">Perl
<input type="checkbox" id="pg" value="">Ruby
<input type="checkbox" id="pg" value="">Python
</dd>
</dl>
<dl>
<dt>連絡先(TEL)</dt>
<dd><input type="text" size="16" style="ime-mode: disabled" maxlength="15" id="tel"></dd>
</dl>

</fieldset>
<input type="submit" value="送信" class="submitstyle" name="Submit">
</form>
</body>
</html>


ただし、問題点もありdd要素に通常の文字列をいれると、IE8の場合下記のように、その下の各ボックスがずれてしまいます。
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSS_e0091163_1483544.jpg

と、おもったらIE8が互換表示になっているだけでしたorz


IE6に対応してないのも難点ですね。

参考:
NiceFormsデモ
[JS]既存のフォームをかわいいデザインに変更するスクリプト -Niceforms | コリス
フォームを鮮やかに彩るjavascript「NiceForms」|skuare.net
フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい | DesignWalker
by Jehoshaphat | 2012-06-27 01:53 | Webがらみ


<< (HTML)Uniform 入... (HTML)ul(リスト)を使... >>