ここではいよいよデータ入力とサーバーへの送信に関するHTMLタグについて説明していきます。ここからはサーバー側Javaとの絡みも出てきます（サーバー側でどう受けるか）。
サーバーへの送信データ入力域、テキストボックス・ラジオボタン・チェックボックス等はフォーム内に定義します。フォームはHTML中で <form> タグ〜 </form> タグで囲った部分になります。この１フォーム内で定義したデータが、一回の送信でまとめてサーバーに送られます。
書き方は <form method="送信方法" action="送信先のURL"> です。
送信方法は method="get" または method="post" のどちらかを指定します。 action= パラメータの指定方法は、リンクの指定方法と同じです。特定のページあるいは特定ページ内の特定の場所を指定できます。
送信方法の違いですが method="get" のときは、クライアントからサーバーに送るデータ中の、次に表示するURLに含まれます。どこかのデータ入力を含むページを見ているとき、ブラウザのアドレスバーに 表示しているURL?data1=AABBCC&data2=112233 などと表示されているのを見たことがあるかと思います。この ? 以降がサーバーに送信したパラメータで、この例の場合 data1 と data2 がパラメータ名、 AABBCC と 112233 がそれぞれのパラメータ値になります。パラメータが複数あるときは２個目以降のものは & で連結されます。
このように get で送信した場合は送っているデータが見えてしまう、という欠点があります。ただし逆にこれを利用して、リンク設定で同時にパラメータを送ることも出来ます（後述）。
対して method="post" を使った場合は、クライアントからサーバーに送るデータ中のボディ部という部分にパラメータが書かれます。この場合はネットワークアナライザとかパケットモニタとか、何らかのツールを使わない限り通常は送信データは見えません。送信データを見せたくない場合はこちらを使うほうがよいでしょう。
さて両者の別の違いですが、サーバー側でパラメータを受けるときの方法も変わります。 JSPの場合はどちらも同じ方法で受け取れますが、サーブレットの場合は get のときは doGet 、 post のときは doPost と、使う命令（機能）が異なります。
入力フィールドは全てフォーム内に、 <input> タグで指定していきます。これの type= パラメータで、その入力フィールドがどの形式かを指定します。
入力フィールドにはテキストボックス・テキストボックス（パスワード用）・テキストボックス（隠しフィールド）・ラジオボタン・チェックボックス・送信などのボタン、などがあります。今あげたものについては、ここで説明していきます。
テキストボックス型のものには隠しフィールド、パスワード用も含まれます。これらの違いは type= パラメータの指定によります。
書き方は <input type="タイプ" name="パラメータ名" size="入力域の大きさ" maxlength="入力可能な最大長" value="初期表示する値" /> になります。
type= パラメータは、通常のテキストボックスは type="text" と指定します。
パスワード等の入力用テキストボックスは type="password" と指定します。こうするとテキストボックスに入力すると入力した値の代わりに * が表示されます。これをつかうときはさらに念のため、フォームの方でも method="post" にしたほうがいいかもしれません。
非表示のテキストボックスは type="hidden" とします。 value= パラメータとあわせて、サーバーからの情報をクライアント側に保持しておき、サーバーとの一連のやりとりに継続性を持たせる場合などに使用します。隠しフィールドはhiddenフィールドとも呼びます。
name= パラメータでサーバーに送信するパラメータの名前を指定します。
size= パラメータは画面上表示される入力域の大きさを文字数で指定します。ただしここで指定した文字数より長いデータも入力可能です。入力するデータ長に制限を加える場合は、次の maxlength= パラメータを使用します。
maxlength= パラメータは入力可能なデータの最大長を文字数で指定します。この指定より長いデータは入力出来なくなります。
value= パラメータはデフォルト値など初期表示する値を指定します。サーバー処理で結果のHTMLを生成して返すとき、クライアントで入力した値をそのまま入力域に表示させておく場合には、この value= パラメータを設定してやる必要があります。
入力１: <input type="text" name="Text1" size="10" maxlength="5" /> <br />入力２: <input type="text" name="text2" value="デフォルト値２" /> <br />パスワード: <input type="password" name="PWD1" size="5" maxlength="5" /> <br />隠しフィールド: <input type="hidden" name="HDN1" value="隠しフィールド" />
テキストボックスは１行の文字列入力でした。例えば掲示板やブログのように複数行の入力を行いたい場合、テキストエリアを使います。
書き方は <textarea name="パラメータ名" rows="入力域の行数" cols="入力域の幅（桁数）/>初期表示する内容</textarea> です。
rows= パラメータは画面上表示される入力域の、縦方向の大きさを行数で指定します。
cols= パラメータは画面上表示される入力域の、横方向の大きさを文字数で指定します。
<textarea> と </textarea> で囲った間に文字を書いておくと、それは初期入力状態の値となります。
単なる初期表示される内容でなく、初期入力状態として表示されます。そのため使用者がこれを消したり書き換えたりしないでそのまま送信すると、ここで指定した内容がそのままサーバーに送られます。
従ってサーバー側ではこれのnameで指定したパラメータ内容をチェックして、使用者が何か入力をしたのか、あるいは初期状態のままで実質未入力なのかをチェックしたほうがよいでしょう。
複数行入力領域: <br /> <textarea name="TextArea1" rows="5" cols="20"> 初期表示の内容 </textarea>
チェックボックスと似てますが、複数の中から単一選択がラジオボタンです。
書き方は <input type="radio" name="パラメータ名" value="選択値" checked /> になります。
１フォーム内に同じ name= 値を持つものを複数定義しておくと、その中で一つだけ選択可能になります。選択されたものに対するパラメータ値が value= で指定した値になります。
checked はデフォルトで選択済みにしておきたいものに対して指定しておいてください。あるいはテキストボックスと同様、サーバーで処理した結果のHTMLを返すとき、クライアントで選択された状態をそのまま表示させたいときにも、選択されてきたものに対してこれを指定しておく必要がありあます。
<input type="radio" name="Radio1" value="Sel11" /> ラジオ１ 選択１<br /> <input type="radio" name="Radio1" value="Sel12" /> ラジオ１ 選択２<br /> <input type="radio" name="Radio1" value="Sel13" /> ラジオ１ 選択３ <hr /> <input type="radio" name="Radio2" value="Sel21" /> ラジオ２ 選択１<br /> <input type="radio" name="Radio2" value="Sel22" /> ラジオ２ 選択２<br /> <input type="radio" name="Radio2" value="Sel23" checked /> ラジオ２ 選択３
チェックボックスは、複数選択が可能です。
書き方は <input type="checkbox" name="パラメータ名" value="選択値" checked /> になります。
１フォーム内に同じ name= 値を持つものを複数定義しておくと、そのパラメータ名に対して複数の値選択が可能、ということになります。選択されたものに対するパラメータ値が value= で指定した値になります。
checked はデフォルトで選択済みにしておきたいものに対して指定しておいてください。あるいはラジオボタンと同様、サーバーで処理した結果のHTMLを返すとき、クライアントで選択された状態をそのまま表示させたいときにも、選択されてきたものに対してこれを指定しておく必要がありあます。
<input type="checkbox" name="Check1" value="Sel11" /> チェック１ 選択１<br /> <input type="checkbox" name="Check1" value="Sel12" /> チェック１ 選択２<br /> <input type="checkbox" name="Check1" value="Sel13" /> チェック１ 選択３ <hr /> <input type="checkbox" name="Check2" value="Sel21" checked /> チェック２ 選択１<br /> <input type="checkbox" name="Check2" value="Sel22" /> チェック２ 選択２<br /> <input type="checkbox" name="Check2" value="Sel23" checked /> チェック２ 選択３
書き方は <select name="パラメータ名"> タグと </select> タグで囲んだ中に、<option value="選択値">表示内容</option>でボックスに表示する一覧内容を指定します。
<option> タグの value= パラメータですが、これを指定しておくと選択した行に対して送信されるデータはこの値になります。
value= パラメータを指定しないときは、ボックスに表示される表示内容がそのまま送信されます。
<option> タグに selectedを指定しておくと、その行がデフォルトの選択済みになります。
<select name="cmbbox1"> <option value="Sel11">１行目</option> <option value="Sel12">２行目</option> <option value="Sel13">３行目</option> </select> <hr /> <select name="cmbbox2"> <option value="Sel21">１行目</option> <option value="Sel22" selected>２行目</option> <option value="Sel23">３行目</option> </select> <hr /> <select name="cmbbox3"> <option>１行目</option> <option>２行目</option> <option selected>３行目</option> </select>
書き方は <select name="パラメータ名" size="行数"> タグと </select> タグで囲んだ中に、<option value="選択値">表示内容</option>でボックスに表示する一覧内容を指定します。
size= パラメータでリストボックスの大きさ（画面に表示する行数）を指定します。これの有無でコンボボックスになるか、リストボックスになるかが変わってきます。
また<select> タグに multipleを指定すると、複数行項目の選択が可能になります。
※ multipleを指定したとき、 name= で指定したパラメータ名に対する値が複数になりえます。サーバー側で複数の値を全て受け取るときは getParameter("パラメータ名"); ではなく、 getParameterValues("パラメータ名"); を使う必要があります。
<select name="lstbox1" size="3"> <option value="Sel11">１行目</option> <option value="Sel12">２行目</option> <option value="Sel13">３行目</option> </select> <hr /> <select name="lstbox2" size="3"> <option value="Sel21">１行目</option> <option value="Sel22" selected>２行目</option> <option value="Sel23">３行目</option> </select> <hr /> <select name="lstbox3" size="3" multiple> <option>１行目</option> <option>２行目</option> <option selected>３行目</option> </select>
フォームに入力したデータをサーバーに送信するためのボタンです。
書き方は <input type="submit" name="ボタン名" value="ボタン表示文字" /> になります。
name= パラメータは必須ではありません。これを指定しておくと、押されたボタン名もサーバーに送信されます。１フォーム上に複数のボタンを用意したいときなど、使いようによっては指定しておいたほうがいいでしょう。
value= パラメータはボタン上に表示される文字列の指定です。
具体的に書くと name= で指定した名前がパラメータ名、 value= で指定したボタン上の表示内容がパラメータ値としてサーバーに送信されます。
Javaの場合は HttpServletRequest.getParameter("パラメータ名（ボタン名）") で、 value= で指定した内容が取得できます。ただし実際にはパラメータ値よりも、画面に複数のボタンがあるときにどれが押されたのかを判定する方が大事でしょう。押されていないボタンについては HttpServletRequest.getParameter("パラメータ名（ボタン名）") の戻り値はnullです。ですからgetParameterの戻り値がnull以外のボタンがあれば、それが押されたボタンというわけです。
<input type="submit" name="SUB1" /> <br /> <input type="submit" name="SUB2" value="送信" />
フォームの最初にも触れましたが、フォーム定義で method="get" を指定しているときは、送信先URLに送信データを付加してサーバーに送信されます。これを利用して、リンク設定で同時にパラメータを送ることが出来ます。
URL部分の後ろに ?パラメータ名=パラメータ値&パラメータ名=パラメータ値 と送信データが付加されるので、リンク設定の <a> タグで
<a href="飛び先のURL"?パラメータ名=パラメータ値>表示文字</a> としておくと、リンクで移ると同時にデータも送信できます。
送りたいパラメータが複数あるのなら最初のパラメータである ?パラメータ名=パラメータ値 の後ろに &パラメータ名=パラメータ値 を必要な分だけ追加してください。
※ このときに同じパラメータ名を複数指定すると、リストボックスで multiple を指定したときと同じようになります。例えばパラメータ名をPARMとして、 <a href="飛び先のURL"?PARM=パラメータ値１&PARM=パラメータ値２>表示文字</a> としてあげると、パラメータ名PARMに対して"パラメータ値１"と"パラメータ値２"の２つの値を持つことになります。この場合サーバー側で複数の値を全て受け取るときは getParameter("PARM"); ではなく、 getParameterValues("PARM"); を使う必要があります。
Copyright © 2002-2009 yok. All Rights Reserved.