お問い合わせフォームとメールフォームの考え方は同じ。
2021.06.07
お問い合わせフォームとメールフォームの考え方は同じです。AからBにデータを送信してそれを元に処理をしているだけです。これはフォームに限らず、プログラムはデータを元に計算などを行い結果を出力しているに過ぎないのです。コンピュータというのは高速にデータを分類したり、計算したりしているだけなのです。
プログラミングに挫折する人は、いろいろな事に疑問を持って先に進まない人が多いです。どうしてそうなるのかという所まで考えようとしていて前に進まない人が多いです。
逆にそうなるだという事を受け入れる人の方が覚えが早いです。最初はルールを覚えたほうが良いですね。
小学生でプログラミングを始めたい方は、人のプログラミングコードを模写して、そのコードの一部の数字などを変更してみて、こうするとこうなるのかという形で覚えていくほうが良いと感じます。参考書には難しい言葉を使って書いている事が多いので、そのような形で覚えるほうが良いでしょう。
今回のソースコードを貼っときますので、コピーするのではなく自分で書いて動かしてみてください！
※因みにphp言語が動作する環境が必要になります。
https://www.sakura.ne.jp/standard.html#plan
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="お問い合わせ"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<title>お問い合わせ</title>
<style>
body{
background-color: #f8f9fa;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h2>お問い合わせ</h2>
<input class="form-control mt-1" type="text" name="name" placeholder="お名前を入力ください">
<input class="form-control mt-1" type="text" name="email" placeholder="メールアドレスを入力ください">
<div class="form-group mt-1">
<label for="my-select">お問い合わせ</label>
<select id="my-select" class="form-control" name="ptn">
<option value="問い">お問い合わせ</option>
<option value="意見">ご意見</option>
</select>
</div>
</div>
</div>
<div class="form-group mt-1">
<label for="my-textarea">内容</label>
<textarea id="my-textarea" class="form-control" name="text" rows="3" placeholder="内容を入力ください"></textarea>
</div>
<button class="btn btn-primary" id="btn" type="button">送信</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
document.getElementById("btn").addEventListener("click",function(){
let data = {};
data["name"] = document.getElementsByName("name")[0].value;
data["email"] = document.getElementsByName("email")[0].value;
data["ptn"] = document.getElementsByName("ptn")[0].value;
data["text"] = document.getElementsByName("text")[0].value;
$.ajax({
type: "POST",
dataType: "json",
url: "./send.php",
data: data,
success: function (response) {
if(response){
console.log(response);
}
}
});
});
</script>
</body>
</html><?php
print json_encode($_POST);
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
いろいろ, お問い合わせ, コード, これ, コンピュータ, それ, データ, フォーム, プログラミング, プログラム, メール, ルール, 一部, 事, 人, 元, 処理, 出力, 分類, 前, 参考書, 変更, 小学生, 形, 所, 挫折, 数字, 方, 最初, 模写, 疑問, 結果, 考え方, 言葉, 計算, 送信, 逆, 高速,