Why does changing input submit and redirect to cart page?

[teilaiteilait]

<form action="/cart/add" method="post" class="add-to-cart-wrapper" data-productid="{{product.id}}">
          <input type="hidden" name="id" data-productid="{{product.id}}" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />

          <div class="add-to-cart">
            <button
                    class="upper pointer bg-green txt-white" type="submit" name="add" id="AddToCart"
                    >
              добавить в корзину
            </button>

          </div>
          <div class="price-wrapper">
            <div class="quantity-wrapper">
              <input type="number" id="Quantity"
                     name="quantity" value="1" min="1" pattern="[0-9]*"
                     class="product-form__input product-form__input--quantity" data-quantity-input
                     hidden />
              <button
                      onclick="decreaseQuantity(event)"
                      class="pointer reduce"
                      >
                <img
                     src="{{'Minimaize.svg' | asset_url}}"
                     alt="reduce icon"
                     width={{ image.width }} height={{ image.height }} loading="lazy" 
                     />
              </button>

              <div class="quantity" id="quantity">
                1
              </div>
              <button
                      onclick="increaseQuantity(event)"
                      class="pointer increase"
                      >
                <img
                     src="{{'Maximize.svg' | asset_url}}"
                     alt="increase icon"
                     width={{ image.width }} height={{ image.height }} loading="lazy" 
                     />
              </button>
            </div>
            <div class="price">{{ product.price | money}}</div>
          </div>
        </form>

why does on input change, all form is submiting and redirecting me to cart page?

[KetanKumar]

@teilaiteilait 

can you try this 

<form action="/cart/add" method="post" class="add-to-cart-wrapper">
          <input type="hidden" name="id" data-productid="{{product.id}}" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />

          <div class="add-to-cart">
            <button
                    class="upper pointer bg-green txt-white" type="submit" name="add" id="AddToCart"
                    >
              добавить в корзину
            </button>

          </div>
          <div class="price-wrapper">
            <div class="quantity-wrapper">
              <input type="number" id="Quantity"
                     name="quantity" value="1" min="1" pattern="[0-9]*"
                     class="product-form__input product-form__input--quantity" data-quantity-input
                     hidden />
              <button
                      onclick="decreaseQuantity(event)"
                      class="pointer reduce"
                      >
                <img
                     src="{{'Minimaize.svg' | asset_url}}"
                     alt="reduce icon"
                     width={{ image.width }} height={{ image.height }} loading="lazy" 
                     />
              </button>

              <div class="quantity" id="quantity">
                1
              </div>
              <button
                      onclick="increaseQuantity(event)"
                      class="pointer increase"
                      >
                <img
                     src="{{'Maximize.svg' | asset_url}}"
                     alt="increase icon"
                     width={{ image.width }} height={{ image.height }} loading="lazy" 
                     />
              </button>
            </div>
            <div class="price">{{ product.price | money}}</div>
          </div>
        </form>