สภาวะปกติจะแสดงผลเป็น div เมื่อเิอาเมาส์คลิก จะกลายเป็นช่อง input ให้กรอก และเมื่อย้ายโฟกัสไปตัวอื่น ก็็จะกลับเป็น div ตามเดิม

<!--ค่าที่ได้มาจากการ submit สังเกตุดู ชื่อที่ใช้รับค่า-->
<?
  echo $_POST[userValue]."<br />";
  echo $_POST[passwordValue]."<br />";
?>

<form method="post" action="?">
<p><label for="user">user :</label><div id="user" onclick="divclick(this)">goragod</div></p>
<p><label for="password">password :</label><div id="password" onclick="divclick(this)">1234</div></p>
<!--Input ซ่อน สำหรับใช้ในการ submit ค่าเริ่มต้นให้กำหนดให้เท่ากับ ค่าที่กรอกลงใน div ข้างบน และต้องมีจำนวนเท่ากับฟิลด์ที่ต้องการ-->
<input type="hidden" name="userValue" id="userValue" value="goragod" />
<input type="hidden" name="passwordValue" id="passwordValue" value="1234" />
<input type="submit" />
</form>

<script type="text/javascript">
function divclick( obj )
{
  var val = obj.innerHTML;
  var id = obj.id + 'Text';
  obj.innerHTML = '<input type="text" id="'+ id + '" name="'+ id + '" value="' + val + '" onblur="doblur(this,\''+obj.id+'\')" />';
  obj.onclick = "";
  document.getElementById( id ).focus();
}
function doblur( input , parent )
{
  var div = document.getElementById( parent )
  div.innerHTML = input.value;
  div.onclick = function(){divclick(this)};
  document.getElementById( parent + 'Value' ).value = input.value;
}
</script>