<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>フォーム入力 セレクトボックス</title>
<script>
function select_reset(){
document.getElementById('output_blood1').innerHTML = '';
document.getElementById('output_blood2').innerHTML = '';
}
function select_output(){
document.getElementById('output_blood1').innerHTML = 'formElementを用いてアクセス: ' + '';
document.getElementById('output_blood2').innerHTML = 'DOMを用いてアクセス: ' + '';
}
</script>
</head>
<body>
<h1>フォーム入力 セレクトボックス</h1>
<form name="form_name">
<fieldset>
<legend>血液型</legend>
<select name="blood" id="blood" size="1" onchange="select_output()">
<option value="no_select">未選択・不明</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="O">O</option>
<option value="AB">AB</option>
</select>
</fieldset>
<button type="reset" onclick="select_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_blood1"></p>
<p id="output_blood2"></p>
</div>
</body>
</html>