« »

Formタグ(HTMLタグ)について

Webサイト情報トピックス


HTMLタグのFormタグについて簡単に説明します。

ここでは、ソート(並び替え)で使う分のFormタグの簡単な知識を説明します。

HTMLクイックリファレンスのFormタグの項目と併せて見て行くと分かりやすいと思います。

HTMLタグの中でも、Formタグは、選択されたデータをCGIやphpなどのプログラムに渡すのが前提という使い方をするタグですので、プログラムを使うのに慣れていない人には、あまり馴染みのないタグです。

 

今回は、ドロップダウンメニュー(プルダウンメニュー)を作るので、FormタグとSelectタグを組み合わせたものについて説明していきます。少しややこしいですが、頑張っていきましょう。

FormタグとSelectタグの基礎

<Form>は、プログラムとデータのやり取りをする時に使うタグで、このタグ単体では、使いません。
<FORM>~</FORM>の間に、<Input>、<Select>、<Textarea>などのデータ入力用のタグを入れることで、 一行テキストボックス・ボタン・チェックボックス・ラジオボタン・セレクトボックス・スクロールテキストボックス等を作ることが出来ます。

今回は、ドロップダウンメニュー(プルダウンメニュー)を作るので、<Form>と<Select>を組み合わせたタグとなります。

次の例を参考に説明をしていきます。

<form name="irekae" method="get" id="sort_form" class="sort_form">
        <select name='narabi' onChange="document.forms['irekae'].submit()" >
           <option value="sort1" selected="selected" >投稿日時が新しい順</option>
            <option value="sort2" >投稿日時が古い順</option>
            <option value="sort3" >五十音順(あ~わ)</option>
            <option value="sort4" >五十音順(わ~あ)</option>
            <option value="sort5" >アクセス数の多い順</option>
            <option value="sort6" >アクセス数の少ない順</option>
        </select>
</form>

これがドロップダウンメニューの基本的なタグです。これを設置すると次のようになります。

 Formタグにつけた各属性について説明していきます。

name=”名前”

フォームの名前です。プログラムなどが、フォームになんらかの
動作をさせたい時とかに名前を使ってフォームを特定して指示を
与えますのでつけるのを推奨されます。

method=”HTTPメソッド”

フォームからデータを送信するの際の転送方法(HTTPメソッド)を
指定する項目です。
主に、「get」、「post」という2通りの設定があります。

「get」に設定すると、スーパーグローバル変数 $_GET にデータが格納されます。
URLでデータ保持してサーバーとやりとりするので、ページが切り替わってもデータが
保持されます。そのかわりURLを使うので長いデータのやり取りに向きません。

「post」に設定すると、スーパーグローバル変数 $_POST にデータが格納されます。
こちらは、長いデータのやりとりは得意ですが、違うページに移動するとデータは、保持
されません。

今回Formタグでデータのやりとりをする時は、ソート(並び替え)を行ないますので、ページが頻繁
に切り替わるため、「get」のメゾッドが向いていますのでそちらを選択しています。

続いてSelectタグについて説明します。<Select>は<Option>と一緒に使います。
Selectタグはセレクトボックスを、Optionタグはその選択肢を指定するのに、それぞれ使われます。

Selectタグにつけた各属性について説明していきます。

name=”値”

セレクトボックスの名前です。プログラムなどが、セレクトボックスになんらかの動作を
させたい時とかに名前を使って特定して指示を与えますのでつけるのを推奨されます。

onChange=”コマンド”

セレクトボックスを操作して選択肢を操作して現在と違う値に変更したときに自動的に
行なう動作を設定したい時に使うオプションです。今回は選択するリストを選んだ瞬間に
記事をソート(並び替え)をしたかったので、
ここで自動的にFormのsubmitボタンを押すのと同じコマンドを行なうように、
onChange=”document.forms[‘irekae’].submit()”と設定するようにしています。
document.forms[‘irekae’]は、submitボタンを押したい
フォームの名前を指定しています。
なお、このコマンドは、簡単なJavaScriptです。

ちなみに submitボタンとは、よく入力フォームなどで見かける下のようなボタンです。
送信ボタンや検索ボタンなど入力した項目を送るのに使うものです。   submitボタンを使いたくない場合は、onChangeでこのようにコマンドを使用します。

続いてOptionタグにつけた各属性について説明していきます。

value=”値”

選択したリストに設定してある値を決める項目です。数値でも文字列でもかまいません。
ここの値がFormタグのmethodで指定された方法で変数などにデータで送られます。

selected=”初期選択項目”

ドロップダウンリストで初期に選択されている項目にしたいモノにつけます。
記入する時は、XHTMLに対応させるため、selected=”selected”というように記入します。

以上で簡単ですがFormタグについての説明は終了です。それでは、ソート(並び替え)の記事で
実際にソート(並び替え)を作ってみてください。

« »

この記事へのコメント

【コメントの投稿の仕方について】

   このサイトでは、「Disqus」と呼ばれるコメント機能を使っています。
  ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
  自分の各プロフィールでコメントすることが出来ます。
  なんのアカウントもない人もメールアドレスさえ入力すればコメントできます。
  (入力したメアドはコメント投稿には表示されません。)
  また、コメント欄には画像を張ることも出来ます。


ひと言コメントや、記事の質問や感想など お気軽にお書きください。
  なにか書いていただけると管理人が嬉しがります。