Design a HTML web page for barcode input

The HTML page used to receive barcode data can be configured with one or more scan fields. Below is an example with 2:
        
        <html>
        <head>
          <script type="text/javascript">
          function onscan(bardata) {
            alert( "Barcode result : " + bardata );
          }
          function startscan(barfield) {
            window.location = "readbarcode://"+barfield;
          }
          </script>
        </head>
        <body>
        <form action="http://www.w3schools.com/tags/demo_form_method.asp" method="GET">

          <h3>Enter Barcode:</h3>
          <input id="barcodefield1" /><br />
        
          <input id="barcodefield2" /><br />
        
          <input onclick="startscan('barcodefield1')"
              type="button"
              value="Scan to field 1" />
          <input onclick="startscan('barcodefield2')"
              type="button"
              value="Scan to field 2" />
              <input name="button" type="submit" style="font-size: 20px" value="Send data to server">
         </form>
        </body>
        </html>
        
    
Function onscan() is optional, and can be called, when a scan has been completed. Replace alert() with code updating the server with the scan code.

As to start a scan from the HTML page, and not using the menu "Scan or "123" functions, it is important to use the location URL readbarcode://. This name is fixed, and cannot be changed. Give the barcode input field as parameter to the call. In the example barcodefield1 and barcodefield2 are used.

If the menu "Scan or "123" functions are used, the scan data will be send to an input field name barcodefield1. This name is fixed, and cannot be changed.