fix(VSelect): Use hidden select for native form submissions

[ikushum]

fixes #21097

Description

This PR ensures

1. Screen readers read out selected item title instead of value
2. When performing native form submissions, the form data uses item value instead of title.

This is achieved by used a hidden <select and visible <input. The user and screen-readers interact with the visible <input. But when making native form submissions, the form data uses the hidden <select because it will contain the name attribute

Markup:

<template>
  <v-app>
    <v-container>
      <v-form ref="form">
        <v-select :items="selectItems" autocomplete="suppress" name="select" />

        <v-btn class="my-5" @click="refreshFormData()">Refresh form data</v-btn>
      </v-form>
      <pre>{{ formData }}</pre>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const form = ref()
  const formData = ref('')

  const selectItems = [
    { title: 'Item 1', value: 1 },
    { title: 'Item 2', value: 2 },
    { title: 'Item 3', value: 3 },
  ]

  function refreshFormData () {
    const fd = new FormData(form.value.$el)
    formData.value = JSON.stringify(fd.entries().toArray())
  }
</script>

[ikushum]

Related PR that targets this - #22331