This form is often used in many web questionnaires, and the most common one is the star rating of Taobao shopping. Here's a star rating form to be implemented by oneself.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Questionnaire Form Design</title>
<style>
#frm{
float: left;
border: 2px solid #aaa;
padding:10px;
border-radius: 8px;
}
#frm #submit{
background: url(img/11.jpg);
width: 112px;
height: 36px;
border: none;
cursor: pointer;
color:#fff;
font-size: 18px;
font-weight: bold;
float: left;
clear: left;
border-radius: 5px;
}
#frm .vote label{
float: left;
width: 150px;
padding:6px 0;
font-size: 14px;
font-weight: bold;
}
.score{
width: 30px;
margin:0;
float: left;
}
.vote{
float: left;
clear: left;
}
</style>
<script>
function overhandle(obj){
var fnode = obj.parentNode;
var imglist = fnode.getElementsByTagName('img');
for(var i=0;i<imglist.length;i++){
imglist[i].src = 'img/start0.png';
}
var node = obj;
var index = 0;
while(node = node.previousSibling){
if(node.nodeType == 1){
index ++;
}
}
node = obj;
for(;index>=2;){
if(node.nodeType == 1){
node.src = 'img/start1.png';
index--;
}
node = node.previousSibling;
}
}
function outhandle(obj){
var fnode = obj.parentNode;
var list = fnode.getElementsByTagName('input');
var imglist = fnode.getElementsByTagName('img');
for(var i=0;i<imglist.length;i++){
imglist[i].src = 'img/start0.png';
}
for(var i=0;i<list[0].value;i++){
imglist[i].src = 'img/start1.png';
}
}
function clickhandle(obj){
var fnode = obj.parentNode;
var list = fnode.getElementsByTagName('input');
var node = obj;
var index= 0;
while(node = node.previousSibling){
if(node.nodeType == 1){
index++;
}
}
list[0].value = index-1;
}
</script>
</head>
<body>
<form action="#" method="post" id="frm">
<div class="vote">
<label for="">Service Satisfaction</label>
<input type="hidden" value="0" name="answ1">
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
</div>
<div class="vote">
<label for="">Environmental Satisfaction of Bookstores</label>
<input type="hidden" value="0" name="answ2">
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
</div>
<div class="vote">
<label for="">Book Quality Satisfaction</label>
<input type="hidden" value="0" name="answ3">
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
<img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />
</div>
<input type="submit" id="submit" value="Confirm submission">
</form>
</body>
</html>Design sketch: 
Code analysis:
1. Mouse movement event processing: when an img tag onmouseover event occurs, the overhandle() function is executed. The function first obtains the parent node and sets the src attribute of all IMGs to img/start 0.png. Then all previous Sibling calculates the number of tag nodes (node type attribute 1 of the node is the tag node) before the onmouseover event occurs. Because the first two label nodes are label and input, the src attribute of the node from the third node until the current event is set to img/start1.png.
2. Mouse Click Event Processing: When an onclick event occurs on an img tag, the user selects the current "Star Rating" and then executes the clickhandle() function. The function first obtains the input tag under the parent node, then uses the previousSibling attribute to get the occurrence tag of the current event, and sets the value attribute of the input to "star rating" (that is, the number of img tags).
3. Mouse Move Out Event Processing: When an onmouseout event occurs on an img tag, the outhandle() function is executed. This function first gets the input tag under the parent node, because the mouse movement event must have happened before, so the src attribute of img may change, so now set src back to the correct value according to the value attribute of the input tag.