いろいろやり方はあるようですが、２つ。
1. Form のinput名を指定してValue (値) を取得して表示
<html>
<head>
<script type="text/javascript">
<!--
function func() {
var num1 = parseFloat(document.F1.h_feet.value);
フォーム名
入力フィールド名
var num2 = parseFloat(document.F1.h_inch.value);
var num3 = parseFloat(document.F1.w_lb.value);
var t_meter= (num1 *12 + num2)*0.0254 ;
var bunbo = Math.pow(t_meter,2);
var bunshi = num3*0.453592;
var bmi = Math.round((bunshi / bunbo)*100)/100;
document.F1.T3.value =bmi;
}
// -->
</script>
</head>
<body>
<form name="F1">
<li>Height<input type="text" name="h_feet" value="5">feet</li>
<li><input type="text" name="h_inch" value="4">inch</li>
<li>Weight<input type="text" name="w_lb" value="200">lb</li>
<li><input type="button" value="=" onclick="func()"></li>
<li><input type="text" name="T3"></li>
</form>
</body>
</html>
*入力名で指定する場合は、上記のフォームで指定。 getElementBynameというのはない。<head>
<script type="text/javascript">
<!--
function func() {
var num1 = parseFloat(document.F1.h_feet.value);
フォーム名
入力フィールド名
var num2 = parseFloat(document.F1.h_inch.value);
var num3 = parseFloat(document.F1.w_lb.value);
var t_meter= (num1 *12 + num2)*0.0254 ;
var bunbo = Math.pow(t_meter,2);
var bunshi = num3*0.453592;
var bmi = Math.round((bunshi / bunbo)*100)/100;
document.F1.T3.value =bmi;
}
// -->
</script>
</head>
<body>
<form name="F1">
<li>Height<input type="text" name="h_feet" value="5">feet</li>
<li><input type="text" name="h_inch" value="4">inch</li>
<li>Weight<input type="text" name="w_lb" value="200">lb</li>
<li><input type="button" value="=" onclick="func()"></li>
<li><input type="text" name="T3"></li>
</form>
</body>
</html>
2. Formのidを指名してValue (値) を取得して表示
<html>
<head>
<script type="text/javascript">
function bmi_calc(){
num1 = parseFloat(document.getElementById("h_height").value);
num2 = parseFloat(document.getElementById("h_inch").value);
num3 = parseFloat(document.getElementById("weight_lb").value);
var feet_inch_toMeter = (num1*12+num2)*0.0254
var bunbo = Math.pow(feet_inch_toMeter,2)
var bunshi = num3*0.453592
var result_bmi = bunshi/bunbo
document.getElementById("result").innerHTML = result_bmi
}
</script>
</head>
<body>
<form name="F1">
Height : <input type="text" id="h_height" value=0 /> Feet <br/>
<input type="text" id="h_inch" value=0 /> inch <br/>
Weight : <input type="text" id="weight_lb" value=0 /> lb <br/>
<input type="button" onclick="bmi_calc()" value="calc.">
BMI : <input type="text" id="bmi" value='-'/>
</form>
<p>The Result is : <br>
<span id = "result"></span>
</body>
</html>
<head>
<script type="text/javascript">
function bmi_calc(){
num1 = parseFloat(document.getElementById("h_height").value);
num2 = parseFloat(document.getElementById("h_inch").value);
num3 = parseFloat(document.getElementById("weight_lb").value);
var feet_inch_toMeter = (num1*12+num2)*0.0254
var bunbo = Math.pow(feet_inch_toMeter,2)
var bunshi = num3*0.453592
var result_bmi = bunshi/bunbo
document.getElementById("result").innerHTML = result_bmi
}
</script>
</head>
<body>
<form name="F1">
Height : <input type="text" id="h_height" value=0 /> Feet <br/>
<input type="text" id="h_inch" value=0 /> inch <br/>
Weight : <input type="text" id="weight_lb" value=0 /> lb <br/>
<input type="button" onclick="bmi_calc()" value="calc.">
BMI : <input type="text" id="bmi" value='-'/>
</form>
<p>The Result is : <br>
<span id = "result"></span>
</body>
</html>
２．フォームの修飾
html
<p
> ■適当なテキストエリア(複数行入力欄)：<br> <textarea class="textlines"></textarea></p>CSS
.textlines { border: 2px solid #0a0; /* 枠線 */ border-radius: 0.67em; /* 角丸 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 20em; /* 横幅 */ height: 120px; /* 高さ */ font-size: 1em; /* 文字サイズ */ line-height: 1.2; /* 行の高さ */}２．カーソルでフォームの枠色変更。
.textlines:focus { border-color: skyblue; /* 枠線の色 */ background-color: #ffc; /* 背景色 */ outline: none; /* ※ブラウザが標準で付加する線を消したいとき */}
0 件のコメント:
コメントを投稿