見出し画像

お問い合わせフォーム

タイトル: "フォームの冒険"

昔々、小さな村がありました。その村には情報を共有したい人々がたくさんいました。そこで、村人たちは一つのアイデアに賭けることにしました - 「フォーム」。

最初は HTML の森で、村人たちは <form> の種をまきました。その種が芽を出し、村に情報の木が生まれました。しかし、木から情報を手に入れるにはもっと多くの手間がかかりました。

すると、PHP の魔法使いが現れました。彼は for ループの杖を振りかざし、if 文の魔法で条件を判断しました。そして、フォームに集まった情報を丁寧に取り込んで、村の人々に届けることができるようにしました。

冒険は続き、村人たちはセレクトボックスや入力フィールドの森にも足を踏み入れました。そこで見つけた道具や宝物は、より良い情報の交換を可能にしました。

フォームの冒険は、村人たちが手軽に情報をやり取りできるようになった素敵な物語でした。そして、村の人々は幸せな日々を過ごしました。

ChatGpt 例え話




フォームの構築


フォーム(form)は、HTML要素の一種で、ユーザーがウェブページ上でデータを入力し、それをサーバーに送信するための仕組みです。フォームには様々な種類の入力フィールド(テキストボックス、ラジオボタン、チェックボックスなど)や送信ボタンが含まれます。フォームを構成するためには、HTML内で<form>タグを使用します。

ただし、フォーム自体には直接的な表示がありません。フォーム内に配置された入力フィールドやボタンなどが、ユーザーに対して表示されます。フォームの目的は、ユーザーがデータを入力し、それをサーバーに送信するための仕組みを提供することです。

フォームの見た目はHTMLでフォームを作成し、入力値を取得するためにPHPを使用していきます。

** html **


<form action='url' method='post'>
            //送信先       //or get

ここにフォームの内容を書いていく

</form>

フォームを作りたい時は、HTMLの<form>タグを用います。
action属性にはデータを渡す先のURLを指定します。
method属性は値の送信の方法で、「get」と「post」のどちらかを指定します。getの場合は送信される値がURLに表示され、postの場合はURLに表示されません。


テキストボックス作成

テキストボックスをつくるにはHTMLの<input type="text">を使います。name属性は入力された値を取得するときに使う名前です。後にPHPでフォームのデータを受け取るときに使用します。(PHP側で$_POST や $_GET といったスーパーグローバル変数を介してそのデータにアクセスします )
<input>タグは閉じタグが必要ないです。

** html **

<form action='sent.php' method='post'>

Emailを入力してください

<input type='text' name='email'>
                   //入力データに名前を付ける

</form>

コード内の <form> タグは、HTMLのフォームを定義しています。フォームは、ユーザーがウェブページ上でデータを入力してサーバーに送信するための手段です。

ここでは、action 属性が 'sent.php' に設定されています。これは、フォームが送信されたときにデータがどのスクリプトに送信されるかを指定しています。この場合、sent.php にデータが送信されることになります。

また、method 属性が 'post' に設定されています。これは、データを送信するHTTPメソッドを指定しています。post メソッドは、データを本体に含めて送信するため、通常はセキュアな情報(たとえば、パスワードなど)を送信するときに使用されます。

上記のコードのフォームには1つの入力フィールドがあり、その名前は email です。ユーザーがこのフォームを使用してデータを送信すると、sent.php がそのデータを受け取り、処理することになります。



改行を含む文章のためのテキストボックス

改行を含む文章のためのテキストボックスをつくるにはHTMLの<textarea>タグを用います。
<input>タグと同様にname属性に、入力値を取得するときに使う名前を指定します。<textarea>タグは閉じタグが必要なので注意してください。

** html **

<form action='sent.php' method='post'>

内容

<textarea name='content'></textarea> //閉じタグが必要
     //入力データに名前を付ける               

</form>



送信ボタンをつくろう

送信ボタンをつくるには<input type="submit">を用います。
value属性に指定された値がボタン上に表示されます。

** html **

< form action='sent.php' method='post'>
               //送信先

Emailを入力してください
<input type='text' name='email' value=''>


<input type='submit' value='送信'> //送信ボタン
                 //ボタンに表示される値

</form>


Emailを入力してください
<input type='text' name='email' value=''>

`value=''` は、フォームのテキストボックスなどの初期値を指定するための属性で、特定のテキストや値を事前に表示させることができます。これは、ユーザーが自由に変更できるもので、フォームが読み込まれたときに表示されます。例えば、`value='example@example.com'` のように初期値を設定すると、その文字列がテキストボックスに最初から表示され、ユーザーが必要に応じて上書きすることができます。




フォームのデータを受け取ろう

フォームで送信した値を受け取るには、スーパーグローバル変数「$_POST」を使用します。
「$_POST」は連想配列になっています。[ ]の中に、<input>と<textarea>のname属性に指定した値を入れることで、それぞれの送信した値を受け取ることが出来ます。

** html **

**index.php**  

<form action='sent.php' ..>  

<input ... name='name'> 
                //name属性は「name」 
<input ... name='email'>
                //name属性は「email」
 
</form>    




**sent.php (action=' ..'で指定する送信先)**   
          

          //キー名を指定して値を取り出す 
<?php echo $_POST['name']; ?>  //結果:宿屋のこねこ 
<?php echo $_POST['email']; ?>//結果:koneko@yadoya.com    





//$_POSTの中身は連想配列になっている 

<?php
$_POST = array(
    'name' => '宿屋のこねこ',
    'email' => 'koneko@yadoya.com'
);
?>

// <?phpと?>を忘れない。



PHPとHTMLを混在

  1. PHPの開始と終了: PHPコードを埋め込むには、<?php?>を使用します。PHPのコードとHTMLのコードを混在させる場合、PHPの終了タグ(?>)を明示的に書かずにHTMLを直接続けることができます。ただし、PHPのコードが完全に終了してからHTMLが始まるようにする必要があります。これにより、PHPコードとHTMLコードの区別がはっきりとしていて、PHPのブロックが自然に終わることができます。

<?php
// PHPコード
?>

<!-- HTMLコード -->

<?php
// 更なるPHPコード
?>


  1. シングルクォーテーションとダブルクォーテーション:
    PHPコード内では、HTMLの文字列をシングルクォーテーションやダブルクォーテーションで囲むなど、適切に対応することが大切です。

<?php
echo "<p>This is regular echo method without short tags.</p>";
?>



セレクトボックスの作り方

セレクトボックス(Select Box)は、HTMLフォーム要素の一種で、ユーザーがリストから選択できるようになっています。通常、ドロップダウンリストとも呼ばれます。<select>タグの中に<option>タグを並べます。<option> タグは、HTMLフォーム内で使用される要素の一つであり、通常はセレクトボックス(ドロップダウンリスト)内の個々の選択肢を表します。

** html **

<select>

    <option>りんご</option>
    <option>ばなな</option>
       <option>みかん</option>
              //表示される値

</ select>


セレクトボックスの値の渡し方

<select>タグには「$_POST」で値を受け取るためのname属性を指定します。
<option>タグのvalue属性が送信される値です。

** html **

<form action='sent.php' method='post'>

<select name="fruit">
        //値を受け取る際に指定するデータの名前

<option value='apple'>りんご</option>
<option value='banana'>ばなな</option>
<option value='orange'>みかん</option>
    //value属性が実際にフォームが送信された際にサーバーに送信される値

</select>

</form>




**sent.phpでの値の受け取り方**

<?php echo $_POST['fruit']; ?>  //sent.phpに値を送信

//結果:null


<select>要素内のname="fruit"は、ユーザーが選択した果物の値を識別するために使われます。フォームが送信されると、選択されたオプションのvalue属性に対応する値がfruitという名前でサーバーに送信されます。例えば、ユーザーが「りんご」を選択すると、$_POST['fruit'](もしくは$_GET['fruit'])に 'apple' という値が送信されます。これにより、サーバー側の処理で選択されたオプションの値を取得・処理することが可能になります。

<select>タグ内の<option>要素のそれぞれには、value属性があります。このvalue属性は、実際にフォームが送信された際にサーバーに送信される値になります。



繰り返し処理と変数展開を用いて多数のoptionタグ

<?php

for ($i = 1; $i < 4; $i++) {

echo "<option value='{$i}'>{$i}</option>";
                     //変数展開


**以下と同じ意味**
echo "<option value='1'>1</option>"; 
echo "<option value='2'>2</option>";
echo "<option value='3'>3</option>";

?> 



//出力: 
//<option value='1'>1</option>
//<option value='2'>2</option>
//<option value='3'>3</option>

//変数展開を用いる際はダブルクォーテーションで囲む。
//for ループの条件式では、各部分はセミコロン (;) で区切られる必要があります。


`"<option value='{$i}'>{$i}</option>"` の場合、シングルクォーテーションで囲まれた `'{$i}'` の部分は変数展開の形式ではなく、文字列としてそのまま扱われます。しかし、中括弧を含む `{$i}` は、ダブルクォーテーションで囲まれた文字列内では変数展開の構文です。この部分はダブルクォーテーションの影響を受けており、実際には変数 `$i` の値に置き換わります。

これにより、`$i` の値が1から3まで変化するたびに、`"<option value='{$i}'>{$i}</option>"` の部分は正しく展開され、数字が表示されます。

この記事が気に入ったらサポートをしてみませんか?