いろいろなフォームの入力欄

この研修では、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.phpaction属性で指定したファイル)に送信することができます。

<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.phpformタグの中に書き足してみましょう。

性別:
<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でやった時のように用語については記載するようにしてください。

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami