練習課題

フォーカス時、初期表示のテキストが消える
<!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を作成しておきます
  • robots.txtも同時に設定しないとセキュリティの問題が残ります
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>課題7 パスワード認証</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>