Πώς καθαρίζετε μια φόρμα σε μια web εφαρμογή…

Ο καθαρισμός των πεδίων της φόρμας μπορεί να υλοποιηθεί με διάφορους τρόπους, ανάλογα με το πλαίσιο:

Επαναφορά φόρμας με κουμπί τύπου reset: Η χρήση ενός κουμπιού με type="reset" σε μια HTML φόρμα επαναφέρει αυτόματα όλα τα στοιχεία της φόρμας στις αρχικές τους τιμές.
```
<form id="myForm">
  <input type="text" name="username" value="Αρχική τιμή">
  <input type="email" name="email">
  <button type="reset">Καθαρισμός</button>
</form>
```
Προγραμματικός καθαρισμός φόρμας με JavaScript: Μπορείτε να καλέσετε τη μέθοδο reset() στο DOM στοιχείο της φόρμας.
```
const form = document.getElementById('myForm');
form.reset(); // Επαναφέρει τη φόρμα στις αρχικές τιμές
```

Χειροκίνητος καθαρισμός κάθε πεδίου φόρμας με 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; // ή ορισμός στην προεπιλεγμένη επιλογή
  }
  // Πρόσθετη λογική για άλλους τύπους εισόδων αν χρειάζεται
});

Καθαρισμός πεδίων φόρμας σε frameworks (π.χ., React, Vue): Σε frameworks όπου η κατάσταση της φόρμας διαχειρίζεται από συστατικά, ο καθαρισμός επιτυγχάνεται με ενημέρωση της κατάστασης.

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(). Σε πιο πολύπλοκες εφαρμογές με διαχείριση κατάστασης μέσω frameworks, η καθαριότητα μέσω ενημέρωσης της κατάστασης είναι η τυπική πρακτική.

Πώς καθαρίζετε μια φόρμα σε μια web εφαρμογή;