a0010054<br><br><br><br><br><br>

<!--https://programmercollege.jp/column/17194/-->


  <form method="post">

■ボタン押したら<br>
	  <label for="product_num">商品コード<span class="necessary">*</span></label>
    <input type="text" name="商品1：商品コード" id="product_num" placeholder="例）a0020054（8桁）" required><br><br>
    <input type="submit">
	  
 <br><br>

<!--画像：スラッグ-->
<img src="https://sign-product.net/meishi/wp-content/themes/sign/images/product//01.jpg" alt="">
<!--こっちでもOK-->
<!--https://qiita.com/taishi41228/items/6e4f08aebf88c54e372a-->
<br><br>
<img src="https://sign-product.net/meishi/wp-content/themes/sign/images/product//01.jpg" alt="">

	 
<br><br><br><br>
■入力があったら別の場所に表示<br>	  
<!--https://1-notes.com/javascript-get-form-values-in-real-time/-->	  
<input type="text" id="text_form" value="">
<p id="output"></p>
<script>
let text_form = document.getElementById('text_form');
let output = document.getElementById('output');

timestamp = 0;

function update(){
  
  timestamp++;
  window.requestAnimationFrame(update);
  
  if (timestamp % 10 == 0 ){
    output.innerHTML = text_form.value;
  }
  
}
update();
</script>

<!--▼-->
<br><br><br><br>
■
<!--https://ja.stackoverflow.com/questions/52937/url%E5%85%A5%E5%8A%9B%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%9F%E3%82%89%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E4%B8%8B%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E8%A1%A8%E7%A4%BA-->
  <script>
//    $(function(){
//      $("#selfile2").on("change", function(evt){
//        console.log(this.value);
//        $("#bg2").append("<img src='" + this.value + "'>");
//      });
//    });
  </script>
<!--  <input type="text" id="selfile2"><br>
	  <div id="bg2"></div>-->
	  
<!--▼-->
<br><br><br><br>
■
<script>

</script>
<!--▼-->
<br><br><br><br>
■
<script>
</script>
	  
</form>