Wie löscht man ein Formular in einer Webanwendung…

Die Reinigung der Formularfelder kann je nach Kontext auf verschiedene Weisen erfolgen:

Formular zurücksetzen mit einem Button vom Typ reset: Die Verwendung eines Buttons mit type="reset" in einem HTML-Formular setzt alle Elemente automatisch auf ihre Anfangswerte zurück.
```
<form id="myForm">
  <input type="text" name="username" value="Initialwert">
  <input type="email" name="email">
  <button type="reset">Löschen</button>
</form>
```

Programmgesteuertes Zurücksetzen mit JavaScript: Man kann die Methode reset() am DOM-Element des Formulars aufrufen.

const form = document.getElementById('myForm');
form.reset(); // Setzt das Formular auf die Anfangswerte zurück

Manuelles Löschen jedes Feldes mit JavaScript: Iterieren über die Felder des Formulars und Setzen ihrer Werte auf einen leeren String oder einen anderen Anfangswert.

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

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

  // Bestimmen des Feldtyps und entsprechendes Löschen
  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; // oder auf den Index der Standardoption setzen
  }
  // Zusätzliche Logik für andere Eingabetypen bei Bedarf
});

Felder in Frameworks (z.B. React, Vue) löschen: In Frameworks, in denen der Formularzustand durch Komponenten verwaltet wird, erfolgt das Löschen durch Aktualisierung des Zustands.

React (mit Zustand):

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();
    // Daten versenden
    console.log(formData);
    // Formular löschen
    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">Senden</button>
      <button type="button" onClick={() => setFormData({ username: '', email: '' })}>Löschen</button>
    </form>
  );
}

Vue (mit v-model):

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="formData.username">
    <input type="email" v-model="formData.email">
    <button type="submit">Senden</button>
    <button type="button" @click="clearForm">Löschen</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        email: ''
        // ... andere Felder
      }
    };
  },
  methods: {
    handleSubmit() {
      // Daten versenden
      console.log(this.formData);
      this.clearForm(); // Nach dem Senden löschen
    },
    clearForm() {
      this.formData.username = '';
      this.formData.email = '';
      // ... andere Felder zurücksetzen
    }
  }
};
</script>

Die Wahl der Methode hängt von der Struktur der Anwendung, den verwendeten Technologien und den funktionalen Anforderungen ab. Die einfachsten Methoden sind HTML reset und JavaScript form.reset(). In komplexeren Anwendungen mit Zustandsverwaltung durch Frameworks ist das Löschen durch Aktualisierung des Zustands die Standardpraxis.

Wie löscht man ein Formular in einer Webanwendung?