Selected Entry
- Javascriptを使用する際の前提について (10/13)
- ブラウザ間の違い�Α�標準準拠モードについて (10/09)
- ブラウザ間の違い�ァ�widthとpaddingの解釈 (10/06)
- メールフォームを作ろう�� (09/30)
- メールフォームを作ろう�� (09/29)
- メールフォームを作ろう�� (09/28)
2008.10.13 Monday
今回は、Javascriptを使用する際の前提となる設定についてご紹介します。まず、javascriptの記述方法として、以前以下のような記述方法を紹介しました。
<script type="text/javascript">
<!--
ここにJavaScriptのソースを記入。
// -->
</script>
こちらですが、HTML4.0以前の規格では、type属性の代わりにlanguage属性でスクリプト言語を使用していたそうです。Javascriptの場合なら、language="Javascript"ですね。したがって上記は、以下のような記述の方がよさそうです。
<script language="Javascript" type="text/javascript">
<!--
ここにJavaScriptのソースを記入。
// -->
</script>
<script type="text/javascript">
<!--
ここにJavaScriptのソースを記入。
// -->
</script>
こちらですが、HTML4.0以前の規格では、type属性の代わりにlanguage属性でスクリプト言語を使用していたそうです。Javascriptの場合なら、language="Javascript"ですね。したがって上記は、以下のような記述の方がよさそうです。
<script language="Javascript" type="text/javascript">
<!--
ここにJavaScriptのソースを記入。
// -->
</script>
2008.10.09 Thursday
まず、そもそも論なのですが、ブラウザには「過去のもの」と「現在メジャーなもの」と「最先端のもの」があるそうです。過去のものは、IE3,4といったところでしょうか。現在メジャーなのは、言うまでもなくIE6です。最先端のものは、FirefoxだったりOperaだったりでしょう。ここでやっかいなのは、このブラウザによってCSSの解釈に違いがあるということです。
で、これも当たり前の話なのですが、過去のブウラザと最先端のものとでは解釈がかなり違います。で、IE6はその中間の位置ににいる訳ですが、このブウラザの（ある意味）優れているところは、あるサイトが過去のブラウザを想定して作成されている場合、それに合わせてブラウザの表示も「過去のもの」に変更してくれて、最先端向けのページの場合は最先端モードで表示してくれます。このモードをそれぞれ、「後方互換」（過去）・「標準準拠」（最先端）といいます。
で、これも当たり前の話なのですが、過去のブウラザと最先端のものとでは解釈がかなり違います。で、IE6はその中間の位置ににいる訳ですが、このブウラザの（ある意味）優れているところは、あるサイトが過去のブラウザを想定して作成されている場合、それに合わせてブラウザの表示も「過去のもの」に変更してくれて、最先端向けのページの場合は最先端モードで表示してくれます。このモードをそれぞれ、「後方互換」（過去）・「標準準拠」（最先端）といいます。
2008.10.06 Monday
まずは、下記の画面をご覧下さい。同じhtml/cssであるにもかかわらず、IE6とFF3で表示画面が違います。
（IE6)
(FF)
こちらのhtm/css（の概要）は以下です。
（IE6)
(FF)
こちらのhtm/css（の概要）は以下です。
(html)
<div id="primary-column">
<a href="./index.html">ホーム</a>＞<strong>部の紹介</strong>
<br />
<p>
<strong>部の歩み</strong>
</p>
<table>
・・・
</table>
</div>
(css)
/* 本文部分 */
div#primary-column {
padding-right:40px;
width: 640px;
float:right;
}
div#primary-column table {
width : 600px;
}
2008.09.30 Tuesday
で、最後の送信画面です。以下、サンプル。
(mail2.php)
<?php
mb_language("ja");
mb_internal_encoding("EUC-JP");
?>
<html>
<head>
<title>メール送信フォーム</title>
</head>
<body>
<?php
//メール送信先を指定します
$to = "aaa@bbb.co.jp";
//フォームの値を取得します
if ($_SERVER["REQUEST_METHOD"] == "POST") {
foreach($_POST as $k => $v){
if (get_magic_quotes_gpc()){
$v = stripslashes($v);
}
$v = htmlspecialchars($v);
$$k = $v;
}
}
else {
exit();
}
//メール本文を組み立てます
$naiyou = "以下の内容でうけたまわりました。内容を確認の上回答しますので、
しばらくお待ち下さい。¥n
お名前：$name¥n
メールアドレス：$from¥n
題名：$title¥n
内容：¥n
$naiyou¥n";
if ($name !="" and $from !="" and $title !="" and $naiyou !="" ){
if (mb_send_mail($from, $title, $naiyou, "From:$from", "Bcc:$to")) {
echo "メールを送信しました";
}
else {
echo "メールを送信できませんでした";
}
}
?>
</body>
</html>
2008.09.29 Monday
今回は内容確認画面です。では、まずサンプルから。
(kakunin2.php)
<?php
mb_language("ja");
mb_internal_encoding("EUC-JP");
?>
<html>
<head>
<title>メール送信フォーム</title>
</head>
<body>
<h2>メール送信内容確認画面</h2>
<?php
//フォームの値を取得します
if ($_SERVER["REQUEST_METHOD"] == "POST") {
foreach($_POST as $k => $v){
if (get_magic_quotes_gpc()){
$v = stripslashes($v);
}
$v = htmlspecialchars($v);
$$k = $v;
}
}
else {
exit();
}
//値をチェックします
$ErrFlag = 0;
if ($name == "") {
echo "<p>お名前を入力して下さい</p>";
$ErrFlag = 1;
}
if ($from="")) {
echo '<p>メールアドレスを入力して下さい</p>';
$ErrFlag = 1;
}
if ($title == "") {
echo "<p>メールタイトルを入力して下さい</p>";
$ErrFlag = 1;
}
if ($naiyou == "") {
echo "<p>メッセージを入力して下さい。</p>";
$ErrFlag = 1;
}
if ($ErrFlag) {
echo "<input type=¥"submit¥" value=¥"戻る¥" onClick=¥"form.action='mailhome.php';return true¥">";
exit();
}
$name = mb_substr($name, 0, 15);
$from = mb_substr($from, 0, 60);
$title = mb_substr($title, 0, 30);
$naiyou = mb_substr($naiyou, 0, 500);
?>
<p><strong>内容を確認して送信ボタンをクリックして下さい。</strong><br />
・メールアドレスを正しく入力しないと返信できませんので、よくご確認下さい。<br />
・確認のため、記載のアドレス宛てに下記内容のメールを送付します。万一届かない場合は、<br />
メールアドレスに誤りがあると思われますので、恐れ入りますが、再度ご入力下さい。
</p>
<form method="POST" action="mail2.php">
<table border="0">
<tr>
<td width="100">お名前</td>
<td width="300"><?php echo $name ?></td>
</tr>
<tr>
<td width="100">メールアドレス</td>
<td width="300"><?php echo $from ?></td>
</tr>
<tr>
<td width="100">メールタイトル</td>
<td width="300"><?php echo $title ?></td>
</tr>
<tr>
<td width="100">メッセージ</td>
<td width="300"><?php echo nl2br($naiyou) ?></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="送信" onClick="form.action='mail2.php';return true">
<input type="submit" value="戻る" onClick="form.action='mailhome.php';return true"></td>
</tr>
</table>
<input type="hidden" name="name" value="<?php echo $name?>">
<input type="hidden" name="from" value="<?php echo $from?>">
<input type="hidden" name="title" value="<?php echo $title?>">
<input type="hidden" name="naiyou" value="<?php echo $naiyou?>">
</form>
</body>
</html>
2008.09.28 Sunday
ではまず、入力画面のサンプルからです。
(mailhome.php)
<?php
mb_language("ja");
mb_internal_encoding("EUC-JP");
?>
<html>
<head>
<title>メール送信フォーム</title>
<meta http-equiv="Content-Type" content="text/html; charset=ECU-JP">
</head>
<body>
<h2>メール送信フォーム</h2>
<?php
//フォームの値を取得します
if ($_SERVER["REQUEST_METHOD"] == "POST") {
foreach($_POST as $k => $v){
if (get_magic_quotes_gpc()){
$v = stripslashes($v);
}
$v = htmlspecialchars($v);
$$k = $v;
}
}
if (isset($del)){
$name="";
$from="";
$title="";
$naiyou="";
$del="";
}
echo "<form method=¥"POST¥" action=¥"kakunin2.php¥">
<p>お名前（15字以内）：<br />
<input type=¥"text¥" name=¥"name¥" value='$name' size=40></p>";
echo "<p>メールアドレス（60字以内）：<br />
<input type=¥"text¥" name=¥"from¥" value='$from' size=60></p>
<p>題名（30字以内）：<br />
<input type=¥"text¥" name=¥"title¥" value='$title' size=40></p>
<p>本文（500字以内）：<br />
<textarea rows=5 name=¥"naiyou¥" cols=60>$naiyou</textarea></p>
<input type=¥"submit¥" value=¥"内容を確認¥">
<input type=¥"submit¥" name=¥"del¥" value=¥"内容を消去¥" onClick=¥"form.action='mailhome.php';return true¥">
</form>
";
?>
</body>
</html>
