2011年7月アーカイブ

郵便番号を入力すると住所の一部が自動的に入力される Ajax や API を紹介し
ます。

 http://www.anchor-gr.jp/labo_webapi_postal_search.html

 http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html

フォームの Select で選択不可能にする方法を紹介します。

Select の Option で disabled を使うと選択できなくなります。
デフォルト値(説明文など)を選択できないようにする場合に使ってください。
(IE6 では利かないようですが)

■ 例
<option value="none" selected disabled="disabled">○○を選択してください
</option>

参考: http://blog.syuhari.jp/archives/59


その他の便利な機能もあったので送ります。

■ 複数選択やグループ分け

参考: http://www.pst.co.jp/Powersoft/c_Cgi/ref/RefSelect.htm

メールフォームの Submit ボタンや Reset ボタンを画像化する方法を紹介します。

Submit ボタンは下記の方法で画像に置き換えることが可能なようです。

 <input type="image" src="xxx.gif" alt="送信" name="submit">

 参考: http://park16.wakwak.com/~html-css/form/form_4.html


Reset ボタンは上記の方法は使えないため、Button タグか JavaScript を
使用します。

■ Button の例

<BUTTON type="submit">
  <IMG src="xxx.gif" width="x" height="x">
</BUTTON>
<BUTTON type="reset">
  <IMG src="xxx.gif" width="x" height="x">
</BUTTON>

参考: http://technique.eweb-design.com/1002_sri.html

Button のタグを使用する場合、デフォルトで背景や枠がいてしまうため、下記のようにスタイルを指定する必要があります。

button {
border:none; /*枠を消す*/
background-color:#ffffff; /*ページの背景色と合わせて誤魔化す*/
}

※ ただしボタンタグはマウスオーバー時にマウスポインタが変わらないようです。

開いた Web ページから別のページへ自動的に転送するリダイレクト方法を
紹介します。

リダイレクトにはメタタグでリダイレクトするものと JavaScript を使用するものがあります。

例えば http://www.webxus.jp/ に自動転送する場合、下記のように記述します。

-- リダイレクト例 --
<html>
<head><META HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
<script language="JavaScript">
<!--
window.location.replace("http://www.webxus.jp/");
// -->
</script>
<meta http-equiv="Refresh" content="0; url=http://www.webxus.jp/">
</head>
<BR>
自動的に下記のページへ移動します。<BR>
移動しない場合は<a href="http://www.webxus.jp/">ここをクリック</a>して下さい。<BR>
<BR>
</html>
-------------------------------

初心者がぶつかる IE6 でマージンが設定値の2倍になってしまう現象とその対処方法を紹介します。



画像を効果的に見せるために使える JavaScript を紹介します。



例えば IE 以外のブラウザと IE のバージョン 7 以上で特定の JS ファイルを呼び出したい場合は下記のように記述します。

<![if !IE]>
script type="text/javascript" src="common/js/rollover2.js"></script>
<![endif]>
<!--[if gte IE 7]>
<script type="text/javascript" src="common/js/rollover2.js"></script>
<![endif]-->

その他の詳細な設定方法は下記のページを参照してください。

 http://allabout.co.jp/gm/gc/23921/2/
 http://ageha808.blog39.fc2.com/blog-entry-170.html


html の中で php を実行するためには、サーバーによっては下記のような内容を記述したファイルを html が置いてあるディレクトリ、もしくはそれより上の階層に置かなければならない場合があります。

に添付の .htaccess を置く必要があります。
-- .htaccess --
AddHandler x-httpd-php5 .php .phps .html
AddHandler x-httpd-php .html
--------------------------

※ ファイル名は ".htaccess" にする。
下記に参考サイトを記載します。  http://wordpress.matometa.net/archives/20090802215222   http://kidokorock.com/2009/03/webtips/php-webtips/%E3%82%A8%E3%83%83%E3%82%AF%E3%82%B9%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7php%E3%82%92html%E6%8B%A1%E5%BC%B5%E3%81%97%E3%81%A7%E5%8B%95%E3%81%8B%E3%81%99.html  http://www.xserver.ne.jp/faq_service_php.php#02


UTF-8 または Shift_JIS で使えるメールフォームでメールアドレスの
チェック機能が入っているフォームを紹介します。

 http://www.sapphirus.biz/php/sformmail2/

設定ファイルのパラメーター設定も最小限で住むので便利です。
使い方は zip ファイルの中の readme.txt を参照してください。
Google Analytics のコンバージョン測定を行うにはリダイレクトを使用する等、工夫が必要になります。

 http://www.webxus.jp/mt/blog/2011/07/web.html

また、HTML の内部で PHP を実行するため、サーバーによっては下記の URL の作業が必要になります。



2GB まで送れるオンラインストレージを紹介します。
http://www.gigafile.nu/v3/

容量の大きなファイル送付が必要な場合には便利です。

関連する項目に指定した値によって、対応する項目の選択肢を変化させる JavaScript を紹介します。

http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_forminput#a_jquery_controlled_dependent_or_cascading_select_list

※ 参考サイトでは 3 段階(親、子、孫)で設定していますが
※ 2 段階でも当然使えます。

Web サイトのフォームでパスワードのダブルチェックを行う場合、下記のサイトのパスワードチェックを使用することで実装可能です。

http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_forminput#a_jquery-plugin-validation

またメールアドレスの 2 重チェックも下記のように修正することで対応可能です。

-- 変更前 --
password: {
    required: true,
    minlength: 5
},
confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
},

-- 変更前 --
    ↓
-- 変更後 --
mailaddress: { required: true, email: true }, confirm_mailaddress: { required: true, equalTo: "#mailaddress" },
-- 変更後 --