<html>
  <div class="Wrap">
    <form action="" class="Form" id="Form">
      <label for="num01"><input id="num01" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
      <label for="num01"><input id="num02" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
      <label for="num01"><input id="num03" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
      <label for="num01"><input id="num04" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
      <label for="num01"><input id="num05" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
      <label for="num01"><input id="num06" name="num" type="text" inputmode="numeric" maxlength="1" value=""></label>
    </form>
  </div>
</html>
    .Wrap {
      margin: 0 auto;
    }

    .Form {
      display: flex;
      margin-top: 50px;
      justify-content: center;
    }

    .Form label {
      margin: 0 15px;
      width: 40px;
    }

    .Form input {
      box-sizing: border-box;
      width: 100%;
      height: 50px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    window.addEventListener('DOMContentLoaded', (event) => {
      //target を決める
      const target = document.getElementById('Form');

      target.addEventListener('paste', (event) => {
        //クリップボードの文字列を取得して配列に入れる
        let numbers = Array.from(event.clipboardData.getData('text'));
        //inputを全て取得
        const inputBoxes = document.getElementsByName('num');
        //順番に値をいれる
        for (let i = 0; i < inputBoxes.length; i++) {
          inputBoxes[i].value = numbers[i];
        }
      });
    });
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.