查看“JavaScript 表单”的源代码

==Javascript基本表单==
*Javascript里的表单，实际上就是html中学到的那些：
 <nowiki><form action="" method="">
  请输入 1 到 10 之间的数字： <input id="numb">
  <button type="button" >提交</button>
</form></nowiki>
*在上述表单基础上，我们常常在表单的按钮处增加一个点击事件、以触发相应的javascript代码：
 <nowiki><!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
</head>
<body>

<h1>JavaScript 验证输入</h1>

<p>请输入 1 到 10 之间的数字：</p>
<form>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
	</form>
<script>
function myFunction() {
    alert("Hello World");
}
</script>

</body>
</html></nowiki>
*做到以上这步，我们尚觉不太过瘾，要是在函数中能获取到表单的值就好了
 <nowiki><script>
 function myFunction() {
   x = document.getElementById("numb").value;
   alert("您输入的值是"+String(x));
}
</script></nowiki>

===实例1：一个简单的计算器===
*实例
 <nowiki><!DOCTYPE html>
 <html>
 <head>
   <meta charset="gb2312">
 </head>
 <body>

  <h1>我的计算器</h1>

    <p>请输入 1 到 10 之间的数字：</p>
    <form>
      <input id="num1"> + <input id="num2">=
      <button type="button" onclick="myFunction()">结果</button>
    </form>
   <script>
    function myFunction() {
        x = document.getElementById("num1").value;
	x = Number(x);
	y = document.getElementById("num2").value;
	y = Number(y);
	result = x + y ;
	alert(String(result));
    }
   </script>

 </body>
 </html></nowiki>
===实例2：BMI健康计算器 ===
*练一练：根据我们上节课讲的BMI健康公式做一个BMI健康指数计算器，你会吗？
*实例：
 <nowiki><!DOCTYPE html>
 <html>
 <head>
 <meta charset="gb2312">
 </head>
 <body>

 <h1>我的计算器</h1>

 <p>请输入您的身高和体重：</p>
 <form>
  身高：<input id="num1"> <br> <br> 
  体重：<input id="num2"><br><br>
  <button type="button" onclick="myFunction()" >结果</button>
	</form>
  <script>
   function myFunction() {
    x = document.getElementById("num1").value;
	//x = Number(x);
	//y = document.getElementById("num2").value;
	//y = Number(y);
	//result = x + y ;
	//alert(String(result));
	bmi = Number(x) ;
	if (bmi<=18.4)
 {
     x="您的体型有些偏瘦，请加强营养";
 }
 else if(bmi <23.9)
 {
    x="您的体型正常，请继续保持";
 }
 else if(bmi <27.9) {
    x="您的体型有些超重，请合理膳食和假期锻炼";
 }else {
    x="您的体型过于肥胖，请立即假期锻炼."
 }
 alert(x);
}
</script>

</body>
</html></nowiki>
*下一步 [[JavaScript 输出]]