ابتدا ابزارهای HTML را ایجاد می کنیم و با id نامی برای آنها تعیین می کنیم.
<input type="text" name="txt1" id="txt2"/>همانطوریکه مشاهده می شود txt2 نامی است که برای یک کادر متنی لحاظ شده است. سپس برای دستیابی به آن از کد زیر استفاده می شود:
var a=Number(document.getElementById("txt1").value);کد بالا یک کد جاوااسکریپت است که محتوای کادر متنی با id که txt1 است تعلق گرفته است را در a قرار می دهد.
مثال: صفحه وبی طراحی کنید که دو کادر متنی دارد و مجوع مقادیرشان با کلیک بر یک دکمه در کادر متنی سوم قرار می گیرد:
<head>
<meta charset="utf-8">
<title>کادر تایید</title>
</head>
<body bgcolor="#ffeedd">
<center>
<script type="text/javascript">
function product(){
var a=Number(document.getElementById("txt1").value);
var b=Number(document.getElementById("txt2").value);
document.getElementById("txt3").value=a+b;
}
</script>
قیمت محصول اول
<br/>
<input type="text" name="txt1" id="txt1"/>
<br/>
<br/>
قیمت محصول دوم
<br/>
<input type="text" name="txt2" id="txt2"/>
<br/>
<br/>
قیمت کل
<br/>
<input type="text" name="txt3" id="txt3"/>
<br/>
<br/>
<input type="button" name="button" value="نمایش محصولات" onclick="product()"/>
</center>
</body>