Ինչպես մաքրել ձևը վեբ հավելվածում?

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

Ֆորմայի վերականգնում 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>
```
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; // կամ սահմանել ըստ նախընտրած տարբերակի
  }
});

Ֆրեյմվորկերում (օրինակ՝ 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(). Ավելի բարդ ծրագրերում, որտեղ վիճակը կառավարում են ֆրեյմվորկերը, մաքրման գործընթացը սովորաբար տեղի է ունենում վիճակի թարմացմամբ.