<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.