MW211 EXIT

devlog
HTML/【未解決】空のGETパラメータ
2012年09月23日
URI上のGETパラメータを空にしても大丈夫なのか?

「index.php?a=1&b&c=3」の「b」みたいな感じで。

「isset($_GET['b'])」で判定できるが、これが正しい形なのかちょっと不安。

「b=true」とかいちいち書くのがめんどうな時に使えそうだが、
ブラウザによってはダメだったりしないのかなぁ?
分類:HTML、【未解決】
HTML/空のspan
2012年09月22日
┌──────────────────────────────────────┐
│<td><span><br/></span></td>                                                 │
└──────────────────────────────────────┘
上記みたいにHTMLに仕込んでおいて、下記のようにそこに文字を表示させる。
┌──────────────────────────────────────┐
│$('span').html('出現');                                                     │
└──────────────────────────────────────┘
こんな場面に遭遇することはないだろうか?

でも、上記の「<span></span>」はHTMLの文法上よくないらしく
HTML Validator様には「警告」をいただくことになる。
中身のないspanはよろしくないのだ。

でもね、大人の事情ってのがあるのだよ、ってことで、こんな風にしてごまかしてみた。
┌──────────────────────────────────────┐
│<td><span><br/></span></td>                                                 │
└──────────────────────────────────────┘
でも、これって一部ブラウザ(IE8とか)で改行されてしまったりする。

こういうのは以下が正しいんだよ、っていう人とはお友達になれないだろう。
┌──────────────────────────────────────┐
│$('td').html('出現');                                                       │
└──────────────────────────────────────┘
spanの中に出したいんだもん。

なんかいい方法はないものやら。
#ご指摘は「エラー」じゃなくて「警告」だから、
  そこら辺の事情はわかってらっしゃるんですかね、HTML Validatorさん
分類:HTML、【未解決】
HTML/文字列の表示の不思議
2012年05月18日
なんだかわからんが、「-」が混じってるとそこで改行されしまうんだよね。

音節の区切りだからなんだろうけど…。

他にこういう文字ってないのかな?

対処法(改行させない方法)としては
「div {white-space:nowrap;}」みたいなスタイルにするとからしい。
分類:HTML
HTML/POST変数のname属性が配列の場合
2012年05月08日
基本的に、name属性には変数を使う。
┌──────────────────────────────────────┐
│<input type="hidden" name="a[]"      value="1"/>     →  $_POST[a]       = 1│
└──────────────────────────────────────┘
配列を使ってもよい。
┌──────────────────────────────────────┐
│<input type="hidden" name="a[1]"     value="1"/>     →  $_POST[a][1]    = 1│
└──────────────────────────────────────┘
もちろん、連想配列(添字が文字列)でもOK。
┌──────────────────────────────────────┐
│<input type="hidden" name="a['z']"   value="1"/>     →  $_POST[a]['z']  = 1│
└──────────────────────────────────────┘
配列の添字を省略すると、自動で設定してくれる。
┌──────────────────────────────────────┐
│<input type="hidden" name="a[]"      value="1"/>     →  $_POST[a][0]    = 1│
│<input type="hidden" name="a[]"      value="2"/>     →  $_POST[a][1]    = 2│
└──────────────────────────────────────┘
直前に添字があればその次に追加されていくが、
最大添字を起点としてカウントアップしていくので必ず直前の次というわけではない。
(上記のように、元々起点がなければ「0」から始まる)
「$a[] = 1;」みたいな処理と同じようなもんだ。
┌──────────────────────────────────────┐
│<input type="hidden" name="a[3]"     value="1"/>     →  $_POST[a][3]    = 1│
│<input type="hidden" name="a[]"      value="2"/>     →  $_POST[a][4]    = 2│
│<input type="hidden" name="a[1]"     value="3"/>     →  $_POST[a][1]    = 3│
│<input type="hidden" name="a[]"      value="4"/>     →  $_POST[a][5]    = 4│
└──────────────────────────────────────┘
なお、文字列の添字はそのカウントアップからは無視される。
┌──────────────────────────────────────┐
│<input type="hidden" name="a[3]"     value="1"/>     →  $_POST[a][3]    = 1│
│<input type="hidden" name="a['4']"   value="2"/>     →  $_POST[a]['4']  = 2│
│<input type="hidden" name="a[]"      value="3"/>     →  $_POST[a][4]    = 3│
└──────────────────────────────────────┘
添字が同じものが複数あれば同一と見なし、最後方が上書で優先される。
┌──────────────────────────────────────┐
│<input type="hidden" name="a[]"     value="1"/>      →  $_POST[a][0]    = 1│
│<input type="hidden" name="a[]"     value="2"/>      →      (上書される)   │
│<input type="hidden" name="a[1]"    value="3"/>      →  $_POST[a][1]    = 3│
└──────────────────────────────────────┘
これは変数の場合と同じこと。
┌──────────────────────────────────────┐
│<input type="hidden" name="a"       value="1"/>      →      (上書される)   │
│<input type="hidden" name="a"       value="2"/>      →  $_POST[a]       = 2│
└──────────────────────────────────────┘
ちなみに、変数名と配列名が同名だった場合には?
┌──────────────────────────────────────┐
│<input type="hidden" name="a"       value="1"/>      →      (上書される)   │
│<input type="hidden" name="a[]"     value="2"/>      →  $_POST[a][0]    = 2│
│<input type="hidden" name="a[]"     value="3"/>      →  $_POST[a][1]    = 3│
└──────────────────────────────────────┘
階層毎で(まるごと)上書される感じ(上記と下記がそれを物語っている)。
┌──────────────────────────────────────┐
│<input type="hidden" name="a[]"     value="1"/>      →      (上書される)   │
│<input type="hidden" name="a[]"     value="2"/>      →      (上書される)   │
│<input type="hidden" name="a"       value="3"/>      →  $_POST[a]       = 3│
└──────────────────────────────────────┘
それと多次元配列も大丈夫。
┌──────────────────────────────────────┐
│<input type="hidden" name="a[1][2]" value="1"/>      →  $_POST[a][1][2] = 1│
└──────────────────────────────────────┘
分類:HTML
InterneteExplorer/submitボタンの配置注意
2012年04月27日
IE(IE9)の場合、form中にカーソルがあると、カーソルあるところと共に
そのformに属するsubmitボタンが強調される。
  ・カーソルのあるところ                          →外太枠&内点線枠
  ・カーソルのあるところが属するformのsubmitボタン→外太枠
また、これ(submitボタン)が複数あった場合は、最初のボタンが強調される。

きっと、submitする時はここを押してねっていう
アピールかなんだろうけどなんか余計な感じだ。

CSSとかで回避する方法は今のところわからないが、
submitボタンを、buttonボタンにして、
JavaScript側でsubmit()することで回避することはできる。
#但し、この場合、送信されていたsubmitボタンのラベル名が
  (buttonボタンのラベル名としては)送信されなくなるので注意。
  別途hidden属性かなんかで代替する必要あり

submitボタンだろうが、buttonボタンだろうが、JavaScriptで制御するから
どっちでもいい、なんて適当に配置していると、
IEの場合にボロが出る(不自然な位置の第一submitボタンが強調される)という
結構危険な問題だ(初期設計時に心得ておいた方がよい)。
分類:ブラウザ、HTML
画面をリフレッシュする方法
2012年04月26日
いろいろある。

【1】メタタグを使う方法
┌──────────────────────────────────────┐
│<meta http-equiv="Refresh" content="秒"/>                                   │
└──────────────────────────────────────┘

【2】JavaScriptを使う方法
┌──────────────────────────────────────┐
│<script type="text/javascript">                                             │
│  window.onload = function() {                                              │
│    setTimeout("location.reload()", ミリ秒);                                │
│  }                                                                         │
│</script>                                                                   │
└──────────────────────────────────────┘
分類:JavaScript、HTML
HTML/ファイル入力欄の注意点
2012年03月11日
ファイル入力欄(inputタグのfile属性)について、
IEの場合、ファイルを直接入力できるが
それが不正な内容だと、セキュリティの関係から、submitが実行されない。

もし、JavaScriptでsubmitしようものならエラーとなってしまう。

FirefoxやChromeでは、直接入力できない(ファイル選択ダイアログが表示される)ので、
IEの場合も、以下のように直接入力を拒否してあげるのも一つの方法だ。
┌──────────────────────────────────────┐
│<input type="file" name="名前" onkeydown="return false;"/>                  │
└──────────────────────────────────────┘
分類:注意、HTML
HTML/ファイルアップロードのタグ
2012年02月04日
┌──────────────────────────────────────┐
│<input type="file"/>                                                        │
└──────────────────────────────────────┘
ファイルをアップロードすることができるこのタグ。

でも、ブラウザによって見え方が違う。
以下のような感じ。
┌─────────┬───────────────────┐
│                  │┌────────────┐┌───┐│
│Internet Explorer ││                        ││参照..││
│                  │└────────────┘└───┘│
├─────────┼───────────────────┤
│                  │┌────────────┐┌───┐│
│Firefox           ││                        ││参照..││
│                  │└────────────┘└───┘│
├─────────┼───────────────────┤
│                  │┌───────┐                    │
│Chrome(Google)    ││ファイルを選択│選択されていません  │
│                  │└───────┘                    │
├─────────┼───────────────────┤
│                  │┌───────┐                    │
│Safari(Apple)     ││ファイルを選択│ファイルが未選択です│
│                  │└───────┘                    │
├─────────┼───────────────────┤
│                  │┌────────────┐┌───┐│
│Opera             ││                        ││選択..││
│                  │└────────────┘└───┘│
└─────────┴───────────────────┘

注意したいのは、Chomeなどの場合の右端。
若干隙間が空いてしまうのだ。
┌──────────────────────────────────────┐
│┌───────┐                        ┌──┐                          │
││ファイルを選択│選択されていません      │確定│                          │
│└───────┘                        └──┘                          │
└──────────────────────────────────────┘
もしも、確定ボタンとかを横に置いた場合には、一体感に欠けてしまう。

そんな時は以下のように背景色をつけてあげれば、右端の余白も塗ってくれるので、
隣接している感が復活する。
┌──────────────────────────────────────┐
│<input type="file" style="background-color:#CCCCCC;"/>                      │
└──────────────────────────────────────┘

ちなみに、最近のIEの背景色のdefaultは灰色みたいです。
分類:HTML
HTML/POSTのサブミットボタンいろいろ
2011年11月12日
基本的なサブミットボタンはこれ。
┌──────────────────────────────────────┐
│<input type="submit" name="command" value="実行"/>                          │
└──────────────────────────────────────┘

ボタンにJavaScriptを付加して、サブミットボタンにするには、
以下の二通りの方法がある。
┌──────────────────────────────────────┐
│<input type="button" onclick="this.form.submit();" value="実行">            │
├──────────────────────────────────────┤
│<input type="button" onclick="submit(this.form);"  value="実行">            │
└──────────────────────────────────────┘
ただし、ボタンなのでvalue値はPOSTパラメータとして渡せない。
つまり、上記二つに「name="command"」を追記しても、
「POST['command']」では値を拾えない。
最初のサブミットのやつだと「POST['command']」は「実行」という値になる。

では、ボタンではなくリンク文字にサブミットを埋め込む場合は?
┌──────────────────────────────────────┐
│<a href="javascript:void(0);" onclick="submit(this.form);">実行</a>         │
└──────────────────────────────────────┘
「javascript:void(0);」によって、リンクを無効にして(飛ばないようにして)、
onclickでさきほどのようにサブミットしてしまう。

ちなみに以下も同じかと思いきや、ダメだった。
┌──────────────────────────────────────┐
│<a href="javascript:void(0);" onclick="this.form.submit();">実行</a>        │
└──────────────────────────────────────┘

------------------------------------
【追記】
「onclick="submit(this.form);"」でも
場所によってうまくいかないことがあった。
formにidをつけて「$('id').submit();」みたいな方が確実なようだ。
※「function $(inId) {return document.getElementById(inId);}」付きでね
------------------------------------

なにもリンクにこだわらなくてもいい、文字をリンクに偽装してしまえばいいのでは
…というのであればこれ(あ、文字色がどうにもならないか)。
┌──────────────────────────────────────┐
│<span style="cursor:pointer;text-decoration:underline;"                       
                                      onclick="submit(this.form);">実行</span>│
└──────────────────────────────────────┘

他にもいろいろあって、他の回でもリンクでサブミットはとりあげているから
そのうちまとめられるといいですね。
分類:HTML
HTML/変更できないチェックボックス
2011年10月07日
チェックボックスを表示するものの内容を変更させたくない場合がある。
たとえば、情報を呼び出して承認する画面とかでだ。

こんな場合は、readonly属性を使うらしい。
┌──────────────────────────────────────┐
│<input type="checkbox" checked="checked" readonly="readonly"                  
                                                    name="name" value="true"/>│
└──────────────────────────────────────┘

しかし、これだと画面操作としてチェックをつけたり、はずしたりすることは可能だ。
だが、ユーザインタフェースの観点から、チェックを変更できない方がいいと思う。
そこで、disabled属性をつける。
ただし、これだと値も無効になってしまうようなので、hidden属性も併用する。
┌──────────────────────────────────────┐
│<input type="checkbox" checked="checked" disabled="disabled"/>              │
│<input type="hidden" name="name" value="true"/>                             │
└──────────────────────────────────────┘

ただこれだと、チェックボックスが薄く表示されてしまう。
確かに変更は頑として受け付けない態度が見えるが、
チェックボックス自体が無効っぽい印象を受ける。(意見には個人差があります)
それが嫌な場合以下のようにonclickを無効にする方法がある。
┌──────────────────────────────────────┐
│<input type="checkbox" checked="checked" onclick="return false;"/>          │
│<input type="hidden" name="name" value="true"/>                             │
└──────────────────────────────────────┘
分類:HTML
前へ 1 2 3 次へ