HTML syntax and common code

Form

  • form with sumbit function
    • button based 
      <html><head><script>
function formSubmit()
{
document.getElementById("frm1").submit(); // submit by javascript
}
</script></head><body>
<form id="frm1" action="form_action.php">
 
Name: <input type="text" name="fname"><br>
<input type="button" onclick="formSubmit()" value="Submit form">
 
</form></body></html>
    • link based 
      <form name="myform" action="form_action.php">
Name: <input type="text" name="fname"><br>
<a href="javascript: formSubmit()">Submit</a>
</form>
    • form based 
      <html><head><script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}
</script></head><body>
<form name="myForm" action="form_action.php" onsubmit="return validateForm()" method="post">
 First name: <input type="text" name="fname">
 <input type="submit" value="Submit">
</form></body></html>

Content update

  • update tag innerHTML 
    document.getElementById('table1').rows[2].cells[3].innerHTML='4.01'; // put '4.01' in table cell
  • get tag innerHTML 
    var bill_e=document.form1.bill_e.value; // form1 and bill_e are the name of form tag and input tag;
  • change bg color 
    <button onclick='document.body.style.background="black"'>BG</button>

Javascript String operation

  • trim, trimLeft, trimRight
  • replace with regexp 
    myTxt.replace(/\s/g,''); // remove white space
  • float precision 
    float.toFixed(2); // 2 decimal
  • string array to float 
    var r=ratio.replace(/\s/g,'').split(',').map(parseFloat);
  • float array sum 
    var arr = [1,2,3,4];
var total=0;
for(var i in arr) { total += arr[i]; }

HTML standard format

  • html encoding and character set reference: link
  • HTML header function
    • redirect to new replacing page: 
      <meta http-equiv="refresh" content="1; url='friend.php' />
<script type="text/javascript">
window.location.href = "friend.php"
</script>

Latest HTML Web App Dev skills and techniques

HTML Design and Tips of Usage Efficiency

Conditional Block Display

Javascript based hide and show based on drop down menu selection. 

<script language="javascript">
function showOptionBlock(){
// for cust mode or cust-advance mode, show the optional Block
if(document.getElementById("mode").value=="cust" || document.getElementById("mode").value=="custadv")
  //alert("works");
  document.getElementById("optionBlock").style.visibility="visible";
else
  document.getElementById("optionBlock").style.visibility="hidden";	
}
</script>
 
<!-- html part -->
<form name="viewform" action="view.php">
<select name=mode id=mode onchange="showOptionBlock();">
<option ></option><option value=simple>Simple</option>
<option value=cust>Enter Date [YYYYMMDD]</option>
<option value=custadv>Enter month [YYYYMM]</option>
</select>
 
<!-- here the optional block -->
<input id=optionBlock name=optionBlock type=text style="visibility:hidden">
</form>

center html content in both horizontal and vertical

html, body {
    height: 100%;
}
 
html {
    display: table;
    margin: auto;
}
 
body {
    display: table-cell;
    vertical-align: middle;
}