テキスト以外のGUIを使う


さて、フォーム送信の基本はわかりましたので、<input type="text">以外のインターフェイスについても使ってみましょう。HTMLのフォームには、テキストの入力フィールドの他にチェックボックスやラジオボタン、選択リストなどが用意されています。これらについても利用してみましょう。まず、送信フォームのHTMLを作成しておきます。

<form method="post" action="index.jsp">
  <input type="checkbox" name="ck1" value="Check1">チェック<br>
  <input type="radio" name="rd1" value="1">ラジオ1
  <input type="radio" name="rd1" value="2">ラジオ2<br>
  <select name="sel1">
    <option value="A">A
    <option value="B">B
    <option value="C">C
  </select><br><br>
  <input type="submit">
</form>


こんな感じでよいでしょう。チェックボックス、2項目のラジオボタン、そして3項目の選択リストを持つフォームです。それぞれにnameで名前を設定しておくのは基本通りですね。その他にもう1つ、「すべてにvalue属性が設定されている」という点にも注目してください。

こうした「テキストを入力する以外のインターフェイス」の場合、選択状態などを示す値としてvalue属性が用いられます。ラジオボタンや選択リストならば、選択された項目に設定されているvalueが送信されますし、チェックボックスの場合はチェックがONだとそのvalueが送られます。

また、チェックボックスがOFFだったり、ラジオボタンや選択リストが無選択状態だった場合には、送信される値はnullとなります。したがって、値がnullかどうかをチェックすれば、選択されているかどうか確認できるわけです。

では、作成したフォームを受け取り、その選択状態に応じてテキストを表示する簡単なサンプルを作成してみましょう。

<%
  if (request.getParameter("ck1") != null){
    out.println(request.getParameter("ck1") +
      "がチェックされています。<br>");
  }
  if (request.getParameter("rd1") != null){
    out.println(request.getParameter("rd1") +
      "番のラジオボタンが選択されています。<br>");
  }
  if (request.getParameter("sel1") != null){
    out.println(request.getParameter("sel1") +
      "の項目が選択されています。<br>);
  }
  out.println("<hr><br>");
%>


チェックボックス、ラジオボタン、選択リストのそれぞれの選択状態を調べ表示する。

JSPタグの部分だけ掲載しておきます。やっていることはそう難しくはありませんね。request.getParameterで取得した値がnullかどうかチェックし、項目が選択されていた場合にはその選択状態をout.printlnで表示しています。今回は特に日本語のテキストなどは送信していませんのでrequest.setCharacterEncodingは省略してあります。

これで、基本的なGUIの送信はできるようになりました。Webサイトの処理というのは、「送信→返信」の繰り返しです。まずは、実際にさまざまなフォームからの送信を行ってみて、確実にこれらの処理ができるようになりましょう。


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。