フォームについて

４つの基本形

１．テキストボクススを作る

概要

[form]要素と、[input]要素とその属性[name]属性、値[sample1]、[type]属性、値[text]、[size]属性、値[数値]、[value]属性、[値：文字列]の４っつを使います。
([input]要素を使った場合は１行のボックスを作ります。なお、は終了形は不必要です。)

「例１」のソースです。（点線内をコピーして、ご使用ください。）
----------------------------
<html>
<head>
<title></title>
</head>
<body>
<form>
<input name="sample1" type="text" size="35" value="">
</form>
</body>
</html>
----------------------------

テキストボクススの表示（value属性の「文字列」記入は空欄）

例１【表示】

（ボックス内をクリックすると、左端にカーソルが点滅して入力可能になります。）
----------------------------------------------------------------------------
普通ボックスは上記のように、幅だけ[size]属性で替える簡単なものが多いのですが、[style]属性を使用して賑やかにし、また、value属性に「文字列」を記入しました。
その「例１－２」のソースです、

<html>
<head>
<title></title>
</head>
<body>
<form>

<input name="sample2" type="text" style="
                                         color: yellow; 
                                         font-size: 18pt; 
                                         width: 240px; 
                                         height: 40px; 
                                         background-color: red; 
                                         border-color: #00ff00; 
                                         padding-top: 5px;" 
value="１行だけのボックスです。">
</form>
</body>
</html>

スタイルシートで加工したテキストボクススの表示（value属性に「文字列」記入）

例1-2【表示】

２．テキストエリアを作る

概要

[textarea]要素を使います。（複数行の記入ができます。）
[rows]属性で高さを、[cols]属性で幅を指定します。（属性値には半角数字使用）

「例２」のソースです。（点線内をコピーして、ご使用ください。）
----------------------------
<html>
<head>
<title></title>
</head>
<body>
<textarea rows="5" cols="35">ここに何行でも入力できます。</textarea>
</body>
</html>
----------------------------

例2【表示】

（既に文字列を入力してありますが、削除や追加記入ができます。）

また、例によってスタイルシ－トで加工しました。今回は[textarea]の属性の[rows]と[cols]を使用していません。

例2-2【表示】

形はできましたが、果たしてBBS（電子掲示板）が機能するか、どうかは分かりません。

左図はマイクロソッフトのヘルプ利用の「アンケート」です。「テキストエリア」がこのように利用されています。☆型は一種の「チェックボックス」です。

フォームを知らなくても、BBS提供者には沢山のサンプルが用意されています。ただし、CGIの設定が必要です。私のページには掲示板はありません。フォームはBBSあっての機能なのですが、勉強のため書いているのです。

注記）BBS（Bulletin Board System）の仕組み：Webサーバが、IE等Webブラウザからの要求に応じて、プログラムを起動するための仕組み。 CGI（Common Gateway Interface）を使うことによって、プログラムの処理結果に基づいて動的に文書を生成し、送出することができるようになった。[Perl]などがよく使われる傾向にある。

３．チェックボックスを作る

概要

[input]要素をつかいます。[type]属性の値を[checkbox]に指定すると、チェックボックスを作ることができます。 [label]要素で夫々の項目を表示する名前を指定します。

「例３」のソースです。（点線内をコピーして、ご使用ください。）
----------------------------
<html>
<head>
<title></title>
</head>
<body>
<p>好きなおかずは？</p>
<form>
<input type="checkbox"><label>サカナ</label>
<input type="checkbox"><label>肉</label>
<input type="checkbox"><label>野菜</label>
</form>
</body>
</html>
----------------------------

例3【表示】

好きなおかずは？

４．ラジオボタンを作る

概要

[input]要素を使います。[name]属性の値（識別子）を同一にします。（すると、排他的になり、1つしか選択されません。）[type]属性の値を[radio]に指定すると、ラジオボタンができます。複数個作り、前回同様[label]要素で名前を付けます。

「例２」のソースです。（点線内をコピーして、ご使用ください。）
----------------------------
<html>
<head>
<title></title>
</head>
<body>
<p>電子投票です。あなたの推薦する立候補者は？（ボタンを押してください。）</p>
<form>
<input name="abc" type="radio"><label>Ａ候補者</label>
<input name="abc" type="radio"><label>Ｂ候補者</label>
<input name="abc" type="radio"><label>Ｃ候補者</label>
<input name="abc" type="radio"><label>Ｄ候補者</label>
<input name="abc" type="radio"><label>Ｅ候補者</label>
</form>
</body>
</html>
----------------------------

例4【表示】

電子投票です。あなたの推薦する立候補者は？（ボタンを押してください。）

トップへ戻るスタイルシート目次へ戻る
 箇条書きへ戻る DTDを読んでみましょうへ進む