2008年10月31日金曜日

 

【Javascript】ライブラリを使わないフォームチップ

Useful tips to enrich your HTML Forms - Woork
DEMO:Ajax Form samples - tryzoom
inputフィールドにフォーカスされるとメッセージが表示される
/* HTML ソース */
<label for="email" >Email</label>
<input type="text" id="email"
  onFocus="javascript:toggleMsg('msg')"
  onBlur="javascript:toggleMsg('msg')" maxlength="20"/>
<span id="msg" class="msg" style="visibility:hidden;">※必須項目です</span>
/* Javascript コード */
<script type="text/javascript">
  function toggleMsg(idElement){
    element = document.getElementById(idElement);
    if(element.style.visibility!='hidden'){
      element.style.visibility='hidden';
    } else {
      element.style.visibility='visible';
    }
  }
</script>

入力フィールドがフォーカスされてる時に『※必須項目です』が表示される。

入力文字数制限チェック
/* HTML ソース */
<label for="text">Write something here</label>
<input type="input" id="text"
  onKeyUp="javascript:countChars('counter_number')" />
残り<spam id="counter_number">20</spam>文字
/* Javascript コード */
<script type="text/javascript">
  function countChars(idElement){
    max_chars = 20;
    counter = document.getElementById(idElement);
    field = document.getElementById('text').value;
    field_length = field.length;
    // 入力可能な文字数を計算
    remaining_chars = max_chars-field_length;
    // 入力可能な文字数を表示
    counter.innerHTML = remaining_chars;
    // 残り文字数が5文字以下になったら色を変える
    if(remaining_chars<=5){
      counter.style.color="#CC0000";
    }
  }
</script>
/* HTML ソース */
<input type="radio" name="newsletter" value="1" id="newsletter-1"
  onclick="javascript:toggle(1)" />
<label for="newsletter-1">Yes</label>
<input type="radio" name="newsletter" value="1" id="newsletter-0"
  onclick="javascript:toggle(0)" />
<label for="newsletter-2">No</label>
<div id="email-field" style="display:none;">
  <input type="text" id="email" />  E-mailアドレス
</div>
/* Javascript コード */
<script type="text/javascript">
  function toggle(status){
    idStatus = status;
    element =document.getElementById('email-field');
    if(idStatus==0){
      element.style.display='none';
    } else {
      element.style.display='block';
    }
  }
</script>

Javascriptが有効でない場合も考慮して使いやすいフォームを心掛けたい。

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google