formオブジェクト - web-0127のブログ

form部品のアクセス

formオブジェクトの下位階層にあります

フォーム部品の活用

フォーム部品のアクセス

document.myForm.height.value

※myForm：formオブジェクト
※height：textオブジェクト
※value：valueプロパティ（テキストボックス内の文字列を表す）

valueプロパティを読み出せば、テキストボックスの文字列を取り出せます
valueプロパティに値を代入すれば、テキストボックスに表示する文字を変更できます

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームの利用</title>
<script>
function stdWeight(myForm) {
  var height, weight;
    height = Number(myForm.height.value);
      if (myForm.sex[0].checked) {
        weight = (height - 80) * 0.7;
      } else {
        weight = (height - 70) * 0.6;
      }
        myForm.weight.value = weight;
}
</script>
</head>
<body>
<form name="weightForm">
<p>男性：<input type="radio" name="sex" checked>　女性：<input type="radio" name="sex" ></p>
<p>身長：<input type="text" name="height">cm</p>
<p><input type="button" value="計算" name="calc" onclick="stdWeight(this.form)"></p>
<p>標準体重：<input type="text" name="weight">kg</p>
</form>
</body>
</html>

※この段階で、小数点の処理は設定していません。

自分自身を示す thisプロパティ

自分自身を示す特殊なプロパティ
引数に「this.form」を渡すことにより、呼び出された関数は「フォームの各部品にフォームの階層からアクセスできる」ようになります
引数に「this.form」を渡さない場合、「document.myForm.height.value」のようにdocumentオブジェクトの階層から指定しなければならなくなり複雑になります

まとめ

フォームを使うと、GUIプログラムが作成できる
valueプロパティ：textオブジェクトの文字列を設定・取得する
checkedプロパティ：radioボタンがオンかどうかを判断する

HTML5でも可能

「初期表示のテキストが消える」は、現在ではJavaScriptで記述する必然性がありません
入力チェックとパスワードに関しては「PHP」のカリキュラム内で行います

///////////////　以下の内容は割愛します　///////////////

フォーカス時、初期表示のテキストが消える

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：入力フィールドの初期値を消す</title>
<style>
p.field input{
 color:#999;
}
</style>
<script>
var nameField = 'お名前を入力して下さい';
var mailField = 'メールアドレスを入力して下さい';
function hide(){
  if(document.myForm.name.value == nameField) {
    document.myForm.name.value='';
    document.myForm.name.style.color = '#000';
    }
}

function show(){
  if(document.myForm.name.value == '') {
    document.myForm.name.value=nameField;
    document.myForm.name.style.color = '#999';
    }
}

function hide2(){
 if(document.myForm.mail.value == mailField) {
         document.myForm.mail.value='';
   document.myForm.mail.style.color = '#000';
    }
}
    
function show2(){
  if(document.myForm.mail.value == '') {
    document.myForm.mail.value=mailField;
    document.myForm.mail.style.color = '#999';
    }
}
</script>
</head>
<body>
<h3>入力フィールドにフォーカス時、初期表示のテキストが消える</h3>
<form method="post" action="" name="myForm">
<p class="field">お名前：<input type="text" value="お名前を入力して下さい" size="40" id="name" maxlength="30" onFocus="hide();" onBlur="show();"></p>
<p class="field">メール：<input type="text" size="40" name="mail" id="mail" value="メールアドレスを入力して下さい" onFocus="hide2();" onBlur="show2();"></p>
<p><input type="submit" name="submit" value="送信"><input type="reset" name="submit2" value="リセット"></p>
</form>
</body>
</html>

フォームの入力チェック

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームの入力チェック</title>
<style>
th {
 text-align: right;
 font-weight: normal;
 vertical-align: top;
}
</style>
<script>
function check(){
  myField=document.myform
  if(myField.name.value == ''){
    alert('お名前を入力して下さい。')
    return false
  }
  else if(myField.mail.value.indexOf('@') == -1){
    alert('メールアドレスを正しく入力して下さい。')
    return false
  }   
  else if(myField.comment.value == ''){
    alert('ご感想をお願いします。')
    return false
  }
}
</script>
</head>
<body>
<h1>フォームの入力チェック</h1>
<ol>
<li>お名前入力欄が空のときにアラートウインドウを出す</li>
<li>メールアドレス入力欄に「@」がないときにアラートウインドウを出す</li>
<li>感想欄が空のときにアラートウインドウを出す</li>
<li>すべての欄に正しく入力されていれば送信できる</li>
</ol>
<form name="myform" onsubmit="return check( )">
<table summary="お問い合わせフォーム">
<tr>
<th>お名前</th><td><input type="text" size="35" name="name"></td>
</tr>
<tr>
<th>メール</th><td><input type="text" size="35" name="mail"></td>
</tr>
<tr>
<th>感想</th><td><textarea rows="4" cols="40" name="comment"></textarea>
</td>
</tr>
<td colspan="2"><input type="submit" value="送信"></td>
</table>
</form>
</body>
</html>

パスワード認証

パスワード.html（felica.html）を作成しておきます
robots.txtにフォルダー「secret」以降を読みにいかないよう設定しておきます

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>パスワード認証</title>
<script>
function secret(){
	password=document.myForm.pass.value
	location.href ='secret/' + password + '.html'
}
</script>
</head>
<body>
<h2>パスワード認証</h2>
<p>パスワード（felica）を入力してから認証ボタンをクリックして下さい。<br>秘密のページへ移動します。</p>
<form name="myForm">
<p>
<input type="password" size="20" name="pass">
<input type="button" value="認証" onclick="secret()">
</p>
</form>
</body>
</html>