VirtualMV/JavaScript/Forms/InputBox
From WikiEducator
< VirtualMV | JavaScript
Overview
|
By the end of this page you will be able to:
|
Note the input "type" attribute was introduced in HTML 5
Example (js2_01)
<html> <head> <style type="text/css">.lbl { width: 200px; float:left;}</style> </head> <body> <script type="text/javascript"> <!-- function fnDisplayName() { strMessage=document.myForm.txtFname.value; strMessage=strMessage +" " +document.myForm.txtLname.value; alert("Hello " + strMessage); } //--> </script> <form name="myForm"> <p><span class="lbl">Enter Your First Name:</span> <input type="text" name="txtFname" value="" /></p> <p><span class="lbl">Enter Your Last Name:</span> <input type="text" name="txtLname" value="" /></p> <p><span class="lbl"> </span> <input type="button" value="Press Me" onClick="fnDisplayName()" /></p> </form></body> </html>
- Note: The css .lbl is used to space out the labels.
- Warning** IE has another (feature) - you need to leave a space between the onClick string and "/>"
Example :Click here to run js2_01.
Example (js2_02)
<html><body> <script type="text/javascript"> <!-- function fnDisplaySum() { vntNum1=eval(document.myForm.txtVal1.value); vntNum2=eval(document.myForm.txtVal2.value); vntSum=vntNum1+vntNum2; document.myForm.txtResult.value=vntSum; } //--> </script> <form name="myForm"> Enter Your first number: <input type="number" name="txtVal1" value="0" /><br /> Enter Your second number: <input type="number" name="txtVal2" value="0" /><br /> <input type="button" value="Calculate Sum" onClick= "fnDisplaySum()" /><br /> The result is: <input type="number" name="txtResult" /><br /> </form> </body></html>
Example :Click here to run js2_02.
References
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/JavaScript/Forms/InputBox. (2024). In WikiEducator/VirtualMV wiki. Retrieved December 22, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/Forms/InputBox (zotero)
|
