Vue forma kiritish maydonlari

Biz ushbu qo‘llanmada Vue Forms va v-model sahifalarida shakl kiritishning bir nechta misollarini ko‘rdik.

Ushbu sahifa Vue-da radio tugmalari, tasdiqlash qutilari, ochiladigan massiv va oddiy matn kiritish maydoni kabi ko‘proq shakl kiritish misollari to‘plamidir.

Radio tugmalari

Xuddi shu tanlovga tegishli bo‘lgan radio tugmalar bir xil nomga ega bo‘lishi kerak, shunda faqat bitta radio tugmachani tanlash mumkin.

Vue-dagi barcha kiritishlarda bo‘lgani kabi, biz radio tugmachasini kiritish qiymatini v-model bilan ushlaymiz, lekin value atributi ham <input type="radio"> tegida aniq o‘rnatilishi kerak.

Vue shaklida radio tugmalaridan shunday foydalanishimiz mumkin:

Misol

App.vue:

<template>
  <h1>Radio Buttons in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <p>What is your favorite animal?</p>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Cat"> Cat
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Dog"> Dog
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Turtle"> Turtle
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Moose"> Moose
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted choice:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inpVal: '',
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.inpVal) {
        this.inpValSubmitted = this.inpVal;
      }
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
  }
  label {
    display: block;
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>

Misolni ishga tushirish »

Belgilash katakchalari

Belgilash katakchalari kiritishlari (<input type="checkbox"> ) v-model bilan bir xil massivga ulanganda, belgilangan katakchalar uchun qiymatlar ushbu massivda yig‘iladi:

Misol

App.vue:

<template>
  <h1>Checkbox Inputs in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <p>What kinds of food do you like?</p>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Pizza"> Pizza
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Rice"> Rice
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Fish"> Fish
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Salad"> Salad
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      likeFoods: [],
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      this.inpValSubmitted = this.likeFoods;
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
  }
  label {
    display: block;
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>

Misolni ishga tushirish »

Ochiladigan massiv

Ochiladigan ro‘yxat ichida <option> teglari bo‘lgan <select> tegidan iborat.

Vue-da ochiladigan massivni ishlatishda biz <select> tegini v-model bilan bog‘lashimiz va <option> teglariga qiymat berishimiz kerak:

Misol

App.vue:

<template>
  <h1>Drop-down List in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <label for="cars">Choose a car:</label>
    <select  v-model="carSelected" id="cars">
      <option disabled value="">Please select one</option>
      <option>Volvo</option>
      <option>Saab</option>
      <option>Opel</option>
      <option>Audi</option>
    </select>
    <br><br>
    <input type="submit" value="Submit">
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carSelected: '',
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.carSelected) {
        this.inpValSubmitted = this.carSelected;
      }
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
  }
  label {
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>

Misolni ishga tushirish »

<select> tegidagi multiple atributi bilan ochiladigan ro‘yxat kengaytiriladi va biz bir nechta variantni tanlashimiz mumkin.

Bir nechta variantni tanlash uchun Windows foydalanuvchilari "ctrl" tugmasini, macOS foydalanuvchilari esa "buyruq" tugmasini bosishlari kerak.

Vue-da <select multiple> dan foydalanganda biz <select> tegini v-model bilan ulashimiz va <option> teglariga qiymat berishimiz kerak:

Misol

App.vue:

<template>
  <h1>Select Multiple in Vue</h1>
  <p>Depending on your operating system, use the 'ctrl' or the 'command' key to select multiple options.</p>
  <form @submit.prevent="registerAnswer">
    <label for="cars">Choose one or more cars:</label><br>
    <select  v-model="carsSelected" id="cars" multiple>
      <option>Volvo</option>
      <option>Saab</option>
      <option>Opel</option>
      <option>Audi</option>
      <option>Kia</option>
    </select>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carsSelected: [],
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.carsSelected) {
        this.inpValSubmitted = this.carsSelected;
      }
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button, select {
    margin: 10px;
    display: block;
  }
  label {
    width: 80px;
    padding: 5px;
  }
  label:hover {
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>

Misolni ishga tushirish »

Faqat o‘qish formasi kiritishlari

Shakl kiritishlarida v-modeldan foydalanish ikki tomonlama bog‘lanishni yaratadi, ya’ni Vue ma’lumotlar namunasi o‘zgarsa, kirish qiymati atributi ham o‘zgaradi.

<input type="file"> kabi faqat o‘qish uchun shakl kiritishlari uchun value atributini Vue ma’lumotlar misolidan o‘zgartirib bo‘lmaydi, shuning uchun biz v-model dan foydalana olmaymiz.

<input type="file"> kabi faqat o‘qish uchun shakl kiritishlari uchun Vue ma’lumotlar namunasini yangilaydigan usulni chaqirish uchun @change dan foydalanishimiz kerak:

Misol

App.vue:

<template>
  <h1>Input Type File</h1>
  <form @submit.prevent="registerAnswer">
    <label>Choose a file:
      <input @change="updateVal" type="file">
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileInp: null,
      inpValSubmitted: 'Not submitted yet'
    }
  },
  methods: {
    registerAnswer() {
      if(this.fileInp) {
        this.inpValSubmitted = this.fileInp;
      }
    },
    updateVal(e) {
      this.fileInp = e.target.value;
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
    margin: 10px;
    display: block;
  }
  #pAnswer {
    background-color: lightgreen;
    padding: 5px;
  }
</style>

Misolni ishga tushirish »

Ma’lumot: Yuqoridagi misolda yuborilgan fayl nomi oldida C:\fakepath\ fayl yo‘lini oladi. Bu zararli dastur foydalanuvchining fayl tuzilishini taxmin qilishiga yo‘l qo‘ymaslik uchun.

Boshqa shakl kiritishlari

Yuqorida aytib o‘tilgan shakl kiritishlari bilan biz qiymat atributi uchun qiymat berishimiz kerak edi, lekin quyidagi shakl kiritishlari bilan foydalanuvchi qiymat beradi:

<input type="color">
<input type="date">
<input type="datetime-local">
<input type="number">
<input type="password">
<input type="range">
<input type="search">
<input type="tel">
<input type="text">
<input type="time">
<textarea>

Foydalanuvchi ushbu turdagi shakl kiritishlari uchun qiymatni allaqachon berganligi sababli, Vue-da biz qilishimiz kerak bo‘lgan narsa kirishni v-modeli bilan ma’lumotlar xususiyatiga ulashdir.

Vue-da <input type="range"> dan qanday foydalanish kerak:

Misol

App.vue:

<form @submit.prevent="registerAnswer">
  <label>How tall are you?<br>
    <input v-model="heightInp" type="range" min="50" max="235"> {{ heightInp }} cm
  </label>
  <button type="submit">Submit</button>
</form>

Misolni ishga tushirish »

Vue-da <input type="color"> dan qanday foydalanish kerak:

Misol

App.vue:

<form @submit.prevent="registerAnswer">
  <label>Choose a color: 
    <input v-model="colorInp" type="color">
  </label>
  <button type="submit">Submit</button>
</form>

Misolni ishga tushirish »

Vue-da <textarea> dan qanday foydalanish kerak:

Misol

App.vue:

<form @submit.prevent="registerAnswer">
  <label>
    <p>What do you think about our product?</p> 
    <textarea v-model="txtInp" placeholder="Write something.." rows="4" cols="35"></textarea>
  </label>
  <button type="submit">Submit</button>
</form>

Misolni ishga tushirish »

Har xil turdagi HTML formalari qanday ishlashi haqida bizning HTML qo‘llanmamizda ko‘proq bilib oling.

Vue mashqlari

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish

Vue forma kiritish maydonlari

Radio tugmalari

Misol

Belgilash katakchalari

Misol

Ochiladigan massiv

Misol

Misol

Faqat o‘qish formasi kiritishlari

Misol

Boshqa shakl kiritishlari

Misol

Misol

Misol

Vue mashqlari

O‘zingizni mashqlar bilan sinab ko‘ring

Mashq:

W3Schools Pathfinder