この研修では、htdocs/LetsEngineer/curriculum/2-12フォルダに課題を作成してください。
今回の研修では、いろいろなフォームの入力欄を作成したいと思います。
なお、どちらかと言えば、HTMLよりの話になります。
準備
フォームに入力した内容を取得すると同様、以下の2つのファイルを用意します。
index.phpresult.php
index.phpはフォームを表示する画面、result.phpは受け取った値を表示する画面です。
なお、同一のformタグの中に書き込んでいくので、下記ははじめに書いておきましょう。
（POST通信とします。）
<form action="result.php" method="post">
<!-- この中にinputタグを記述していきます。 -->
<input type="submit" value="送信" />
</form>
type=”text”
これはフォームに入力した内容を取得するでもやりましたね。
テキストボックスを作成します。
私の名前：<input type="text" name="my_name" />
type=”password”
こちらもフォームに入力した内容を取得するでやりました。
パスワードのような、入力値を隠したい場合に使用します。
<input type="password" name="password" />
type=”submit”
これを設置すると、「送信」ボタンができます。
なお、ボタンの中の文字を変更したい場合はvalue属性を変更します。
（今回は「送信するよ！」に変更しましょう。）
このボタンを押すことで、フォームに入力した値をresult.php（action属性で指定したファイル）に送信することができます。
<input type="submit" value="送信するよ！" />
上記までのinputタグを表示させると下図のようになります。
改行コードは適宜入れてください。
なお、result.phpはこのような感じですね。
<?php $my_name = $_POST['my_name']; $password = $_POST['password']; ?> <p>私の名前は<?php echo $my_name; ?>です。</p> <p>パスワードは<?php echo $password; ?>です。</p>
type=”radio”
1つだけ選択できるボタンを作成します。
よくあるのが性別の選択ですね。
input.phpのformタグの中に書き足してみましょう。
性別： <input type="radio" name="sex" value="男性">男性 <input type="radio" name="sex" value="女性">女性
inputタグにtype=radioとすると、選択するためのチェック欄ができます。
またnameは先ほどと同様、送信のときの名前です。
textなどと違うところは、すでにvalue属性で値（送信する内容）が決まっていることです。
つまり、男性を選択すれば「男性」という値が「sex」という箱に入って送信されます。
「女性」を選択した場合も同様ですね。
さて、受け取る場合ですが、これは同じです。
$sex = $_POST['sex'];
各自で実際に使って試してみましょう。
type=”hidden”
これは特殊なタイプです。
いわゆる「隠しフォーム」と呼ばれるもので、画面には表示させませんが、フォームで送信できます。
例えば、今まで作成したコードの中に下記を含めます。
<form action="result.php" method="post"> お名前：<input type="text" name="my_name" /><br> パスワード：<input type="password" name="password" /><br> 性別： <input type="radio" name="sex" value="男性">男性 <input type="radio" name="sex" value="女性">女性 <br> <input type="hidden" name="hidden_param" value="隠しパラメータから" /> <input type="submit" value="送信するよ！" /> </form>
hiddenの場合は、name属性の他にあらかじめvalueで値を設定しておきます。
これを表示させると、下図のようになり、特に入力フォームは増えていません。
とはいえ、result.phpで受け皿を用意しておくと、そこで受け取ることができます。
<?php $my_name = $_POST['my_name']; $password = $_POST['password']; $sex = $_POST['sex']; $hidden_param = $_POST['hidden_param']; ?> <p>私の名前は<?php echo $my_name; ?>です。</p> <p>パスワードは<?php echo $password; ?>です。</p> <p>性別は<?php echo $sex; ?>です。</p> <p>性別は<?php echo $hidden_param; ?>です。</p>
このhidden属性という隠しステータス、どういったときに使うのかピンとこないのではないかと思います。
次に出てくる属性と組み合わせて使われることがよくあります。
disabled
inputタグの中にこのdisabled属性を書き込むことで、「表示はされるが選択できない」フォームを作成することができます。
しかし困ったことに、このdisabledが書き込まれたフォームは「値を送信することができない」のです。
そこで、先程出てきたhidden属性を持ったフォームをもう一つ作成し、
disabled入りのフォームと同じ値を持たせて次のページに送るのです。
また、disabledと似たものにreadonlyというものがあります。
２つの属性についてはこちらに詳しく書かれているので、興味のある人は読んでみてください。
[https://blog1.mammb.com/entry/2020/01/05/090000]
selectタグ
inputタグではないのですが、似たようなタグでselectタグと呼ばれるものがあります。
使用例は下図です。
どこかで見たことがあると思います。
実装方法は下図のようにselectタグを使用します。
年齢： <select name="age"> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> </select>
まずはselectタグにname属性で名前をつけます。
そしてselectタグの中にoptionタグを用意します。
各optionタグにはそれぞれvalueを設定します。
要はそれが選択されたときに送信される値ですね。
受け取るときは、今までと同じです。
$age = $_POST['age'];
なお、このselectタグはPHPのループ文と一緒に使用することが多いです。
なぜかというと、例えば1〜50まで選択できるセレクトボックスを作成するとします。 <select name="number"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select>
これ、いちいち書くの面倒ですよね？
こういうとき、例えばforを使用して、
<select name="number">
<?php for ($i=1;$i<=10;$i++){ ?>
<option value="<?php echo $i; ?>">
<?php echo $i; ?>
</option>
<?php } ?>
</select>
というように書くこともできます。
追い追い、こういう書き方も練習しておきましょう。
ただ、下でやる課題は、この書き方で実践してください。
課題
以下のフォーム、および表示画面を作成してください。
- 景品応募フォームを想定し、名前、景品選択、個数の入力欄を用意します。
- 名前は
textで入力します。 - 景品は
radioで準備します。 - 個数は
selectタグとし、1から10まで選択可能としてください。 - 各
name属性はお任せします。
IT用語 SESに向けて準備しよう
3章では一つ一つの項目で数個のIT用語について調べていただきます。
どの用語もSESでよく耳にする言葉なのできちんと調べていきましょう！
下記の用語について、調べてみましょう。
※IT用語についてはチェックテストの範囲外です。
1. モジュール
2. バージョン管理システム
3. サブクエリ
用語の意味を調べて同じく2-12フォルダ内に記載してください。
Hello Worldでやった時のように用語については記載するようにしてください。
