2017年05月27日

HTML5 input の type テンプレート


<style>
.fld_type td {
	padding: 4px;
}
</style>
<form>
	<table class="fld_type">
	<tr>
		<td>text</td>
		<td>
			<input type="text" name="fld_default">
		</td>
	</tr>
	<tr>
		<td>search</td>
		<td>
			<input type="search" name="fld_search" value="検索">
		</td>
	</tr>
	<tr>
		<td>tel</td>
		<td>
			<input type="tel" name="fld_tel" pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}">
		</td>
	</tr>
	<tr>
		<td>url</td>
		<td>
			<input type="url" name="fld_url">
		</td>
	</tr>
	<tr>
		<td>email</td>
		<td>
			<input type="email" name="fld_email">
		</td>
	</tr>
	<tr>
		<td>datetime</td>
		<td>
			<input type="datetime" name="fld_datetime">
		</td>
	</tr>
	<tr>
		<td>datetime-local</td>
		<td>
			<input type="datetime-local" name="fld_datetime_local">
		</td>
	</tr>
	<tr>
		<td>date</td>
		<td>
			<input type="date" name="fld_date">
		</td>
	</tr>
	<tr>
		<td>month</td>
		<td>
			<input type="month" name="fld_month">
		</td>
	</tr>
	<tr>
		<td>week</td>
		<td>
			<input type="week" name="fld_week">
		</td>
	</tr>
	<tr>
		<td>time</td>
		<td>
			<input type="time" name="fld_time">
		</td>
	</tr>
	<tr>
		<td>number</td>
		<td>
			<input type="number" name="fld_number">
		</td>
	</tr>
	<tr>
		<td>range</td>
		<td>
			<input type="range" name="fld_range">
		</td>
	</tr>
	<tr>
		<td>color</td>
		<td>
			<input type="color" name="fld_color">
		</td>
	</tr>

	<tr>
		<td>submit</td>
		<td>
			<input type="submit" name="fld_submit">
		</td>
	</tr>
	</table>
</form>

text
search
tel
url
email
datetime
datetime-local
date
month
week
time
number
range
color
submit
Google Chrome での確認

search では、入力値がある場合、カーソルが上にあると、x ボタンが表示されます。

tel では何もチェックされないので、pattern 属性をセットしています。但し、スマホではキーパッドが数字用になるので、number では無く tel を指定すると良い場合があります

url と email は最低限のチェックがされます

datetime は何もされません

number は、カーソルが上にあると、spinner が表示されます。また、数字関係以外は入力できません

input のみを並べたもの
<style>
.fld_type {
	white-space: pre;
}
</style>
<form>
<div class="fld_type">
<input type="text" name="fld_default">
<input type="search" name="fld_search" value="検索">
<input type="tel" name="fld_tel" pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}">
<input type="url" name="fld_url">
<input type="email" name="fld_email">
<input type="datetime" name="fld_datetime">
<input type="datetime-local" name="fld_datetime_local">
<input type="date" name="fld_date">
<input type="month" name="fld_month">
<input type="week" name="fld_week">
<input type="time" name="fld_time">
<input type="number" name="fld_number">
<input type="range" name="fld_range">
<input type="color" name="fld_color">
<div>

<input type="submit" name="fld_submit">
</form>

PHP 用 テンプレート

デモページ

日付系など、特殊なコントロールでどのような値が入るか確認できますので、適当に値を入力して送信ボタンを押してください。
<?php
session_cache_limiter('nocache');
session_start();

header( "Content-Type: text/html; charset=utf-8" );

foreach( $_GET as $key => $value ) {
	$_GET[$key] = str_replace( "\"", "&#34;", $value );
}
?>
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<style>
.fld_type {
	white-space: pre;
}
</style>
</head>
<body>

<form>
<div class="fld_type">
<input type="text" name="fld_default" value="<?= $_GET["fld_default"] ?>">
<input type="search" name="fld_search" value="検索" value="<?= $_GET["fld_search"] ?>">
<input type="tel" name="fld_tel" pattern="[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}" value="<?= $_GET["fld_tel"] ?>">
<input type="url" name="fld_url" value="<?= $_GET["fld_url"] ?>">
<input type="email" name="fld_email" value="<?= $_GET["fld_email"] ?>">
<input type="datetime" name="fld_datetime" value="<?= $_GET["fld_datetime"] ?>">
<input type="datetime-local" name="fld_datetime_local" value="<?= $_GET["fld_datetime_local"] ?>">
<input type="date" name="fld_date" value="<?= $_GET["fld_date"] ?>">
<input type="month" name="fld_month" value="<?= $_GET["fld_month"] ?>">
<input type="week" name="fld_week" value="<?= $_GET["fld_week"] ?>">
<input type="time" name="fld_time" value="<?= $_GET["fld_time"] ?>">
<input type="number" name="fld_number" value="<?= $_GET["fld_number"] ?>">
<input type="range" name="fld_range" value="<?= $_GET["fld_range"] ?>">
<input type="color" name="fld_color" value="<?= $_GET["fld_color"] ?>">
<div>

<input type="submit" name="fld_submit">
</form>

<pre>
<?php 
foreach( $_GET as $key => $value ) {
	$_GET[$key] = str_replace( "&#34;", "\"",  $value );
}
print_r($_GET)
?>
</pre>

</body>
</html>



タグ:HTML5
posted by at 2017-05-27 19:26 | テンプレート | このブログの読者になる | 更新情報をチェックする

2017年05月23日

mb_send_mail を使用したメール送信テンプレート : jQuery の $.ajax で、FormData オブジェクトを送信する



1) 別ドメインでも ajax が動作するように、Access-Control-Allow-Origin: * をセット
2) ブラウザの入力チェック機能を使う為に、FORM 内に入力を配置( 但し name 属性なし )
3) $.ajax の戻りとして JSON データを使用しているが、テストの為 JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE を指定

send_jquery_ajax.php
<?php
session_cache_limiter('nocache');
session_start();

$page_title = "メール送信(jQuery ajax POST)";

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?= $page_title ?></title>
<style>
body {
	background-color: lemonchiffon;
}

#main {
	padding: 20px 0px 20px 100px;
}

.btn {
	width: 70px;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

var gdata;

$( function(){

	$("#mail_form").on("submit", function(){

		if ( !confirm("メールを送信しますか?") ) {
			return false;
		}

		// **************************************
		// サーバへ送信
		// **************************************

		// 新規送信用オブジェクト
		var formData = new FormData();

		// 送信フィールド作成
		formData.append("to", $("#to").val());
		formData.append("subject", $("#subject").val());
		formData.append("body", $("#body").val());

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "./post_action.php",
			type: "POST",
			data: formData,
			processData: false,
			contentType: false
		})
		// 成功
		.done(function( data, textStatus ){
			gdata = data;
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {

		})
		;

		// FORM からの送信はしない
		return false;
	} );


} );

function checkSubmit() {

	if ( !confirm("メールを送信しますか?") ) {
		return false;
	}

	return true;

}
</script>
</head>
<body>
<h3><?= $page_title ?></h3>

<div id="main">

	<form id="mail_form">
		<p>宛 先:<input id="to" type="email" required value="<?= $_SESSION["to"] ?>"></p>
		<p>件 名:<input id="subject"  type="text" value="<?= $_SESSION["subject"] ?>"></p>
		<p>本 文:<input id="body" type="text" value="<?= $_SESSION["body"] ?>"></p>
		<p><input type="submit" value="メール送信(jQuery)"></p>
	</form>

	<input  class="btn" type="button" value="リセット" onclick='location.href="<?= $_SERVER["PHP_SELF"] ?>"'>
	
</div>

</body>
</html>


post_action.php
<?php
session_cache_limiter('nocache');
session_start();

//header( "Access-Control-Allow-Origin: http://localhost" );
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: application/json; charset=utf-8" );

mb_language("Japanese");
mb_internal_encoding("UTF-8");

if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {

	$_SESSION["to"] = $_POST["to"];
	$_SESSION["subject"] = $_POST["subject"];
	$_SESSION["body"] = $_POST["body"];

	$from_header = "From: " . mb_encode_mimeheader( mb_convert_encoding("差出人","iso-2022-jp") );

	// このソースを置くサーバから使えるメールアドレス
	$from_header .= " <ユーザ名@ドメイン>";

	$result = mb_send_mail($_POST["to"], $_POST["subject"], $_POST["body"], $from_header);
	if ( $result ) {
		$_POST["result"] = 'メールを送信しました';
	}
	else {
		$_POST["result"] = 'メール送信に失敗しました';
	}

}
else {
	$_POST["result"] = 'GET メソッドで呼び出されました。POSTメソッドを使用して下さい';
}

print json_encode($_POST,JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE  );

?>



posted by at 2017-05-23 20:14 | テンプレート | このブログの読者になる | 更新情報をチェックする

mb_send_mail を使用したメール送信テンプレート : FORM の action で URL を指定する(画面と処理を別にする)



send_form_action.php
<?php
session_cache_limiter('nocache');
session_start();

$page_title = "メール送信";


?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?= $page_title ?></title>
<style>
body {
	background-color: lemonchiffon;
}

#main {
	padding: 20px 0px 20px 100px;
}

.btn {
	width: 70px;
}
</style>


<script>
function checkSubmit() {

	if ( !confirm("メールを送信しますか?") ) {
		return false;
	}

	return true;

}
</script>
</head>
<body>
<h3><?= $page_title ?></h3>

<div id="main">

	<form action="mail_send.php" method="post" onsubmit='return checkSubmit()'>

		<p>宛 先:<input id="to" type="email" required name="to" value="<?=$_POST["to"] ?>"></p>
		<p>件 名:<input id="subject"  type="text" name="subject" value="<?=$_POST["subject"] ?>"></p>
		<p>本 文:<input id="body"  type="text" name="body" value="<?=$_POST["body"] ?>"></p>
		<p><input class="btn" type="submit" value=" 送信 "></p>

	</form>

	<input  class="btn" type="button" value="リセット" onclick='location.href="<?= $_SERVER["PHP_SELF"] ?>"'>

</div>

</body>
</html>


mail_send.php
<?php
session_cache_limiter('nocache');
session_start();

$page_title = "メール送信実行(POST)";

mb_language("Japanese");
mb_internal_encoding("UTF-8");

if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {

	$from_header = "From: " . mb_encode_mimeheader( mb_convert_encoding("差出人","iso-2022-jp") );

	// このソースを置くサーバから使えるメールアドレス
	$from_header .= " <ユーザ@ドメイン>";

	$result = mb_send_mail($_POST["to"], $_POST["subject"], $_POST["body"], $from_header);
	if ( $result ) {
		$_POST["result"] = 'メールを送信しました';
	}
	else {
		$_POST["result"] = 'メール送信に失敗しました';
	}

}

$debug = "\$_POST\n" . print_r($_POST, true) . "\n\$_SESSION\n" . print_r($_SESSION, true);

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?= $page_title ?></title>
</head>
<body>
<h3><?= $_POST["result"] ?></h3>
<?php if ( $_SERVER["REQUEST_METHOD"] == "POST" ) { ?>
<input  class="btn" type="button" value="戻る" onclick='location.href="<?= $_SERVER["HTTP_REFERER"] ?>"'>
<?php } ?>


<pre>
<?= $debug ?>
</pre>
</body>
</html>



posted by at 2017-05-23 15:58 | テンプレート | このブログの読者になる | 更新情報をチェックする

2017年05月12日

PHP + CSS : mysqli クラスで select を自由に入力して table に表示するテンプレート

ただ、select 構文を自由に入力して結果を表示する、シンプルな PHP のサンプルです。

デモページ
(デモの為、select * from 社員マスタ しか実行できません)

PHP と HTML 部分 : query_data.php
<?php
session_cache_limiter('nocache');
session_start();

$dt = date('Y/m/d H:i:s');

if ( $_GET["text"] == "" ) {
	$_GET["text"] = "select * from syain";
}

?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>MySQL SQL 実行</title>
	<link rel="stylesheet" href="query_data.css">

</head>
<body>

<h3>
	<?= $dt ?>
	<input  class="resetbtn" type="button" value="リセット" onclick='location.href="<?= $_SERVER["PHP_SELF"] ?>"'>
</h3>

<form 
	method="get"
	action="query_data.php"
>

	<textarea name="text"><?= $_GET["text"] ?></textarea>

	<br>

	<input 
		type="submit"
		name="send"
		value="送信"
	>

</form>

<?php


$mysqli = new mysqli('サーバ', 'ユーザ', 'パスワード', 'データベース');
$mysqli->set_charset("utf8");

if ($mysqli->connect_error) {
	die('Connect Error (' . $mysqli->connect_errno . ') '
		. $mysqli->connect_error);
}

$sql = $_GET["text"];

if ($result = $mysqli->query($sql)) {

	print "<table>";

	$first = true;
	while ($row = $result->fetch_assoc()) {


		if ( $first ) {

			// タイトル(列名)部分
			print "<tr>";

			$first = false;
			foreach ($row as $key => $value) {

				print	"<td>{$key}</td>";

			}

			print "</tr>";
		}


		print "<tr>";

		// データ部分
		foreach ($row as $key => $value) {

			print	"<td>{$value}</td>";

		}

		print "</tr>";


	}

	print "</table>";

	$result->close();
}
else {

	print "<div class='error'>{$mysqli->error}</div>";

}



$mysqli->close();
?>

<pre class="debug">
▼ $_GET の表示
<?php
print_r($_GET);
?>
</pre>

</body>
</html>


CSS 部分 : query_data.css
@charset "UTF-8";

body {
	margin: 0px;
}

body,h3,textarea,input,pre,td,th,pre {
	font-family: "ヒラギノ角ゴPro W6","Hiragino Kaku Gothic Pro W6","メイリオ",Meiryo,"MS Pゴシック",Verdana,Arial,Helvetica,sans-serif;
}

h3 {
	margin: auto;
	background-color: cornsilk;
	padding: 5px 0px 5px 20px;
	border: 1px solid #c0c0c0;
	border-radius:0px;
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

form, table, .error, .debug {
	margin: 30px 0px 20px 30px;
}

textarea {
	width: 800px;
	height: 120px;
	font-size: 16px;
}

pre {
	font-size: 16px;
}

h3 input {
	background-color: royalblue;
	color: white;
	position: relative;
	top: -2px;
	left: 20px;
}

table {
	border-collapse: collapse;
}

table, td {
	border: solid #a0a0a0 1px;
}

td {
	padding: 4px;
}

.error {
	color: crimson;
}

.debug {
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	margin-bottom: 200px;
	margin-right: 100px;
	padding: 20px;
}



posted by at 2017-05-12 19:02 | テンプレート | このブログの読者になる | 更新情報をチェックする

2017年05月11日

mb_send_mail を使用したメール送信テンプレート



1) キャッシュ無効
2) style
3) script
4) post 時に送信
5) from ヘッダ追加

※ required と type="email" で mb_send_mail のサーバエラーを回避
<?php
session_cache_limiter('nocache');
session_start();

$page_title = "メール送信";


?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?= $page_title ?></title>
<style>
#main {
	padding: 20px 0px 20px 100px;
}

.btn {
	width: 70px;
}
</style>
<script>
function checkSubmit() {

	if ( !confirm("メールを送信しますか?") ) {
		return false;
	}

	return true;

}
</script>
</head>
<body>
<h3><?= $page_title ?></h3>

<div id="main">
	<form method="post" onsubmit='return checkSubmit()'>

		<p>宛 先:<input type="email" required name="to" value="<?=$_POST["to"] ?>">	</p>
		<p>件 名:<input type="text" name="subject" value="<?=$_POST["subject"] ?>">	</p>
		<p>本 文:<input type="text" name="body" value="<?=$_POST["body"] ?>">			</p>
		<p><input class="btn" type="submit" value=" 送信 ">											</p>

	</form>

	<input  class="btn" type="button" value="リセット" onclick='location.href="<?= $_SERVER["PHP_SELF"] ?>"'>
</div>

<?php
mb_language("Japanese");
mb_internal_encoding("UTF-8");

if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {

	$from_header = "From: " . mb_encode_mimeheader( mb_convert_encoding("差出人","iso-2022-jp") );

	// このソースを置くサーバから使えるメールアドレス
	$from_header .= " <ユーザ@ドメイン>";

	$result = mb_send_mail($_POST["to"], $_POST["subject"], $_POST["body"], $from_header);
	if ( $result ) {
		print 'メールを送信しました';
	}
	else {
		print 'メール送信に失敗しました';
	}

}

print "<pre>";
print_r($_POST);
print "</pre>";

?>
</body>
</html>




posted by at 2017-05-11 23:53 | テンプレート | このブログの読者になる | 更新情報をチェックする