Veb tətbiqində formu necə təmizləmək olar?

Formun sahələrinin təmizlənməsi kontekstdən asılı olaraq müxtəlif üsullarla həyata keçirilə bilər:

reset tipli düymə ilə formu sıfırlamaq: HTML-formda type="reset" olan düymənin istifadəsi formun bütün elementlərini ilkin dəyərlərinə avtomatik olaraq sıfırlayır.

<form id="myForm">
  <input type="text" name="username" value="İlkin dəyər">
  <input type="email" name="email">
  <button type="reset">Təmizlə</button>
</form>

JavaScript ilə proqram təminatı ilə formu sıfırlamaq: DOM elementinin reset() metodunu çağırmaq mümkündür.
```
const form = document.getElementById('myForm');
form.reset(); // Formu ilkin dəyərlərə sıfırlayır
```

JavaScript ilə hər bir sahəni əl ilə təmizləmək: Form sahələrində iterasiya və onların dəyərlərini boş sətir və ya başqa başlanğıc dəyərinə təyin etmək.

const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input, textarea, select');

inputs.forEach(input => {
  const type = input.type;
  const tagName = input.tagName.toLowerCase();

  // Sahə növünü müəyyənləşdir və uyğun şəkildə təmizlə
  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; // və ya default seçimə təyin et
  }
  // Əlavə məntiq digər input növləri üçün
});

Framework-lərdə (məsələn, React, Vue) form sahələrinin təmizlənməsi: Formanın vəziyyəti komponentlər tərəfindən idarə olunursa, təmizləmə vəziyyətin yenilənməsi ilə həyata keçirilir.

React (vəziyyət istifadə etməklə):

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();
    // Məlumatların göndərilməsi
    console.log(formData);
    // Formu təmizləmək
    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">Göndər</button>
      <button type="button" onClick={() => setFormData({ username: '', email: '' })}>Təmizlə</button>
    </form>
  );
}

Vue (v-model istifadə etməklə):

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="formData.username">
    <input type="email" v-model="formData.email">
    <button type="submit">Göndər</button>
    <button type="button" @click="clearForm">Təmizlə</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        email: ''
        // ... digər sahələr
      }
    };
  },
  methods: {
    handleSubmit() {
      // Məlumatların göndərilməsi
      console.log(this.formData);
      this.clearForm(); // Göndərdikdən sonra təmizləmə
    },
    clearForm() {
      this.formData.username = '';
      this.formData.email = '';
      // ... digər sahələri sıfırla
    }
  }
};
</script>

Seçim metodundan asılıdır tətbiqin strukturu, istifadə olunan texnologiyalar və funksional tələblər. HTML reset və JavaScript form.reset() ən sadə olanlardır. Daha mürəkkəb tətbiqlərdə, vəziyyətin idarə olunması üçün vəziyyətin yenilənməsi standart praktika hesab olunur.