HTML

a href=""でクエリが落ちる(IE)

a href=""と省略すると、基本的には現在のURLにリンクされますが、IEの場合、クエリが抜けて意図しない挙動になってしまいしました。例)パラメータid=32をスラッシュ形式で表示した場合 FireFox -> http://example.com/module/action/id/32.html IE -> http…

selectフォームを変更したタイミングでsubmit

submitボタンを使わずにsubmitする為の備忘録selectタグで以下を追加 onchange="this.form.submit()"<form> <select name="aaa" onchange="this.form.submit()"> <option value="hoge">hoge</option> <option value="fuga">fuga</option> <option value="piyo">piyo</option> </select> </form>

POSTデータの数値判定

数値(小数は省く)かどうかを判定したい場合 ctype_digit()を使う。

同じ名前のPOSTデータ

ボタンを押した箇所の値が上手く送れないケースNGな例: <form method="post" action="delete.php"> <input type="submit" value="削除" onClick="return confirm('この品物を削除しますか?')"> <input hidden name='item' value="1"> <input type="submit" value="削除" onClick="return confirm('この品物を削除しますか?')"> <input hidden name='item' value="2"> </form> 最…

リストタグで横に並べる

display:inlineを指定する <ul> <li style="display:inline;">A</li> <li style="display:inline;">B</li> <li style="display:inline;">C</li> <li style="display:inline;">D</li> <li style="display:inline;">E</li> </ul>

submitで押されたボタンの判定

valueで判定すると条件がテキスト一致となって微妙なので、 // templateファイル <input type="submit" name="confirm" value="はい"> <input type="submit" name="confirm" value="いいえ"> // actionファイル if ($request->getPostParameter('confirm') == 'はい') { nameで判定 <input type="submit" name="yes" value="はい">

CSSハック(IE6,7用)

どうしてもブラウザごとにレイアウトが崩れてしまうときの対処 →プロパティの前に「/」をつける #banner { padding-left: 434px; /padding-left: 420px; /* IE6,7用ハック */ }上記の場合、 FireFox → 434px IE6,7 → 420px となる

¥マークをブラウザで表示させる

フォントを指定してやると、¥マークがバックスラッシュにならずに表示させる事ができました font-family: MS ゴシック; もしくは font-family: MS Pゴシック;※半角で"MS ゴシック"とするとIEで表示されないので注意。FireFoxはOK

?秒後に別サイトへ遷移

例)1秒後にYahoo!へ遷移 <meta http-equiv="refresh" content="1;url=http://www.yahoo.co.jp/">※0秒指定しても一瞬元の画面は表示されます</meta>

disabledとreadonlyの違い

どちらもtextareaタグの属性として指定すると入力不可になり、グレーアウト*1しますが、submitした際の値の扱いについて異なります。 ・readonly ... 値を送信する ・disabled ... 値を送信しない *1:IEではグレーアウトしませんでした(FireFoxではします)

チェックボックスにチェックを入れたら入力不可にする

function pageUpdate(checkboxObj) { if (checkboxObj.checked) { // テキストエリアへの入力を不可にする document.getElementById('textArea').setAttribute("disabled", "disabled"); } else { document.getElementById('textArea').removeAttribute("dis…

値のない属性の記述について

以下のような記述はどちらも有効です ※HTML的な記述 ※XHTML対応記述例 <textarea cols="20" rows="2" disabled></textarea> <textarea cols="20" rows="2" disabled="disabled"></textarea>

input_hidden_tagで配列を渡す(id、nameについて)

echo input_hidden_tag('year', '2009'); echo input_hidden_tag('month', '1'); echo input_hidden_tag('day', '1');defaultではid,nameともに第一引数になります。 <input type="hidden" name="year" id="year" value="2009" />配列を渡したい場合などは echo input_hidden_tag('date[year]', '2009'); とはできません…

mailtoで送るbodyの文字化け対策(URLエンコード)

以下のいずれかを使います。 urlencode() ※半角スペースが+になる rawurlencode() ※半角スペースが%20(空白)になる mailto</a>';本文 本文

mailto:クエリで挿入した本文を改行させる

bodyに%0D%0Aを挿入します <a href=mailto:xxx@xxx.co.jp?body=aaa%0D%0Abbb>メーラー起動</a>メーラー起動

mailto:で件名と本文を挿入する

クエリに変数を持たせれば可能です。 subject・・・タイトル body・・・本文 <a href=mailto:xxx@xxx.co.jp?subject=title&body=body>メーラー起動</a>メーラー起動

クエリで配列パラメータの渡し方

配列paramsのデータを渡す http://xxxxxx?params[1]=1 普通の変数の場合 例)param1=1, param2=2 を渡す http://xxxxxx?param1=1&param2=2

チェックボックスのデータ送信(配列データ送信)

<form method="post"> <input type="checkbox" name="checks[]" value="1" />aaa <input type="checkbox" name="checks[]" value="2" />bbb <input type="checkbox" name="checks[]" value="3" />ccc <input type="submit" value="送信" /> </form> name="checks[]"とする事で配列データを送信することができま…

フォームからのデータ送信(プルダウンリスト)

プルダウンリストからデータ送信する場合の記述例 <form method="post"> <select name="data"> <option value="1">aaa</option> <option value="2">bbb</option> <option value="3">ccc</option> </select> <input type="submit" value="送信" /> </form> <select>のnameが変数になり、<option>のvalueが値になります <form>の…</form></option></select>

XHTMLのルール

ざっくりとしたXHTMLのルールを紹介します。1.正しくネストする XHTML: <p><strong></strong></p> HTML: <p><strong></p></strong>2.要素名・属性名はすべて小文字 XHTML: <h1 class="step"></h1> HTML: <H1 CLASS="step"></H1>3.かならず終了タグで閉じる XHTML: <img src="./images/sample.jpg" alt="サンプル画像" /> <br /> HTML: <img src="./images/sample.jpg" alt="サンプル画像">