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>
- 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;
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
Latest HTML Web App Dev skills and techniques
- learn from Google Doodle (Sprite image based HTML interactive animation): http://pratapreddypilaka.blogspot.com/2011/09/function-z-v-function-la-if-c.html
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; }