お問い合わせフォーム
フォームの構築
フォーム(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を混在
PHPの開始と終了: PHPコードを埋め込むには、<?phpと?>を使用します。PHPのコードとHTMLのコードを混在させる場合、PHPの終了タグ(?>)を明示的に書かずにHTMLを直接続けることができます。ただし、PHPのコードが完全に終了してからHTMLが始まるようにする必要があります。これにより、PHPコードとHTMLコードの区別がはっきりとしていて、PHPのブロックが自然に終わることができます。
<?php
// PHPコード
?>
<!-- HTMLコード -->
<?php
// 更なるPHPコード
?>
シングルクォーテーションとダブルクォーテーション:
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>"` の部分は正しく展開され、数字が表示されます。
この記事が気に入ったらサポートをしてみませんか?