HTML のフォーム

HTMLのフォーム HTMLで作成したボタンにJavaScriptで書いたプログラムを割り当てる

1. フォームの部品 <input>系(1) • ボタン <input type=button value="あああ"> value=でボタンに表示する文字を指定できる． • テキスト(1行) <input type=text size=20 value="いいい"> size=でテキスト内(フィールド)の横幅を指定できる． value=で文字をあらかじめ表示できる．

2. フォームの部品 <input>系(2) • ラジオボタン <input type=radio name="aaa">い <input type=radio name="aaa" checked>ろ <input type=radio name="aaa">は複数の項目から一つだけ選択するときに用いる．その複数の項目にはname=によって同じ名前をつけておく．checkedを付けると，その項目は最初から選択された状態になる． • リセットボタン <input type=reset value="元に戻す"> 見た目は普通のボタンだけど，同一フォーム内で入力された各項目を全て初期状態に戻す機能を持つ．value=でボタンに表示する文字を指定できる．

3. フォームの部品 <input>系(3) • パスワード <input type=password size=8> パスワードを入力する時に用いられる．入力した文字が*で表示される． • サブミットボタン <input type=submit value="送信"> 主にCGIで使用される．フォーム内で入力されたデータをCGIファイル等へ送信する．

4. フォームの部品 <select> • セレクト <select> <option>（以下より選んでネ) <option>とりあえずＡ型 <option>なんやねんＢ型 <option>どついたれＯ型 <option>ふざけんなＡＢ型 </select> • 複数の項目から一つだけ選択するときに用います．<select>～</select>の間に<option>を記述することによって，選択項目をいくつでも増やすことができる．<select multiple>とすれば，ctrlキーを押しながら複数選択することもできる．また，size=数値という属性で表示行数を指定することができる．

4. フォームの部品 <textarea> • テキストエリア <textarea cols=30 rows=4> </textarea> • 閲覧者に長めの文章を入力してもらう時に用いる． • cols=は横のサイズ，rows=は縦のサイズを表す．また，改行に関する属性は以下のとおり．wrap=off…自動改行しないwrap=hard…横幅いっぱいになったら自動改行wrap=soft…表示では自動改行するが，送信の際は改行しない

5. イベントハンドラ • イベントハンドラ • ユーザーやリアルタイムな内部処理に反応して行われる処理のこと． • 例）マウスオーバー　→　マウスポインタがアイコンに重なったらビープ音を鳴らす • 例）オンクリック　→　マウスボタンがクリックされたらヤフー(yahoo)にジャンプする • このように何かに反応して何か処理が行われるということ

例1 「押すとアラートが出るよ」というボタンをクリックするとWow!というアラートが出るHTML文書 <HTML> <HEAD><TITLE>REI1</TITLE></HEAD> <BODY> <FORM> <INPUT TYPE=button value="押すとアラートがでるよ" onClick='alert("Wow!")'> </FORM> </BODY> </HTML> ボタンはJavaScriptの機能ではなく，HTML言語そのものが持っている機能．<INPUT>を使う．

例2 「前へ戻る」というあるページへリンクが張ってある文字列をマウスクリックすると「ジャンプしてもいいですか？」と確認ウィンドウが出るHTML文書 <HTML> <HEAD><TITLE>REI2</TITLE></HEAD> <BODY> <A HREF="index.html" onClick='confirm("ジャンプしてもいいですか？")'> 前へ戻る </A> </BODY> </HTML>

例3 「秘密の部屋へ」というあるページへリンクが張ってある文字列をマウスクリックすると「パスワードを入力してください」という入力ウィンドウが開くHTML文書 <HTML> <HEAD><TITLE>REI3</TITLE></HEAD> <BODY> <A HREF="index.html" onClick='prompt("パスワードを入力してください","")'> 秘密の部屋へ </A> </BODY> </HTML>

6. イベント制御 • タグの中に直接，命令やJavaScriptで定義した関数を書き込み，発生したイベントに対応した処理を行う． • 例) onClick: マウスをクリックすると，=の右側の処理が行われる • 例1はフォーム文によってつくられるボタン，例2と例3は<A HREF>タグでつくられるリンクをクリックすると，=の右側の処理が行われる

7. ダイアログオブジェクト • alert("～")～の部分が文字列として，注意書きダイアログに表示される． • confirm("～")～の部分が文字列として，確認ダイアログに表示される．その後，OKをクリックすればtrueが，キャンセルならばfalseが代入される． • 例) p=confirm("男ですか？"); この場合OKをクリックすると，変数pにtrueという値が代入される． • prompt("○○","××") ○○が文字列として入力ダイアログに表示される．××の部分は最初からそのフィールドに表示される文字列．省略すると何も表示されない．変数に入力の値を代入できる．

例4 「押すとアラートが出るよ」というボタンをクリックするとWow!というアラートが出るHTML文書(alertをJavaScriptで関数化) <HTML> <HEAD> <TITLE>REI1</TITLE> <SCRIPT LANGUAGE="JavaScript"> functionaaa() { alert("Wow!"); } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=button value="押すとアラートがでるよ" onClick="aaa()"> </FORM> </BODY> </HTML> ここでのfunctionはプログラムに名前をつけることだと思ってよい

例5 「主張」というボタンをクリックするとメッセージが表示されるHTML文書 <HTML> <HEAD> <TITLE>REI1</TITLE> <SCRIPT LANGUAGE="JavaScript"> functionsyutyo() { document.forms[0].elements[0].value="歯を大切に!"; } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=text size=20> <INPUT TYPE=button value="主張" onClick="syutyo()"> </FORM> </BODY> </HTML>

例5のdocument.forms[0].elements[0].valueの解説 • フォームやフォーム部品には，識別番号が自動的に割り当てられる．フォームには上から順番に forms[0]，forms[1]，forms[2]，…という識別番号が割り当てられ，そのフォームの中のフォーム部品には，これまた上から順に elements[0]，elements[1]，elements[2]，…という識別番号が割り当てられる．document.forms[0].elements[0].valueは結局，このページ内の１番目のフォームの中の１番目のフォーム部品の値（中身）を意味していることになる．

今日の課題: 電卓をつくろう，まず最初に <HTML> <HEAD><TITLE>電卓</TITLE> <SCRIPT LANGUAGE="JavaScript"> // 後でここにプログラムを書きます </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=text size=20> <BR> <INPUT TYPE=button value="１" onClick="botan1()"> <INPUT TYPE=button value="２" onClick="botan2()"> <INPUT TYPE=button value="＋" onClick="botanplus()"> <INPUT TYPE=button value="＝" onClick="keisan()"> </FORM> </BODY> </HTML>

次に// 後でここにプログラムを書きますのところに次のプログラムを挿入するこれを拡張して，自分の電卓をつくりなさい． var siki=""; function botan1() { siki = siki + 1; document.forms[0].elements[0].value = siki; } function botan2() { siki = siki + 2; document.forms[0].elements[0].value = siki; } function botanplus() { siki = siki + "+"; document.forms[0].elements[0].value = siki; } function keisan() { kotae = eval(document.forms[0].elements[0].value); document.forms[0].elements[0].value = kotae; siki = ""; }

HTML のフォーム

HTML のフォーム

Presentation Transcript

HTML

HTML

HTML,

html

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML