FORMの設定

FORMの設定と記載方法

form 部品（各種）を表示します。

フォーム部品を使ったプログラムはJavaScriptの ８番（フォーム系）にあります。

FORMで表示できる部品

（ボタン、テキスト、テキストエリア、ラジオボタン、チェックBox、セレクトBox、 パスワードBox、送信フォーム）
フォーム部品を指定する場合はFORMタグを用いて<form>〜</form>間に配置します。 また、IEとNetscape4以降のブラウザでは<form>を省略できますが、 JavaScriptでFORMのname属性を指定するときに使用しますので、 なるべく付けるようにしてください。 下記、FORMタグの説明欄のピンク色の文字は各FORM部品を表示するソースです。
ご使用の際は、コピペしてhtml（ファイル）で保存、Wクリックすると表示できます。



【FORM属性の記載方法と表示結果】
FORM（各種）の指定方法 実行結果
ボタンの指定 ボタンを表示するには <input type="button"> を使います。 ボタン（単体で特に意味の無いボタンを表示）は
通常 JavaScript と組み合わせて使用します。

<form> <input type="button" value="押す" onclick="alert('ボタンの表示')"> </form> onclick（クリックしたら何をするかを指定します）
例えば　onclick="http://www.yahoo.co.jp/"　（Yahooへジャンプ）
または　onclick="index.html" などです。　（indexページへジャンプ）


formのボタン、BOXの色などの指定

formのボタンやBOXの色、背景色、サイズなどの指定は
スタイルシート(style)を使って行います。

<form> <input type="button" value="押す" onclick="alert('styleで指定します。')" style="color:lime;background:black;font-size:20pt;"> </form> style=スタイルシートを指定、color=文字色、background=背景色、
font-size=fontの大きさ















テキストの指定 テキスト部品を表示するには <input type="text"> を使います。 <form> お名前<BR> <input type="text" name="name"> </form>
文字数を制限する指定

フォーム入力部品の入力文字数を制限するには、 <input> タグ内に maxlength 属性で数値を指定します。 （下記のプログラム及びサンプルは１０文字に設定しました） <form> お名前<BR> <input type="text" name="name" maxlength="10"> </form>
お名前












お名前

テキストエリアの指定 テキストエリア部品を表示するには <textarea> を使います。 メッセージは<textarea>〜</textarea>間に入れます。 <textarea name="myText" cols=18 rows=5> メッセージ表示欄 * * * </textarea> cols=横の文字数、rows=縦の行数
ラジオボタンの指定 ラジオボタン部品を表示するには、<input type="radio"> を用います。 ラジオボタンの選択肢は一つのみで、ラジオボタングループは name 属性に同じ名前を指定します。 また、初期値（最初にチェックを付けておく）を設定するには checkd
属性を用います。 <form name="myForm"> 血液型？<BR> <input type="radio" name="blood" checked>A型<BR> <input type="radio" name="blood">B型<BR> <input type="radio" name="blood">AB型<BR> <input type="radio" name="blood">O型<BR> </form>
ラジオボタンにリンクを設定

ラジオボタンにリンクを設定するには onclick を使います。
onclick でアラートを表示する設定 <form name="myForm"> 血液型？<BR> <input type=radio name=St onclick="alert('A型　OK')">A型<BR> <input type=radio name=St onclick="alert('B型　OK')">B型<BR> <input type=radio name=St onclick="alert('AB型　OK')">AB型<BR> <input type=radio name=St onclick="alert('O型　OK')">O型<BR> </form>
onclick でウィンドを表示する設定
例 onclick="window.open('ジャンプするURL')" <form name="myForm"> <input type="radio" name="WinOpen" onclick="window.open('http://www14.plala.or.jp/donkey777/')"> Donkey's HP <input type="radio" name="WinOpen" onclick="window.open('http://www.yahoo.co.jp/')"> Yahoo Japan! </form>
血液型？
A型
B型
AB型
O型






血液型？
A型
B型
AB型
O型






Donkey's HP
Yahoo Japan!





チェックボックスの指定 チェックボックス部品を表示するには、<input type="checkbox"> を用います。 チェックボックスの選択肢はグループ内の項目、複数を選択可能で、 チェックボックス グループには name 属性に同じ名前を指定します。 また、初期値（最初にチェックを付けておく）を設定するには checkd
属性を用います。 <form name="myForm"> 趣味は何ですか？<BR> <input type="checkbox" name="blood" checked>なし<BR> <input type="checkbox" name="blood">音楽<BR> <input type="checkbox" name="blood">読書<BR> <input type="checkbox" name="blood">ショッピング<BR> <input type="checkbox" name="blood">釣り<BR> </form> 上記のソースはチェックボックスの表示とチェック機能だけです。
趣味は何ですか？
なし
音楽
読書
ショッピング
釣り

上記のチェックボックスはJavaScriptのプログラムで作動させています。
使用したい方はJavaScript（フォーム系） ７番（アラート表示）、 ８番（テキスト表示） でDownloadしてください。
セレクトボックスの指定 セレクト部品には <select> タグを使い、<form>〜</form> の間に、 各フォーム部品を配置します。 終了記号の </option> は省略できますが、なるべく付けるように してください。 <form name="myForm"> <select name="kenmei"> <option value="#">都道府県名</option> <option value="tokyo">東京都</option> <option value="aichi">愛知県</option> <option value="osaka">大阪府</option> <option value="miyagi">宮城県</option> </select></form> 上記のソースはセレクトボックスと項目の表示だけです。


セレクトBOXにリンクを設定

セレクトBOXにリンクを設定するのは下記ピンクのソースです。
表示項目をクリックすると選択PAGEにジャンプします。
<form name="myForm"> <select onchange= "location.href=this.options(this.selectedIndex).value"> <option value="#" selected>LINK MENU</option> <option value="http://www.yahoo.co.jp/">Yahoo</option> <option value="http://www.google.co.jp/">Google</option> <option value="../tengoku.html">Donkeyのメルマガ</option> <option value="../main.html">Donkey's HP</option> </select></form> 初期値（最初に表示）は selected で option 内に入れる














FILE参照BOXの指定 （FILE参照BOX）部品を表示するには、<input type="file"> を使い、<form>〜</form> の間に配置します。 <form name="myForm"> <input type="file" name="myFile"> </form>
パスワードBOXの指定 （パスワードBOX）部品を表示するには、<input type="password"> を使い、<form>〜</form> の間に配置します。 <form name="myForm"> パスワードを書いてください！<br> <input type="password" name="pass"> </form> パスワードBOXの設定はJavaScript(テーブル系)の 8〜10番に ありますので参照してください。
パスワードを書いてください！
送信ファームの作成 フォームを作成するには、<form> タグを使い、 <form>〜</form> の間に、各フォーム部品を配置します。 <form action="./postmail.cgi" method="POST"> お名前<BR> <input type="text" name="name"><BR> メールアドレス<BR> <input type="text" name="email"><BR><BR> <input type="submit" value="送信"> <input type=reset value="リセット"> </form> （注）このプログラムは「ＣＧＩサーバー」にアップロードしないと 送信できません。
お名前

メールアドレス