３．フォームの利用
・「フォーム」というのはテキストボックスやチェックボックスなどの入力や選択の出来るアイテムのことです。
ボタンなんかもフォームに入りますね。
でもこのフォーム、もちろんＨＴＭＬで設置するのですがチェックしてどうする？
当然、何らかのアクションが必要になりますね。
| コード | 実際の表示 | |
| ラジオ ボタン |
<form> <input type="radio" name="group" value="1" checked> Radio_Button Ｎｏ．１<br> <input type="radio" name="group" value="2"> Radio_Button Ｎｏ．２<br> <input type="radio" name="group" value="3"> Radio_Button Ｎｏ．３ </form> |
|
| 「ラジオボタン」というのは複数の選択肢より一つを選ぶようなフォームです。 name=で指定されているのが「グループ」。これが同じラジオボタン同士は 同時に選択することが出来ません。 value=に示される値は選択された時に送られる値です。 |
||
| コード | 実際の表示 | |
| チェック ボックス |
<form> <input type="checkbox" name="check_box01" value="1" checked>check_box01<br> <input type="checkbox" name="check_box02" value="2"> check_box02<br> <input type="checkbox" name="check_box03" value="3"> check_box03 </form> |
|
| 「チェックボックス」はON/OFFで選択出来るフォームです。 グループ化等はありません。 name=はチェックボックスの名前。データを送信する時などのキーワードに なります。value=に示される値はチェックされている特に送信される値です。 |
||
| コード | 実際の表示 | |
| コンボ ボックス |
<form> <select name="combo_box"> <option value="1" selected>Ｎｏ．１</option> <option value="2">Ｎｏ．２</option> <option value="3">Ｎｏ．３</option> </select> </form> |
|
| この形のモノは通常「ドロップダウンリスト」と呼ばれます。 右に三角があってクリックすると「すぱっ！」っと選択肢が出てくるヤツですね。 コレにリストにない項目を入力出来るようになると「コンボボックス」となります。 リストに現れる項目は<option>タグの後ろに書かれている文字。 選択の結果、得られる値はvalue=で示されている文字。 初期状態で選択されている項目は<option>タグにselectedを記述します。 |
||
| コード | 実際の表示 | |
| リスト ボックス |
<form> <select size="3" name="list_box" multiple> <option value="1" selected>Ｎｏ．１</option> <option value="2">Ｎｏ．２</option> <option value="3">Ｎｏ．３</option> <option value="4">Ｎｏ．４</option> </select> </form> |
|
| 「リストボックス」と呼ばれるモノは横にスライドバーがあり上下にスライドさせることで複数の項目から一つ、もしくは複数の項目を選択することが出来ます。 作りは上記のコンボボックスとほとんど同じですね。 |
||
| コード | 実際の表示 | |
| テキスト ボックス |
<form> <input size="20" type="text" name="txt_sample1" value="ここに文字を入れます"> </form> |
|
| テキストボックスは、文字を入力することが出来ます。 ただそれだけといえばそれだけの機能しかありません。 でも、以外と重宝するのがこんなヤツだったりするんですよね。（＾＾； |
||
さて、色々な入力フォームをご紹介しましたが、当然の疑問がありますね。
「それはいいけど、どうやって利用するの？」という話です。
はい、その通りです。
フォームに入力された文字や選択枝を利用するにはそれを送り出してやり、更に受け取るフォームが必要ですね。
それではどのようにしたらいいのでしょうか？入力フォームやボタンの状態を渡すのはHTMLでも可能です。
しかし計算などの処理はJavaScriptでの操作が必要になります！
更に高機能な物になっていくと、ASPやADOなどの機能が必要となり、通常のホームページでは実現出来なくなります。
まずはお遊びです！したのテキストボックスに名前を入れて［次のページへ］ボタンを押して下さい！
トップページへ
混迷のＨＴＭＬの世界へ
１．ＨＴＭＬの基礎
２．テーブルの組み方
３．フォームの利用
４．JavaScript