この研修では、htdocs/LetsEngineer/curriculum/2-12
フォルダに課題を作成してください。
今回の研修では、いろいろなフォームの入力欄を作成したいと思います。
なお、どちらかと言えば、HTMLよりの話になります。
準備
フォームに入力した内容を取得すると同様、以下の2つのファイルを用意します。
index.php
result.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
というものがあります。
2つの属性についてはこちらに詳しく書かれているので、興味のある人は読んでみてください。
[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でやった時のように用語については記載するようにしてください。