テキストボックス（text)
<form name="frm1">
<input type="text" name="kname" value="テキストボックス" size="40" onclick="fncFrm1()">
</form>
<script>
function fncFrm1(){
alert(document.frm1.kname.value);
}
/*
//記述方法2
document.frm1.kname.onclick = function(){
alert(document.frm1.kname.value);
}
//記述方法3
document.frm1.kname.addEventListener("click",function(){
alert(document.frm1.kname.value);
});
*/
</script>
パスワード（password)
<form name="frm2">
<input type="password" name="pw" value="パスワード" size="40" onclick="fncFrm2()">
</form>
<script>
function fncFrm2(){
alert(document.frm2.pw.value);
}
/*
//記述方法2
document.frm2.pw.onclick = function(){
alert(document.frm2.pw.value);
}
//記述方法3
document.frm2.pw.addEventListener("click",function(){
alert(document.frm2.pw.value);
});
*/
</script>
テキストエリア（textarea)
<form name="frm3">
<textarea name="biko" cols="60" rows="10" onclick="fncFrm3()">テキストエリア</textarea>
</form>
<script>
function fncFrm3(){
alert(document.frm3.biko.value);
}
/*
//記述方法2
document.frm3.biko.onclick = function(){
alert(document.frm3.biko.value);
}
//記述方法3
document.frm3.biko.addEventListener("click",function(){
alert(document.frm3.biko.value);
});
*/
</script>
セレクトボックス（select)
<form name="frm4">
<select name="ken" onchange="fncFrm4()">
<option value="1"></option>
<option value="2" selected>青森県</option>
<option value="3">秋田県</option>
<option value="4">岩手県</option>
</select>
</form>
<script>
function fncFrm4(){
alert(document.frm4.ken.value);
}
/*
//記述方法2
document.frm4.ken.onchange = function(){
alert(document.frm4.ken.value);
}
//記述方法3
document.frm4.ken.addEventListener("change",function(){
alert(document.frm4.ken.value);
});
*/
</script>
ラジオボタン（radio)
<form name="frm5">
<input type="radio" name="seibetsu" value="1" onchange="fncFrm5()" checked data-role="none">男性
<input type="radio" name="seibetsu" value="2" onchange="fncFrm5()" data-role="none">女性
</form>
<script>
function fncFrm5(){
for(var i=0;i<document.frm5.seibetsu.length;i++){
if(document.frm5.seibetsu[i].checked == true){
alert(document.frm5.seibetsu[i].value);
}
}
}
/*
//記述方法2
for(var i=0;i<document.frm5.seibetsu.length;i++){
document.frm5.seibetsu[i].onchange = function(){
for(var i=0;i<document.frm5.seibetsu.length;i++){
if(document.frm5.seibetsu[i].checked == true){
alert(document.frm5.seibetsu[i].value);
}
}
}
}
//記述方法3
for(var i=0;i<document.frm5.seibetsu.length;i++){
document.frm5.seibetsu[i].addEventListener("change",function(){
for(var i=0;i<document.frm5.seibetsu.length;i++){
if(document.frm5.seibetsu[i].checked == true){
alert(document.frm5.seibetsu[i].value);
}
}
});
}
*/
</script>
チェックボックス（checkbox)
<form name="frm6">
<input type="checkbox" name="flg" value="naiyo" checked onclick="fncFrm6()">内容を表示
<input type="checkbox" name="flg" value="gazo" onclick="fncFrm6()">画像を表示
</form>
<script>
function fncFrm6(){
for(var i=0;i<document.frm6.flg.length;i++){
if(document.frm6.flg[i].checked == true){
alert(document.frm6.flg[i].value);
}
}
}
/*
//記述方法2
for(var i=0;i<document.frm6.flg.length;i++){
document.frm6.flg[i].onclick = function(){
for(var i=0;i<document.frm6.flg.length;i++){
if(document.frm6.flg[i].checked == true){
alert(document.frm6.flg[i].value);
}
}
}
}
//記述方法3
for(var i=0;i<document.frm6.flg.length;i++){
document.frm6.flg[i].addEventListener("click",function(){
for(var i=0;i<document.frm6.flg.length;i++){
if(document.frm6.flg[i].checked == true){
alert(document.frm6.flg[i].value);
}
}
});
}
*/
</script>
ファイル（file)
<form name="frm7">
<input type="file" name="pic" value="" onclick="fncFrm7()">
</form>
<script>
function fncFrm7(){
alert(document.frm7.pic.value);
}
/*
//記述方法2
document.frm7.pic.onclick = function(){
alert(document.frm7.pic.value);
}
//記述方法3
document.frm7.pic.addEventListener("click",function(){
alert(document.frm7.pic.value);
});
*/
</script>
ボタン(button)／隠し文字列（hidden)
<form name="frm8">
<input type="hidden" name="no" value="abc">
<input type="button" name="btn" value="ボタン" onclick="fncFrm8()">
</form>
<script>
function fncFrm8(){
alert(document.frm8.no.value);
}
/*
//記述方法2
document.frm8.btn.onclick = function(){
alert(document.frm8.no.value);
}
//記述方法3
document.frm8.btn.addEventListener("click",function(){
alert(document.frm8.no.value);
});
*/
</script>
送信ボタン(submit)／リセットボタン（reset)
<form name="frm9">
<input type="submit" name="smt" value="送信" onclick="fncFrm9(this)" data-role="none" data-ajax="false">
<input type="reset" name="rst" value="リセット" onclick="fncFrm9(this)" data-role="none">
</form>
<script>
function fncFrm9(obj){
alert(obj.value);
//個別に取得
//alert(document.frm9.smt.value);
//alert(document.frm9.rst.value);
}
/*
//記述方法2
document.frm9.smt.onclick = function(){
alert(document.frm9.smt.value);
}
document.frm9.rst.onclick = function(){
alert(document.frm9.rst.value);
}
//記述方法3
document.frm9.smt.addEventListener("click",function(){
alert(document.frm9.smt.value);
});
document.frm9.rst.addEventListener("click",function(){
alert(document.frm9.rst.value);
});
*/
</script>