トップページ > 3年生の講座 > htmlタグ7(フォーム)

htmlタグ7(フォーム)

準備

今まで作ってきた自己紹介ページにアンケートページを作ってみます。アンケートを実際動かす場合はCGIを使うので、組み込み方の説明は各CGI配布サイトの設置の説明に従ってください。ただ、アンケートページ自体は作らなければならないので作ってみたいと思います。その際に、フォームタグという新しいタグが出てくるのでここで解説したいと思います。

ではまず、自己紹介ページのindex.htmlがある同じ階層に「anc.html」という白紙htmlを入れておきましょう。

form:フォーム基本

フォームタグはこんな感じです。

<form action="CGIなどのパス" method="HTTPメソッド">フォーム要素</form>(フォーム)

まず全体を<form></form>タグでくくり、中身にフォーム要素を置いていきます。属性の所を見てください。

action:
actionは実際フォーム内容を投稿する時、どのプログラムに処理をしてもらうか、そのプログラムが置いてあるパスを指定します。
例:../cgi-bin/form.cgi

method:
methodというのはフォームデータの送信方法です。postとgetがあります。フォームデータのサーバーへの送信のやり方は2つあります。一つはフォーム内容をそのまま送る方法。もうひとつはURLの後に?を付けて、URLの形式で送信される方法です。検索エンジンとかでキーワードを検索したあとの結果ページのURLを見てください。よくわからない記号がズラーーって書いてありませんか?これがURL形式の送信です。

post→フォーム内の本文をそのまま送信。
get→URL形式で送信

今回使うのはpost形式です。get形式は、データ化された要求を送り、それにマッチしたページを表示するような仕組みでよく使われます(検索関連ですね)。

フォーム要素

<form></form>の間に記述するフォーム要素の種類は以下があります。以下で全てではないですがよく使います。

■text

<input type="text" name="text" size="20">
1行テキストを入力させるフォーム。名前やメールアドレスを入力させる事に使用

■password

<input type="password" name="pass" size="20">
パスワード入力用。打ち込むと*****で表示される

■checkbox
項目1 項目2 項目3
<input type="checkbox" name="cb" value="koumoku1" checked>項目1
<input type="checkbox" name="cb" value="koumoku2">項目2
<input type="checkbox" name="cb" value="koumoku3">項目3
複数選択できるチェックボックス。checkedは初期選択。

■radio
項目1 項目2 項目3
<input type="radio" name="rb" value="koumoku1" checked>項目1
<input type="radio" name="rb" value="koumoku2">項目2
<input type="radio" name="rb" value="koumoku3">項目3
一つのみ選択できるラジオボタン。checkedは初期選択。

■submit

<input type="submit" value="送信">
送信ボタン

■reset

<input type="reset" value="リセット">
フォーム内容を全消し(リセット)

■button

<input type="button" value="ボタン">
汎用のボタン

■image

<input type="image" name="sub_img" src="img/submit.jpg" alt="送信">
画像を使った送信用ボタン。altは必須

■file

<input type="file" name="file_up">
ファイルをアップロードするためのボタン

■hidden

<input type="hidden" name="hid1" value="h1">
表示されないが、サーバーに送信する要素


<textarea name="text" rows="4" cols="40">
テキストエリア
</textarea>
複数行のテキストエリア


■select

<select name="menu">
<option>セレクトメニュー1</option>
<option>セレクトメニュー2</option>
<option selected>セレクトメニュー3</option>
<option>セレクトメニュー4</option>
<option>セレクトメニュー5</option>
</select>
セレクト形式のメニュー

かなり沢山のタグが出てきましたね。混乱しないようにしてください(^^;属性の説明をします。

type:
まずtypeという属性があります。これはinput要素の形式を指定します。text・password・checkboxなどがそれにあたります。

name:
nameという属性がありますね。nameはフォームデータが送信される時、中身と一緒に送られて来ます。チェックボックスとラジオボタンはnameに同じ名前を付けます。

value:
そしてvalueというのがあります。typeがtextの場合は初期値になります。つまり最初から入力されてるテキストの文章という事ですね。checkboxやradioの場合はサーバーにvalueの値が送られてきます。

アンケートページを作成

ではソースを書いてみました。

<html>
<head>
<title>アンケート</title>
</head>
<body>
<font color="#FF6600" size="5"><strong>★よかったらアンケートに答えてね★</strong></font><br>
<br>
<form name="form" method="post" action="javascript:void(0)">
<font size="2">■お名前</font><br>
<input type="text" name="namae">
<br>
<br>
<font size="2">■メールアドレス</font><br>
<input type="text" name="mail">
<br>
<br>
<font size="2">■このページの感想</font><br>
<input name="kansou" type="radio" value="fun">
<font size="2">楽しい</font>
<input name="kansou" type="radio" value="funfun">
<font size="2">超楽しい</font>
<input name="kansou" type="radio" value="not">
<font size="2">・・・</font><br>
<br>
<font size="2">■どこに沢山潜りに行きますか(複数選択可)</font><br>
<input type="checkbox" name="where" value="izu">
<font size="2">伊豆</font>
<input type="checkbox" name="where" value="okinawa">
<font size="2">沖縄</font>
<input type="checkbox" name="where" value="kaigai">
<font size="2">海外</font>
<input type="checkbox" name="where" value="himitsu">
<font size="2">教えてあげない</font><br>
<br>
<font size="2">■何か一言!</font><br>
<textarea name="hitokoto" cols="50" rows="5"></textarea>
<br>
<br>
<input type="submit" name="soushin" value="送信">
</form>
<br>
<a href="index.html">ホームに戻る</a>
</body>
</html>

サンプルページ

<form></form>のactionのところにはjavascript:void(0)が使ってあります。まだこのままでは全く動かないという事ですね。アンケートフォーム用のCGIを設置したら、actionにCGIのパスを書いて初めて動作するようになります。

ついに完成しましたね!!

そう、これでホームページが完成しました!デザインはあまり良くないけどとりあえず出来たのです!おめでとうございます!

完成ページをトップから見る

ホームページでデザインまでこだわりたい人は、完全にhtmlをマスターする事と、CSSというスタイルシートも知っておく必要があります。このeasyhomepageでは現段階で取り扱っていないので、解説はまだないのですが、いずれ追加できたら追加したいと思います。今作ったホームページのリニューアルしよう!ってな感じでね。

さあ、3年生はこれで終わりです。ホームページは完成して、もう終わりなんじゃないの?と思っている方はいませんか?ここからがスタートなんですよ!ページが完成したらあとはどうやって人を呼ぶかです。そのままほっといても誰も見に来てくれません。

4年生では、訪問客を呼ぶ方法や、人を呼ぶためのちょっとしたテクニックなどを中心に、あなたのホームページに人を集める方法をお教えしたいと思います。

次の講座⇒
▲ページ上部にスクロール