<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>フォーム入力 テキスト</title>
<script>
function text_reset(){
document.getElementById('output_name1').innerHTML = '';
document.getElementById('output_name2').innerHTML = '';
}
function text_output(){
document.getElementById('output_name1').innerHTML = 'formElementを用いてアクセス: ' + '';
document.getElementById('output_name2').innerHTML = 'DOMを用いてアクセス: ' + '';
}
</script>
</head>
<body>
<h1>フォーム入力 テキスト</h1>
<form name="form_name">
<fieldset>
<legend>1行コメント</legend>
<label for="text_name">お名前</label><input type="text" name="name" id="name" size="15">
</fieldset>
<button type="button" onclick="text_output()">決定</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">
<p id="output_name1"></p>
<p id="output_name2"></p>
</div>
</body>
</html>