Значения атрибутов тегов нужно указывать в кавычках.
Большинство тегов обязательно нужно закрывать.
Мне, когда учился, преподаватели тоже говорили, что принято открывающий тег писать капсом.
Никогда не видел, чтобы так действительно делали.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>SCRIPT!</TITLE>
</HEAD>
<BODY>
<div id="clases">
<div>
Ник: <input type="text" data-target="char_login"/>
</div>
Выберете класс
<select data-target="char_class">
<optgroup label="Герои ближнего боя">
<option value="1">Рыцарь</option>
<option value="2">Варвар</option>
</optgroup>
<optgroup label="Герои дальнего боя">
<option value="3">Лучник</option>
</optgroup>
<optgroup label="Герои использующие волшебство">
<option value="4">Маг</option>
<option value="5">Чародей</option>
</optgroup>
</select>
<input type="button" value="Выбрать" id="choice"/>
</div>
<div class="char_info">
<div>
Ник: <span data-id="char_login"></span>
</div>
<div>
Класс: <span data-id="char_class"></span>
</div>
</div>
<script>
var d=document,m='querySelector';
d[m]('#choice').addEventListener('click',function(){
[].forEach.call(d[m+'All']('[data-target]'),function(node){
d[m]('[data-id="'+node.dataset.target+'"]').innerHTML=
node.tagName.toLowerCase()=='select'?
node[m]('option[value="'+node.value+'"]').innerHTML:
node.value;
});
});
</script>
</body>
</html>