<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>フォーム入力 テキストエリア</title>
<script>
function text_reset(){
document.getElementById('output_comment1').innerHTML = '';
document.getElementById('output_comment2').innerHTML = '';
document.getElementById('message').innerHTML = '';
}
function text_output(){
document.getElementById('output_comment1').innerHTML = '<dl><dt>formElementを用いてアクセス: </dt><dd>' + '' + '</dd></dl>';
document.getElementById('output_comment2').innerHTML = '<dl><dt>DOMを用いてアクセス: </dt><dd>' + '' + '</dd></dl>';
}
function text_submit(){
document.getElementById('message').innerHTML = '以上の内容を送信しました';
}
</script>
</head>
<body>
<h1>フォーム入力 テキストエリア</h1>
<form name="form_name">
<fieldset>
<legend>コメント</legend>
<textarea name="comment" id="comment" cols="40" rows="5" placeholder="自由に書いてや" onkeydown="text_output()"></textarea>
</fieldset>
<button type="button" onclick="text_submit()">決定</button>
<button type="reset" onclick="text_reset()">リセット</button>
</form>
<div style="width:25em;padding:0.1em 1em;box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0">
<div id="output_comment1"></div>
</div>
<div style="width:25em;padding:0.1em 1em;box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0">
<div id="output_comment2"></div>
</div>
<p id="message"></p>
</body>
</html>