テキストボックス（text)
<form name="frm1">
<input type="text" name="kname" id="kname" value="テキストボックス" size="40" onclick="fncFrm1()" data-role="none">
</form>
<script>
function fncFrm1(){
alert(document.getElementById("kname").value);
}
/*
//記述方法2
document.getElementById("kname").onclick = function(){
alert(document.getElementById("kname").value);
}
//記述方法3
document.getElementById("kname").addEventListener("click",function(){
alert(document.getElementById("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" id="biko" cols="60" rows="10" onclick="fncFrm3()" data-role="none">テキストエリア</textarea>
</form>
<script>
function fncFrm3(){
alert(document.getElementById("biko").value);
}
/*
//記述方法2
document.getElementById("biko").onclick = function(){
alert(document.getElementById("biko").value);
}
//記述方法3
document.getElementById("biko").addEventListener("click",function(){
alert(document.getElementById("biko").value);
});
*/
</script>
セレクトボックス（select)
<form name="frm4">
<select name="ken" id="ken" data-role="none" 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.getElementById("ken").value);
}
/*
//記述方法2
document.getElementById("ken").onchange = function(){
alert(document.getElementById("ken").value);
}
//記述方法3
document.getElementById("ken").addEventListener("change",function(){
alert(document.getElementById("ken").value);
});
*/
</script>
ラジオボタン（radio)
<script>
function fncFrm5(){
for(var i=0;i<document.getElementsByClassName("seibetsu").length;i++){
if(document.getElementsByClassName("seibetsu")[i].checked == true){
alert(document.getElementsByClassName("seibetsu")[i].value);
}
}
}
/*
//記述方法2
for(var i=0;i<document.getElementsByClassName("seibetsu").length;i++){
document.getElementsByClassName("seibetsu")[i].onchange = function(){
for(var i=0;i<document.getElementsByClassName("seibetsu").length;i++){
if(document.getElementsByClassName("seibetsu")[i].checked == true){
alert(document.getElementsByClassName("seibetsu")[i].value);
}
}
}
}
//記述方法3
for(var i=0;i<document.getElementsByClassName("seibetsu").length;i++){
document.getElementsByClassName("seibetsu")[i].addEventListener("change",function(){
for(var i=0;i<document.getElementsByClassName("seibetsu").length;i++){
if(document.getElementsByClassName("seibetsu")[i].checked == true){
alert(document.getElementsByClassName("seibetsu")[i].value);
}
}
});
}
*/
</script>
チェックボックス（checkbox)
<form name="frm6">
<input type="checkbox" name="flg" class="flg" value="naiyo" checked onclick="fncFrm6()">内容を表示
<input type="checkbox" name="flg" class="flg" value="gazo" onclick="fncFrm6()">画像を表示
</form>
<script>
function fncFrm6(){
for(var i=0;i<document.getElementsByClassName("flg").length;i++){
if(document.getElementsByClassName("flg")[i].checked == true){
alert(document.getElementsByClassName("flg")[i].value);
}
}
}
/*
//記述方法2
for(var i=0;i<document.getElementsByClassName("flg").length;i++){
document.getElementsByClassName("flg")[i].onclick = function(){
for(var i=0;i<document.getElementsByClassName("flg").length;i++){
if(document.getElementsByClassName("flg")[i].checked == true){
alert(document.getElementsByClassName("flg")[i].value);
}
}
}
}
//記述方法3
for(var i=0;i<document.getElementsByClassName("flg").length;i++){
document.getElementsByClassName("flg")[i].addEventListener("click",function(){
for(var i=0;i<document.getElementsByClassName("flg").length;i++){
if(document.getElementsByClassName("flg")[i].checked == true){
alert(document.getElementsByClassName("flg")[i].value);
}
}
});
}
*/
</script>
ファイル（file)
<form name="frm7">
<input type="file" name="pic" id="pic" value="" onclick="fncFrm7()">
</form>
<script>
function fncFrm7(){
alert(document.getElementById("pic").value);
}
/*
//記述方法2
document.getElementById("pic").onclick = function(){
alert(document.getElementById("pic").value);
}
//記述方法3
document.getElementById("pic").addEventListener("click",function(){
alert(document.getElementById("pic").value);
});
*/
</script>
ボタン(button)／隠し文字列（hidden)
<form name="frm8">
<input type="hidden" name="no" id="no" value="abc">
<input type="button" name="btn" id="btn" value="ボタン" onclick="fncFrm8()">
</form>
<script>
function fncFrm8(){
alert(document.getElementById("no").value);
}
/*
//記述方法2
document.getElementById("btn").onclick = function(){
alert(document.getElementById("no").value);
}
//記述方法3
document.getElementById("btn").addEventListener("click",function(){
alert(document.getElementById("no").value);
});
*/
</script>
送信ボタン(submit)／リセットボタン（reset)
<form name="frm9">
<input type="submit" name="smt" id="smt" value="送信" onclick="fncFrm9(this)">
<input type="reset" name="rst" id="rst" value="リセット" onclick="fncFrm9(this)">
</form>
<script>
function fncFrm9(obj){
alert(obj.value);
//個別に取得
//alert(document.getElementById("smt").value);
//alert(document.getElementById("rst").value);
}
/*
//記述方法2
document.getElementById("smt").onclick = function(){
alert(document.getElementById("smt").value);
}
document.getElementById("rst").onclick = function(){
alert(document.getElementById("rst").value);
}
//記述方法3
document.getElementById("smt").addEventListener("click",function(){
alert(document.getElementById("smt").value);
});
document.getElementById("rst").addEventListener("click",function(){
alert(document.getElementById("rst").value);
});
*/
</script>