応用講座　第４回　フォームの基本

ショッピングサイトにおける会員登録や、アンケート等、WEBサイト上で個人情報や回答等を入力し、送信ボタンを押した経験のある方は、沢山おられるかと思います。

これらの入力フォーム自体は、htmlの一部ですが、データの表示や入力値のチェック処理は、javascriptが使われる事が多く、フォームの種類や記述方法について、ここでは解説致します。

フォームは＜form＞＜/form＞タグの中に記述し、
＜input name=‘‘任意の名前’’ type=‘‘フォームの型’’＞
を指定します。

フォームの型には、色々なものがありますの、その用途と合わせて具体的な記述方法を解説します。

①テキスト

名前や郵便番号、電話番号、住所等、様々な用途のテキストの入力に利用されます。

例えば、電話番号の入力の場合、
＜input name=‘‘tel’’ type=‘‘text’’＞と記述すると、telというフォームの中に、利用者の入力した電話番号がセットされます。

②ラジオボタン

複数の値から、選択する場合に利用されます。
例えば、質問に対する、YES又はNOを選択するような場合で、初期値をNOとするときは

＜input type=”radio” name=”question1″ value=”yes”＞YES
＜input type=”radio” name=”question1″ value=”no” checked＞NO

と表記します。

③セレクトボックス

複数の値から選択する際に、値をプルダウン形式で選択します。
先ほどのラジオボタンと例を、プルダウンで表記すると
＜select name=”question1″＞
＜option value=”yes”＞YES＜/option＞
＜option value=”no” selected＞ NO＜/option ＞
＜/select＞
となります。

④チェックボックス

個人情報提供の確認等をチェックする際のフォームです。

初期値がブランクの場合は
＜input type=”checkbox” name=”test” value=”doui” ＞同意する

初期値がチェック済みの場合は
＜input type=”checkbox” name=”test” value=”doui” checked＞同意する

と表記します。

⑤送信ボタン、リセットボタン

フォームを入力後に、送信するボタンは
” ＜input type=”submit” value=”送信する”＞ “

フォームの入力内容をリセットする場合は
” ＜input type=”reset” value=”リセット”＞ “

等の、ボタンを設置します。

これらのフォームは、フォームタグにおいて以下のように記述し、送信ボタン(submit)押下後の動作を定義します。

＜form method=”post” action=”フォーム送信先”＞

次回から、本格的なプログラミング記述に入ります。