Document Actions

Template for Making Your Own E-Forms

by joan — last modified 2007-06-18 14:31

HTML template which includes helpful hints throughout and a JavaScript that allows you to locate your cursor's pixel location and the distance between two points on the form.

See the OSCAR User's Manual for more detailed instructions on making your own e-form.

<html>

<head>

<!-- CSS Script that removes textarea and textbox borders when printing -->
<style type="text/css" media="print">
td.subjectline {
    display:none;
}
input.noborder {
    border : 0px;
    background: transparent;
}

textarea.noborder {
	scrollbar-3dlight-color: transparent;
	scrollbar-3dlight-color: transparent;
	scrollbar-arrow-color: transparent;
	scrollbar-base-color: transparent;
	scrollbar-darkshadow-color: transparent;
	scrollbar-face-color: transparent;
	scrollbar-highlight-color: transparent;
	scrollbar-shadow-color: transparent;
	scrollbar-track-color: transparent;
        background: transparent;
        overflow: hidden;

	//scrollbar : none;
	border : 0px;
}

</style>
<!-- ------------------------------------------------------------------ -->

<!-- SCRIPT GIVES THE MOUSE COORDINATES  Hold SHIFT and click two points for distance between----- -->
<script type="text/javascript" language="javascript">
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePosition;
document.onclick = captureposition;
var capX = 0;
var capY = 0;
var sy = 0;
var sx = 0;
function getMousePosition(e) {
  var _x;
  var _y;
  if (!isIE) {
	_x = e.pageX;
	_y = e.pageY;
  }
  document.title = _x + " " + _y;
  return true;
}
function captureposition(e) {

  if (e.shiftKey) {
     if ((capX == 0) && (capY == 0)) {
        capX = e.pageX;
        capY = e.pageY;
     } else {
        var diffX = e.pageX-capX;
        var diffY = e.pageY-capY;
        if (Math.abs(diffX) > Math.abs(diffY)) {
            alert('X-coordinate distance: ' + diffX + 'px');
        } else {
            alert('Y-coordinate distance: ' + diffY + 'px');
        }
        capX = 0;
        capY = 0;
     }
   }
}
</script>
<!-- ------------------------------------------- -->

</head>

<body width="750px">
<div style="position: absolute; left: 12; top: 16; z-index:'-1'"><IMG SRC="${oscar_image_path}myimage.gif"></div>
<!-- You can remove ${oscar_image_path} as you develop the form, but make sure you put it back before uploading to OSCAR otherwise the image wouldn't show.
<!-- Also note: the image filename IS CASE SENSITIVE INCLUDING THE EXTENSION. It may work otherwise in Windows, but not in OSCAR because it's based on a Linux platform -->


<form method="POST" action="">
<!-- ----------------------------All textfields/checkboxes/textareas go here...------ -->

<div style="position: absolute; left:90px; top:5px;"> 
	<input type="text" class="noborder" name="thisfield121" style="width: 289px; font-family: Arial; font-size: 12px;" tabindex="1">
</div>

<div style="position: absolute; left:90px; top:30px;"> 
	<textarea class="noborder" name="thisfield122" style="height: 83px; width: 289px; font-family: Arial; font-size: 12px;" tabindex="2"></textarea>
</div>

<div style="position: absolute; left:90px; top:130px;">
        <input type="checkbox" name="thischeckbox1042">
</div>
  

<!-- --------------------------------------------------------------------- -->


<!-- The submit/print/reset buttons -->
<div style="position: absolute; top: 922px; left: 27px;">
  <table>
     <tr>
        <td class="subjectline">
             Subject: <input type="text" name=subject size="40">&nbsp;
             <input type="submit" value="Submit" name="B1">
             <input type="reset" value="Reset" name="B2">
             <input type=button value=Print onclick="javascript:window.print()">
        </td>
     </tr>
  </table>
</div>
</form>
</body>

</html>

Personal tools

Document Actions

Template for Making Your Own E-Forms