From WikiEducator
Jump to: navigation, search


VmvIcon Objectives.png

By the end of this page you will be able to:

  • Understand how a text input box is created

Note the input "type" attribute was introduced in HTML 5

Example (js2_01)

  <style type="text/css">.lbl { width: 200px; float:left;}</style>
<script type="text/javascript">
function fnDisplayName() {
    strMessage=strMessage +" " +document.myForm.txtLname.value;
    alert("Hello " + strMessage);
<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">&nbsp;</span>
<input type="button" value="Press Me" onClick="fnDisplayName()" /></p>
  • 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)

<script type="text/javascript">
function fnDisplaySum() {
<form name="myForm">
  Enter Your first number:&nbsp;
    <input type="number" name="txtVal1" value="0" /><br />
  Enter Your second number:&nbsp;
    <input type="number" name="txtVal2" value="0" /><br />
  <input type="button" value="Calculate Sum" onClick= "fnDisplaySum()" /><br />
  The result is:&nbsp;<input type="number" name="txtResult" /><br />

Example :Click here to run js2_02.

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Forms/InputBox. (2022). In WikiEducator/VirtualMV wiki. Retrieved August 12, 2022, from http:    (zotero)