Web App - Coloring V2

<div id="page">
<div id="satu">For the last moment we get from here</div>
<table>
<tr><td>Foreground</td></tr>
<tr><td><input type="text" id="fore" size="30px" onkeyup="foring(this.value)" onfocus="this.value=''" value="Enter color name . . ." onBlur="getTip(this)"/></td></tr>
<tr><td>Background</td></tr>
<tr><td><input type="text" id="back" size="30px" onkeyup="backing(this.value)" onfocus="this.value=''" value="Enter color name . . ." onblur="getTip(this)" /></td></tr>
</table>
<p>Tips:
<br/>
> Use Tab for moving the cursor to the next box.<br/>
> Use Shift+Tab for moving the cursor to the previus box.<br/>
> Enter color name like blue or enter hex color rgb code like #f0f, #ff00ff
</p>
</div>
 
<style>
#page { -moz-box-shadow: 0 0 4px #aaa; padding: 10px; -moz-border-radius: 4px; }
#satu { -moz-border-radius: 4px; -moz-box-shadow: 0 0 4px #aaa; padding: 10px; width: 500px; height: 30px; margin: 0 auto; text-align: center; font: 12px sans-serif; background: pearl; font-weight: bold;  }
table td { font: 12px arial; }
input { -moz-box-shadow: 0 0 4px #ccc; -moz-border-radius: 4px; border: 1px solid #ccc; padding: 2px; font: 12px arial; }
input:hover { -moz-box-shadow: 0 0 4px orange; }
input:focus { -moz-box-shadow: 0 0 4px #ccc; }
p { font: 12px sans-serif; color: #444; background: ivory;  -moz-border-radius: 4px; padding: 10px; -moz-box-shadow: 0 0 4px #aaa; }

</style>

<script>
function foring(color){
 document.getElementById('satu').style.color = color;
}

function backing(color){
  document.getElementById('satu').style.backgroundColor = color;

}

function getTip(id){
 if(id.value.length==0){
  id.value = 'Enter color name . . .';
 }
}
</script>