HTMLとform 大阪演劇情報センター + 未知座小劇場

わたしの関心事は今のところ、PHPとPostgreSQLを使ってブラウザ上からRDBMS(リレーショナルデーターベースマネージメントシステム)にどうアクセスするか、ということにまつわる一切です。webアプリケーションの作成でしょうか。この意味でHTMLといっても、これらに絡むことにまずは限定されます。そこでFORMタグということです。本屋のパソコン書籍コーナーで立ち読みすれば、事足りるほどのことかと思いますが、まずはメモまで。

フォームはHTMLタグで、ブラウザからWebサーバへデータを送る手段を提供します。この意味で書き込み可能なセクションをフォームといえます。またフォーム作成の作業は、あるいはそのタグは、フォームの作成とフォームをブラウザ表示させるための作業、あるいはそのタグになると思います。

<form>から</form>までがその単位です。なお、<form>から</form>のなかに<form>から</form>を入れることは、入れ子はできません。具体的には、

入力エリア　一行　複数行
ラジオボタン(単一選択)
チェックボックス(複数選択ボタン)
隠しフィールド(プルダウンメニュー)
プルダウンメニュー
リストボックス
リセットボタン
送信ボタン
ファイルのアップロード

などがあります。以下が実例です。

[ <input type="text">タグ ]

<form>
テキスト入力画面・一行
<input type="text" name="field01" size="20" value="入力して下さい">
</form>

<form>
テキスト入力文字非表示・一行
<input type="password" name="field01" size="20" value="入力して下さい">
</form>

上記のように「<input type="text">」が基本です。ここにオプションが追記されることになります。"name"は隠し文字となります。変数名として利用することができます。なお "text"を "password"とすることで、入力文字は表示されません。

【注】かりに「odic」と入力して、enterキーを叩くとと、ブラウザのURL欄の最後に /?field01=odicと表示されます。これは変数＝値としてサーバに送信されることを意味しています。

テキスト入力画面・複数行

<form>
テキスト入力画面・複数<p>
<textarea name="field02" rows=5 cols=50 wrap="hard">
入力して下さい
</textarea>
</form>

【注】rows=5が縦幅(行数)、cols=50が横幅(文字数)。wrap="hard"は画面いっぱいの自動改行タグ。自動改行されるが画面上だけでのこと。データーは入力内容だけが転送される。name属性のfield02で識別される。

ラジオボタン

<form>
ラジオボタン
<input type=radio name=radio1 value="VAL1">奈良
<input type=radio name=radio2 value="VAL2">八尾
<input type=radio name=radio3 value="VAL3">未知座小劇場
<input type=radio name=radio4 value="VAL4">奈良岡朋子
<input type=radio name=radio5 value="VAL5" checked>演劇
</form>

チェクボックス

<form>
チェクボックス
<input type=checkbox name=check[] value="VAL1">奈良
<input type=checkbox name=check[] value="VAL2">八尾
<input type=checkbox name=check[] value="VAL3">未知座小劇場
<input type=checkbox name=check[] value="VAL4">奈良岡朋子
<input type=checkbox name=check[] value="VAL5" checked>演劇
</form>

プルダウンメニュー

<form>
プルダウンメニュー
<select name="pmenu">奈落
<option value="SEL1">楽屋
<option value="SEL2">演技
<option value="SEL3">エピローグ
<option value="SEL4">構造主義
<option value="SEL5">花道
</select>
</form>

リストボックス

<form>
リストボックス
<select name="lbox">先乗り
<option value="SEL1">仕込み
<option value="SEL2">場渡り
<option value="SEL3">ゲネ
<option value="SEL4">ポスト構造主義
<option value="SEL5">本番
</select>
</form>

Welcome! 　page:html/form
odic.ne.jp library　　HTMLとform
by:大阪演劇情報センター+未知座小劇場	更新日:
home:topへ　　 server library:top へ

<form></form>