1040 Tax Form

The following sample shows how you can use SpreadJS spreadsheet to easily create complex interactive data entry and input forms for your JavaScript applications, such as the US Form 1040 Individual Income Tax Return. Typical forms could be from the medical, legal, insurance, education, or financial industries.

Description
app.js
index.html
styles.css
Copy to CodeMine

The example highlights the locking of cells to prevent editing, vertical text alignment, cell's label and padding, as well as loading a predefined template using fromJSON.

The example highlights the locking of cells to prevent editing, vertical text alignment, cell's label and padding, as well as loading a predefined template using fromJSON.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var sd = data; if (sd.length > 0) { if (!spread) { return; } spread.suspendPaint(); spread.fromJSON(sd[0]); spread.resumePaint(); } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/tax-form.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%;height:100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }