Get value from dropdown in HTML panel

I was able to find a solution myself, but I do not download the value when changing the dropdown option but using the button. Maybe someone will use it.

html:

<div class= "ALL">
    <select id="dropDownValue">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
    </select>
<input id="inputValue"  type="text"  value="" size="4" maxlength="4" />      
<br>      
<button type="submit" onclick="getSelected();"> CONFIRM </button>   
</div>
    <script src="js/libs/CSInterface-4.0.0.js"></script>
    <script src="js/libs/jquery-2.0.2.min.js"></script>
    <script src="js/themeManager.js"></script>
    <script src="js/main.js"></script>

main.js:

var csInterface = new CSInterface();  
function getSelected() {  
  var col = document.getElementById("inputValue").value;   
  csInterface.evalScript("selected('" + col + "')"); 
  var col2 = document.getElementById("dropDownValue").value;   
  csInterface.evalScript("selected2('" + col2 + "')");   
}  
}  

hostscript.jsx:

function selected(col) {  
alert(col);
}  
function selected2(col2) {  
alert(col2);
}  

I would like to ask if it is worth creating panels in HTML5 or simply using UI? From what I see there are few guides on the connection of HTML5 and photoshop so it is hard to learn. What are the pros and cons of both solutions?