HTML syntax and common code

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

Latest HTML Web App Dev skills and techniques

HTML Design and Tips of Usage Efficiency

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")
<!-- 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>
<!-- here the optional block -->
<input id=optionBlock name=optionBlock type=text style="visibility:hidden">
html, body {
    height: 100%;
html {
    display: table;
    margin: auto;
body {
    display: table-cell;
    vertical-align: middle;