როგორ დავწმინდოთ ფორმა ვებ-აპლიკაციაში?

Ֆորմայի դաշտերի մաքրման տարբեր մեթոդներ կան՝ կախված կոնտեքստից:

1. reset տիպի կոճակով ֆորման վերականգնել: HTML-ֆորմայում type="reset" կոճակի օգտագործումը ավտոմատ կերպով վերականգնում է ֆորմայի բոլոր տարրերը սկզբնական արժեքներին:

   <form id="myForm">
     <input type="text" name="username" value="Initial value">
     <input type="email" name="email">
     <button type="reset">Մաքրել</button>
   </form>
   

2. JavaScript-ով ծրագրային կերպով ֆորման վերականգնելը: Կարող եք կանչել reset() մեթոդը DOM-էլեմենտի վրա:

   const form = document.getElementById('myForm');
   form.reset(); // Ֆորման վերականգնում է սկզբնական արժեքներին
   

3. Յուրաքանչյուր դաշտը ձեռքով մաքրել JavaScript-ով: Լողավազանով անցնել ֆորմայի դաշտերը և նրանց արժեքները փոխել դատարկ տող կամ այլ սկզբնական արժեք:

   const form = document.getElementById('myForm');
   const inputs = form.querySelectorAll('input, textarea, select');
   
   inputs.forEach(input => {
     const type = input.type;
     const tagName = input.tagName.toLowerCase();
   
     if (type === 'text' || type === 'email' || type === 'password' || type === 'tel' || tagName === 'textarea') {
       input.value = '';
     } else if (type === 'checkbox' || type === 'radio') {
       input.checked = false;
     } else if (tagName === 'select') {
       input.selectedIndex = -1; // կամ սահմանել ըստ նախընտրած տարբերակի
     }
   });
   

4. Фреймворктордо (мисалы, React, Vue) форманы тазалоо: Форманын абалы компоненттер тарабынан башкарылса, тазалоо абалдын жаңыртылуусу аркылуу ишке ашырылат.

   • React (абалды колдонуу менен):

     import React, { useState } from 'react';
     
     function MyForm() {
       const [formData, setFormData] = useState({
         username: '',
         email: ''
       });
     
       const handleChange = (e) => {
         const { name, value } = e.target;
         setFormData({ ...formData, [name]: value });
       };
     
       const handleSubmit = (e) => {
         e.preventDefault();
         // Маалыматтарды жөнөтүү
         console.log(formData);
         // Форманы тазалоо
         setFormData({
           username: '',
           email: ''
         });
       };
     
       return (
         <form onSubmit={handleSubmit}>
           <input
             type="text"
             name="username"
             value={formData.username}
             onChange={handleChange}
           />
           <input
             type="email"
             name="email"
             value={formData.email}
             onChange={handleChange}
           />
           <button type="submit">Жөнөтүү</button>
           <button type="button" onClick={() => setFormData({ username: '', email: '' })}>Тазалоо</button>
         </form>
       );
     }
     

   • Vue (v-model колдонуу менен):

     <template>
       <form @submit.prevent="handleSubmit">
         <input type="text" v-model="formData.username">
         <input type="email" v-model="formData.email">
         <button type="submit">Жөнөтүү</button>
         <button type="button" @click="clearForm">Тазалоо</button>
       </form>
     </template>
     
     <script>
     export default {
       data() {
         return {
           formData: {
             username: '',
             email: ''
           }
         };
       },
       methods: {
         handleSubmit() {
           // Маалыматтарды жөнөтүү
           console.log(this.formData);
           this.clearForm(); // Жөнөтүүдөн кийин тазалоо
         },
         clearForm() {
           this.formData.username = '';
           this.formData.email = '';
         }
       }
     };
     </script>
     

Тандоо ыкмасы колдонмо түзүмүнө, колдонулган технологияларга жана функционалдык талаптарга жараша болот. Эң жөнөкөй ыкмалар — HTML reset жана JavaScript form.reset(). Көчмө колдонмолордо, абалдын башкаруусу аркылуу тазалоо — стандарттык практика.