HTML page

The HTML page used to scan data can be configured with one or more scan fields. Below is an example:

        
      <html>
        
        <head>
          <title>BarCode Test</title>
          <!--
          <STYLE TYPE="text/css">
          body {
            color: #333;
          }
          @media (prefers-color-scheme: dark) {
            body {
              color: #ddd;
              background-color: #222;
          
          }
          -->
          </STYLE>
          <script type="text/javascript">
        
          function onscan(bardata) {
            alert( "Barcode result : " + bardata );
          }
              
          function startscan(barfield) {
            window.location = "readbarcode://"+barfield;
          }
        
          </script>
        </head>
        
        <body>
        <form action="https://www.w3schools.com/action_page.php" method="GET">

          <input id="barcodefield1" name="fname" /><br />
        
          <input id="barcodefield2" name="lname" /><br />
        
          <input onclick="startscan('barcodefield1')"
              type="button"
              value="Start scanning to field 1" />
        
        
          <input onclick="startscan('barcodefield2')"
          type="button"
          value="Start scanning 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 toolbar scan button, it is important to use the location URL readbarcode://. This name is fixed, and cannot be changed.

If the toolbar scan button is used, the scan data will be send to an input field name barcodefield1. This name is fixed, and cannot be changed.

In version 2.4, if there is not a barcodefield1 field, data is send to the first input field, which is not hidden.
The CSS Style definition is used to handle the light/dark mode device type selection started in iOS 13