2009年01月07日

入力フォームの見栄えをよくするスクリプト

明けましておめでとうございます。
本年もどうぞよろしくお願いいたします。

新年一発目の記事がすっかり遅くなってしまいました。

昨年はITニュース関連の記事が多くなってしまいましたが、今年はウェブ技術の実践をなるべく充実させていきたいなぁと考えています。
ウェブ技術の実践ページが増えれば、後々自分にとっても技術や表現のリンク集代わりに使えますので。

というわけで更新ペースは昨年より更に落ちるかと・・・^^;


さて、今回は入力フォームの見栄えをよくするスクリプトを試してみました。



実践ページはこちらになります。
フォームの見栄えを良くするスクリプトを試してみた

CSS、Javascript、画像を使って見栄えのする入力フォームを実現するものです。



niceforms_t.gif


導入方法はとても簡単です。


1.必要なファイルのダウンロード&設置

ファイル一式をこちらからダウンロードして任意の場所にアップロードしてください。


バージョンによってデザインが違います。
それと、Emblematiq :: Niceforms :: Supportの7に書かれているようにIE6では正常に動作しないようです。
7を読むとどうやら意図的にそうしているようですね。


2.jsとcssの読み込み

HTMLに
<link rel="stylesheet" type="text/css" href="(アップロードしたディレクトリ)/niceforms-default.css">
<script type="text/javascript" src="(アップロードしたディレクトリ)/niceforms.js"></script>

を記述します。


3.classの指定

使いたいフォームのformタグ内に
class="niceform"
を指定します。

設定は以上です。


4.最後に

画像を自分で作って差し替えれば、好みのデザインにする事が可能です。
cssやjsを触らないのであれば画像のサイズは元画像のサイズに合わせた方が無難かと思います。

今回の入力フォームにseekAttentionなどを組み合わせたらおもしろいかもしれませんね^^
seekAttentionについては
seekAttention - 注目させたい部分を強調させるスクリプト
を参考にしていただけたらと思います。

何かしら参考になりましたらクリックをよろしくお願いします
にほんブログ村 IT技術ブログへ   人気ブログランキング    
この記事へのコメント
新年おめでとうございます。
さきほどは来て頂いてありがとうございました。
いつもながら、
 詳細で
 役に立つ
 質の高い 記事内容
感銘しています。
本年もどうぞよろしくお願いいたします。
Posted by metaboy at 2009年01月07日
あけましておめでとうございます。
ミミオでございます。

今年のテーマはとっても楽しみです。
ミミオのサイトは素人色満載のサイトなので、こちらで勉強させていただいて、サイト作りに役立てたいと思います。

今年もよろしくお願いします。
Posted by ミミオ at 2009年01月07日
>> metaboyさん
明けましておめでとうございます。
今年もよろしくお願いいたします m(_ _)m
metaboyさんのブログ、ものすごい情報量になってきていますね!
IT関連の情報源としてこれからもお邪魔させていただきます^^

>> ミミオさん
明けましておめでとうございます。
今年もよろしくお願いいたします m(_ _)m
今年はウェブサイト構築に使えそうな技術をここにたくさん集められたらと思っています^^

Posted by トモヒロ at 2009年01月08日
更新ペースは落ちても、いつも充実した質の高い記事でとても勉強になります。

ますます寒さも厳しくなってきましたが、トモヒロさんお風邪などひかれませんように。

Posted by 愛美 at 2009年01月08日
>> 愛美さん
ありがとうございます。
そう言っていただけるととてもはげみになります m(_ _)m
愛美さんも体調など崩されないよう適度に頑張ってください^^
Posted by トモヒロ at 2009年01月09日
ウェブ技術については素人なので、役に立つ情報が満載ですね。

また、遊びにきますヾ(=^▽^=)ノ

応援ポチッ♪しておきますね!
Posted by 起上小法師 at 2009年02月07日
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/112269913

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。