入力フォームで名前・年齢・パスワード等のデータを送信・受信したい場合、<input>タグと<form>タグを使用すれば簡単に作成できます。
フォームを作るので → <form>タグ、入力するものなので → <input>タグ…と整理しておくと覚えやすいかなと思います＾＾
この2つのタグの中に、データを送信する方法や送り先などを記述することでデータの受け渡しができるようになるんですね。
このページでは、初学者でもできる入力フォームの作り方と手順について解説します＾＾
送信用と受信用のファイルを作成する
まずはデータを送る側のファイルとそれを受け取るためのファイルを作成します。
フォームの表示はHTMLファイルが担当し、データ処理は(HTMLではできないので)PHPファイルが担当します。(デザインや装飾はcssの担当ですが今回は割愛。)
はい。さっそく以上のように同じフォルダ内に2つのファイル(sousin.htmlとjyusin.php)を作って開き、VisualStudioCodoをお使いでしたら、「!」と入力してENTERボタンを押すと自動作成できる設定を反映させて体裁を整えます。
一応、コピペ用のコードを載せておきますね。これを2つのファイル両方に貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入力フォームの作り方</title>
</head>
<body>
</body>
</html>
これで下準備は完了しました＾＾
フォームを表示するためのコーティング
ファイルが準備できましたら、フォームを表示させるHTMLファイルからコードを書いていきましょう。
インターネットのブラウザで開いたページに表示させる内容は、<body>の中に記述するというルールがあるため、その中に冒頭で紹介済みのformタグとinputタグを記述します。
<body>
<form action="./jyusin.php" method="post">
<input type="text" name="your-name">
<input type="submit">
</form>
</body>
新たに書き足した<form>タグと＜input＞タグの内容です。
はい、これだけで入力用フォームの表示が可能になります◎
画像内の10~13行目にあたる部分ですが、それぞれの構成と意味について理解しておきましょう。
10行目は<form>の開始タグ、13行目に</form>の閉じタグ、その間に<input>タグを入れている構成になっていますね。
10行目の<form>タグの中に書いた action=”./jyusin.php” は、データの送り先となるファイル名を指定しており、method=”post” では、データを送る方法を指定しています。
ちなみに、送る方法は get と post があり、もし”get”と書くとブラウザのアドレスバーの中にもデータが表示されるオープンな送信方法となります。
一方、今回と同じように”post”送信にするとアドレスバーに表示されないためクローズドな方法となりますが、特徴の違いはこれだけではないので、興味がある方は「get post 違い」などで検索してみてください。
さて、11、12行目は<input>タグですが、この中に type=”text”と書くことで、1行のテキストボックスを作ることができます。
その右側では、name=”your-name” と記述して、name属性に”your-name”を割り当てることで、データを受信する側のファイルはこの名前を使って、データを取得・表示できるようになります。
12行目の<input>タグの中に書いた type=”submit”は主に2つの重要な働きをします。
このように書くだけで、① ボタンが実装され、② データの入力後にその送信ボタンを押下すると10行目と連動して、設定した送り先までpost送信してくれるのです。
これでフォームの表示を担当するHTMLファイルは作業終了です。
データを受け取るためのコーティング
次に、送ってもらったデータを受け取り、ブラウザで表示させるためのPHPファイルの中にコードを書いていきます。
といっても、たったの1行だけでOKですw
<body>
<?php echo $_POST["your-name"]; ?>
</body>
ご覧のとおり、<body>タグ内に1文だけ追記しました。
画像内10行目に位置するこのコードの意味についても理解しておきましょう。
まず、両端にある <?php 〇〇 ?> は、PHPの世界を指しています。
つまり、<?php と書いたところから ?> までの範囲がPHPのプログラムだよ、と定義しているわけです。
<?php //読み方：小なり、はてな、ピーエッチピー なにがし ?> //読み方：はてな、大なり このように <?php と書いてある箇所や ?> を見かけると、最初は見慣れない分、[…]
<?php の右隣にある echo は、文字をブラウザで出力したいときに書くコードです。
最後の $_POST[“your-name”]; の箇所は、すでにお気づきかもしれませんが、 HTMLファイルからPOST送信で飛んできたデータをname属性の”your-name”という名前で受け取っています。
HTMLファイルに記述したname属性の名前と足並みを揃える形にして実現させているわけですね。
HTMLで書いた内容を忘れちゃったという場合は、もう一度確認してみましょう。↓
はい。name属性では”your-name“という名前で結びつけ、method=”post“の方法で送信するようにしていましたね。
なので、受け取る側も$_POST[“your-name”]; と書くことで送信された値を適切に受け取れるようにしており、それを echo してブラウザに表示させる動きとなっています＾＾
ブラウザで確認する
では、実際にブラウザを立ち上げて実行してみましょう。
このように任意の名前を入力して送信ボタンを押下すると…
はい！ファイル名で設定した「/jyusin.php」という遷移先ページにて名前を受け取り、ちゃんと表示されていることが確認できますね！
このように <form> タグと <input> タグを利用してコードを書けば、入力フォームで名前などを簡単に送信・受信できることがわかったと思います＾＾
応用すれば年齢やパスワードの入力フォームも簡単！
以上のスキルに少しだけ応用を加えるだけで、年齢やパスワードも入力フォームで簡単にやり取り可能です。
こちらもサクッとマスターしちゃいましょう！
先にHTML側のファイルですが、以下のコードでは、何を足したかわかるでしょうか？
<body>
<form action="./jyusin.php" method="post">
あなたの名前：<input type="text" name="your-name"><br>
あなたの年齢：<input type="number" name="your-age"><br>
パスワード ：<input type="password" name="your-password">
<input type="submit">
</form>
</body>
まず、表示した時に各欄をわかりやすく判別できるよう、「あなたの名前：」~「パスワード：」の固定文を追記しました。
更に、その右端には改行するためのタグである2つの＜br＞を足し、年齢とパスワード欄のtype属性には”number”と”password”をそれぞれ割り当てました。
こうすることで、年齢用の入力フォームにはプルダウンメニューの選択画面が表示され、パスワード欄のフォームには入力時に個人情報を守るための●●●(目隠し)が表示されます。
このようにHTMLでは、type属性に書く名前に応じて、便利な機能を表示できるように予め設定がされているんですね。
また、PHP側と値のやり取りをするためのname属性にもわかりやすい名前をそれぞれ付けました。
受け取る側のファイルには、以下のコードを追記してみます。
<body>
名前：<?php echo $_POST["your-name"]; ?><br>
年齢：<?php echo $_POST["your-age"]; ?>歳<br>
パス：<?php echo $_POST["your-password"]; ?>
</body>
こちらでも、固定文をちょっと書き足し、name属性の名前をHTMLファイルで定義したものと足並みを揃えるようにし、<br>タグで改行も入れています。
以上の内容で、早速ブラウザ確認してみると…
ご覧のとおり、年齢の入力フォームはプルダウンで数字を選べるようになっていますし、パスワード欄は入力した数字の上に●でマスキング(目隠し)する施策が組み込まれているのがわかりますね。
で、送信ボタンを押下しますと…
はい。移動したページ先でしっかりとデータを受け取り、年齢・パスワードも正確に表示することができましたね◎
まとめ
いかがだったでしょうか？
仮に今のあなたが初心者だったとしても「頑張ればなんかできそうだ！」と感じていただけたのであれば嬉しいです＾＾
万が一、「こんなにたくさん覚えられないよ…」と意気消沈しちゃったのであれば、それは単なる勘違いなので、気を落とさないでくださいね＾＾
プログラミングは記憶してマスターするスキルというよりは、「やりたいことが決まったら、検索をかけて必要なコードを毎回見つけてコピペする作業」と考えると、一気にハードルが下がります。
なので、今回の入力フォームでしたら、扱いたいデータの種類について考えつつ「name属性 意味」とか「type属性 種類」などで検索をかけると、更に入力フォームで実現できる幅がグンと広がっていくはずです◎
今回アウトプットしたものをベースにしながら、是非どんどんとスキルアップしていってくださいね＾＾