JavaScript フォーム要素にアクセスする
フォーム及びフォーム要素にアクセスする方法には様々あります。次のような方法で要素にアクセスすることができます。
document.forms[番号]
document.フォーム名document.forms[番号].elements[番号]
document.forms[番号].elements[番号][番号] //ラジオボタンの場合
document.forms[番号][番号]//〇はHTMLの要素
〇.getElementsById(ID名)
〇.getElementsByTagName(要素名)
〇.getElementsByName(名前)
〇.getElementsByClassName(要素名)
〇.querySelector(セレクタ)
〇.querySelectorAll(セレクタ) <body>
<script>
window.addEventListener("load" , function(){
var ele = document.getElementsByTagName("output")[0];
//フォームのiputボタンにgetElementById()でアクセス
var btn = document.getElementById("chkBtn");
//ボタンにイベントの割り当て
btn.addEventListener("click",function(evt){
//最初のフォーム要素
var f= document.forms[0];
//フォームのmethod属性にアクセス
ele.innerHTML = f.method + "<br>";
//elementsで最初の要素にアクセス
f.elements[0].value="JavaScript";
//2番目のラジオボタンを選択
f.elements["os"][1].checked = true;
//チェックボックスの選択状態を切り替え
f.myCheck.checked = !f.myCheck.checked;
//テキストエリアに文字を出力
document.querySelectorAll("textarea")[0].value="あいうえお";
});
}, false);
</script>
<form method="post">
<input type="text"><br>
<input type="radio" name="os">iOS<br>
<input type="radio" name="os">Android<br>
<input type="checkbox" name="myCheck" checked>確認済み<br>
<textarea rows="3" cols="20">ご意見</textarea><br>
<input type="button" value="確認ボタン" id="chkBtn">
</form>
<output></output>
</body>確認ボタンをクリックすると、フォームのmethodプロパティの値が表示され、ラジオボタンやチェックボックスの状態変化します。また、テキストフィールドやテキストエリア内に文字が出力されます。
