(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSS

3流PGのようにデザインセンスがヘタレでXHTML+CSSがどうも苦手なプログラマに役立つスクリプトが、Niceforms です。

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

こんな感じになります。

使い方は簡単で、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>