JavaScript 表单
来自CloudWiki
Javascript基本表单
- Javascript里的表单，实际上就是html中学到的那些：
<form action="" method=""> 请输入 1 到 10 之间的数字： <input id="numb"> <button type="button" >提交</button> </form>
- 在上述表单基础上，我们常常在表单的按钮处增加一个点击事件、以触发相应的javascript代码：
<!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>
- 做到以上这步，我们尚觉不太过瘾，要是在函数中能获取到表单的值就好了
<script>
function myFunction() {
x = document.getElementById("numb").value;
alert("您输入的值是"+String(x));
}
</script>
实例1：一个简单的计算器
- 实例
<!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>
实例2：BMI健康计算器
- 练一练：根据我们上节课讲的BMI健康公式做一个BMI健康指数计算器，你会吗？
- 实例：
<!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>
- 下一步 JavaScript 输出
