PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


การ hilight form ฟอร์มด้วย javascript อย่างง่าย

28 October 2008 By Ninenik Narkdee
form javascript hilight

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ form javascript hilight



เทคนิคการทำ hilight text field textarea เมื่อมีการโฟกัสเพื่อทำการกรอก หรือพิมพ์ข้อมูล โดยไม่ต้องแทรกโค้ด javascript ไว้ใน html หลักการคล้ายกับ jquery หรือเป็นรูปแบบที่ jquery นำไปประยุกต์ใช้

CSS code คลาสสำหรับทำ hilight

<style type="text/css">
.hi_light{
	border:1px #333333 inset;
	background-color:#FFCC33;
	color:#000000;
}
</style>

Javascript Code

<script language="javascript">
window.onload=function(){
	var mytext=document.form1.elements;
	for(i=0;i<mytext.length;i++){
		if(mytext[i].type!="" && mytext[i].type!="submit"){
			mytext[i].onfocus=function(){
				this.className='hi_light';
			}
			mytext[i].onblur=function(){		
				this.className='';			
			}	
		}
	}
}
</script>

HTML code

<form id="form1" name="form1" method="post" action="">
  <p>ชื่อ
    <input type="text" name="textfield" />
</p>
  <p>
    นามสกุล
    <input type="text" name="textfield2" />
  </p>
  <p>เพศ
    <input name="radiobutton" type="radio" value="radiobutton" />
  ชาย
  <input name="radiobutton" type="radio" value="radiobutton" />
  หญิง</p>
  <p>
    ที่อยู่
    <textarea name="textarea" rows="5"></textarea>
</p>
  <p>
    <input type="submit" name="Submit" value="Submit" />
  </p>
</form>

ตัวอย่างผลลัพธ์

คลิกดูตัวอย่าง





Tags:: form hilight javascript






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง