SvelteKit-lomakkeet: Progressiivisen parantamisen hallinta

Lomakkeet ovat verkon käyttäjävuorovaikutuksen selkäranka. Yksinkertaisista yhteydenottolomakkeista monimutkaisiin sovellusten työnkulkuihin, ne ovat välttämättömiä tiedon keräämisessä ja käyttäjien toimintojen mahdollistamisessa. SvelteKit, joka keskittyy suorituskykyyn ja kehittäjäkokemukseen, tarjoaa tehokkaat työkalut kestävien ja saavutettavien lomakkeiden rakentamiseen. Tämä opas tutkii, kuinka progressiivista parantamista voidaan hyödyntää luomaan lomakkeita, jotka toimivat kaikille, riippumatta heidän selaimensa ominaisuuksista tai verkkoyhteyden tilasta.

Mitä on progressiivinen parantaminen?

Progressiivinen parantaminen on web-kehitysstrategia, joka asettaa etusijalle toimivan, saavutettavan peruskokemuksen rakentamisen kaikille käyttäjille, ja sen jälkeen lisää asteittain edistyneitä ominaisuuksia ja parannuksia käyttäjille, joilla on kyvykkäämmät selaimet tai laitteet. Se on resilienssiä korostava lähestymistapa, joka varmistaa, että verkkosivustosi tai sovelluksesi pysyy käyttökelpoisena jopa teknisten rajoitusten edessä.

Lomakkeiden yhteydessä tämä tarkoittaa:

• Perustoiminnallisuus: Lomakkeen tulee olla käytettävissä perus-HTML:llä ja CSS:llä, jopa ilman JavaScriptiä.
• Saavutettavuus: Lomakkeen elementtien tulee olla asianmukaisesti merkittyjä ja apuvälineteknologioiden saavutettavissa.
• Parannettu kokemus: JavaScriptiä voidaan käyttää lisäämään ominaisuuksia, kuten reaaliaikaista validointia, dynaamisia lomakekenttiä ja parannettuja käyttöliittymäelementtejä.

Miksi tämä on tärkeää? Harkitse seuraavia skenaarioita:

• Käyttäjät, joilla JavaScript on pois päältä: Jotkut käyttäjät poistavat JavaScriptin käytöstä tietoturva- tai yksityisyyssyistä.
• Käyttäjät vanhemmilla selaimilla: Vanhemmat selaimet eivät välttämättä tue uusimpia JavaScript-ominaisuuksia.
• Käyttäjät hitailla tai epäluotettavilla internetyhteyksillä: JavaScript-tiedostojen lataaminen voi kestää kauan tai ne eivät ehkä lataudu lainkaan.
• Käyttäjät, jotka käyttävät apuvälineteknologioita: Ruudunlukijat luottavat semanttiseen HTML:ään tarjotakseen käyttökelpoisen kokemuksen.

Omaksumalla progressiivisen parantamisen varmistat, että lomakkeesi ovat mahdollisimman laajan yleisön käytettävissä.

SvelteKit ja lomakkeet: Täydellinen yhdistelmä

SvelteKitin arkkitehtuuri tekee siitä erinomaisesti soveltuvan progressiivisesti parannettujen lomakkeiden rakentamiseen. Se mahdollistaa lomaketoimintojen määrittelyn, jotka voidaan käsitellä sekä palvelimella että asiakasohjelmassa, antaen sinulle joustavuuden tarjota saumaton kokemus riippumatta siitä, onko JavaScript käytössä.

Palvelinpuolen renderöinti (SSR)

SvelteKitin palvelinpuolen renderöintiominaisuudet ovat ratkaisevan tärkeitä progressiivisen parantamisen kannalta. Kun käyttäjä lähettää lomakkeen ilman JavaScriptiä, lomaketiedot lähetetään palvelimelle, jossa ne voidaan käsitellä ja validoida. Palvelin voi sitten renderöidä uuden sivun lomakkeen lähetyksen tuloksilla, tarjoten perus-, mutta toimivan kokemuksen.

Asiakaspuolen hydraatio

Kun JavaScript on käytössä, SvelteKitin asiakaspuolen hydraatio-ominaisuus ottaa ohjat. Palvelimen renderöimä HTML "hydratoidaan" JavaScriptillä, mikä mahdollistaa interaktiivisten ominaisuuksien lisäämisen ja käyttökokemuksen parantamisen. Tämä sisältää:

• Reaaliaikainen validointi: Anna välitöntä palautetta käyttäjille heidän täyttäessään lomaketta.
• Dynaamiset lomakekentät: Lisää tai poista lomakekenttiä käyttäjän syötteen perusteella.
• Parannetut käyttöliittymäelementit: Käytä JavaScriptiä parantamaan lomake-elementtien ulkonäköä ja toiminnallisuutta.

Progressiivisesti parannetun lomakkeen rakentaminen SvelteKitissä

Käydään läpi esimerkki yksinkertaisen yhteydenottolomakkeen rakentamisesta SvelteKitissä, demonstroiden progressiivisen parantamisen periaatteita.

1. Perus-HTML-lomake

Luo ensin perus-HTML-lomake SvelteKit-reitille (esim. `src/routes/contact/+page.svelte`):

            <form method="POST" action="?/submit">
  <label for="name">Nimi:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Sähköposti:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Viesti:</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Lähetä viesti</button>
</form>
            

              
                Copy
              
            
          

Avainkohdat:

• `method="POST"`: Määrittää, että lomaketiedot tulee lähettää POST-metodilla.
• `action="?/submit"`: Määrittää toiminnon, joka suoritetaan, kun lomake lähetetään. SvelteKitissä `?/submit` on käytäntö lomaketoiminnon määrittämiseksi saman reitin sisällä.
• `required`-attribuutti: Varmistaa, että kentät ovat pakollisia ennen lähetystä (selain hoitaa tämän, jos JavaScript on pois päältä).
• Label-elementit: Jokainen syötekenttä on merkitty oikein saavutettavuuden vuoksi.

2. Palvelinpuolen lomaketoiminnon määrittely

Luo seuraavaksi `+page.server.js`-tiedosto samaan hakemistoon määrittääksesi palvelinpuolen lomaketoiminnon:

            import { fail } from '@sveltejs/kit';

/** @type {import('./$types').Actions} */
export const actions = {
  submit: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name');
    const email = data.get('email');
    const message = data.get('message');

    if (!name) {
      return fail(400, { name: { missing: true } });
    }

    if (!email) {
      return fail(400, { email: { missing: true } });
    }

    if (!message) {
      return fail(400, { message: { missing: true } });
    }

    // Basic email validation
    if (!/^[-.\w]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
      return fail(400, { email: { invalid: true } });
    }

    // Simulate sending the email
    console.log('Name:', name);
    console.log('Email:', email);
    console.log('Message:', message);

    return { success: true };
  }
};

            

              
                Copy
              
            
          

Avainkohdat:

• `actions`-olio: Tämä olio sisältää reitin lomaketoiminnot.
• `submit`-toiminto: Tätä funktiota kutsutaan, kun lomake lähetetään.
• `request.formData()`: Hakee lomaketiedot pyynnöstä.
• Validointi: Koodi validoi lomaketiedot palvelimella. Jos virheitä ilmenee, se palauttaa `fail`-vastauksen virheilmoituksilla.
• `fail`-funktio: Tämän funktion tarjoaa `@sveltejs/kit` ja sitä käytetään virhevastauksen palauttamiseen tilakoodin ja virhedatan kanssa.
• Onnistumisvastaus: Jos lomaketiedot ovat kelvollisia, koodi simuloi sähköpostin lähettämistä ja palauttaa `success`-vastauksen.

3. Validointivirheiden näyttäminen

Voit näyttää validointivirheet Svelte-komponentissa käyttämällä `form`-proppia, joka välitetään automaattisesti komponentille, kun lomaketoiminto palauttaa `fail`-vastauksen. Lisää seuraava koodi tiedostoon `src/routes/contact/+page.svelte`:

            <script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

<form method="POST" action="?/submit">
  <label for="name">Nimi:</label>
  <input type="text" id="name" name="name" required>
  {#if data?.form?.name?.missing}
    <p class="error">Nimi on pakollinen.</p>
  {/if}

  <label for="email">Sähköposti:</label>
  <input type="email" id="email" name="email" required>
  {#if data?.form?.email?.missing}
    <p class="error">Sähköposti on pakollinen.</p>
  {/if}
  {#if data?.form?.email?.invalid}
    <p class="error">Sähköposti on virheellinen.</p>
  {/if}

  <label for="message">Viesti:</label>
  <textarea id="message" name="message" required></textarea>
  {#if data?.form?.message?.missing}
    <p class="error">Viesti on pakollinen.</p>
  {/if}

  <button type="submit">Lähetä viesti</button>

  {#if data?.success}
    <p class="success">Viesti lähetetty onnistuneesti!</p>
  {/if}
</form>

<style>
  .error {
    color: red;
  }
  .success {
    color: green;
  }
</style>
            

              
                Copy
              
            
          

Avainkohdat:

• `export let data`: Tämä ilmoittaa `data`-nimisen propin, joka vastaanottaa palvelimelta välitetyn datan.
• `data?.form`: Tämä käyttää turvallisesti `data`-olion `form`-ominaisuutta. `?`-operaattoria käytetään valinnaiseen ketjutukseen estämään virheitä, jos `data` tai `form` ovat määrittelemättömiä.
• Ehdollinen renderöinti: `{#if}`-lohkot renderöivät virheilmoitukset ehdollisesti palvelimelta saadun datan perusteella.
• Onnistumisviesti: Onnistumisviesti näytetään, jos `success`-ominaisuuden arvo on `true`.

Tässä vaiheessa lomake on toimiva jopa ilman JavaScriptiä. Jos poistat JavaScriptin käytöstä selaimessasi ja lähetät lomakkeen, sinun pitäisi nähdä validointivirheet oikein näytettyinä.

4. Asiakaspuolen parannusten lisääminen

Lisätään nyt joitakin asiakaspuolen parannuksia käyttökokemuksen parantamiseksi. Voimme lisätä reaaliaikaisen validoinnin ja estää lomakkeen lähettämisen, jos siinä on virheitä. Tämä vaatii JavaScriptiä Svelte-komponentissa.

            <script>
  /** @type {import('./$types').PageData} */
  export let data;

  let nameError = null;
  let emailError = null;
  let messageError = null;

  function validateForm() {
    nameError = null;
    emailError = null;
    messageError = null;

    let isValid = true;

    if (!$name) {
      nameError = 'Nimi on pakollinen.';
      isValid = false;
    }

    if (!$email) {
      emailError = 'Sähköposti on pakollinen.';
      isValid = false;
    } else if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($email)) {
      emailError = 'Sähköposti on virheellinen.';
      isValid = false;
    }

    if (!$message) {
      messageError = 'Viesti on pakollinen.';
      isValid = false;
    }

    return isValid;
  }

  /** @type {import('svelte/store').Writable<string>} */
  import { writable } from 'svelte/store';
  const name = writable('');
  const email = writable('');
  const message = writable('');

  async function handleSubmit(event) {
    if (!validateForm()) {
      event.preventDefault(); // Prevent the form from submitting
      return;
    }

    // If the form is valid, let SvelteKit handle the submission
  }

  $: $name, $email, $message // Trigger re-render when name, email, or message changes

</script>

<form method="POST" action="?/submit" on:submit={handleSubmit}>
  <label for="name">Nimi:</label>
  <input type="text" id="name" name="name" bind:value={$name} required>
  {#if nameError || data?.form?.name?.missing}
    <p class="error">{nameError || 'Nimi on pakollinen.'}</p>
  {/if}

  <label for="email">Sähköposti:</label>
  <input type="email" id="email" name="email" bind:value={$email} required>
  {#if emailError || data?.form?.email?.missing || data?.form?.email?.invalid}
    <p class="error">{emailError || (data?.form?.email?.missing ? 'Sähköposti on pakollinen.' : 'Sähköposti on virheellinen.')}</p>
  {/if}

  <label for="message">Viesti:</label>
  <textarea id="message" name="message" bind:value={$message} required></textarea>
  {#if messageError || data?.form?.message?.missing}
    <p class="error">{messageError || 'Viesti on pakollinen.'}</p>
  {/if}

  <button type="submit">Lähetä viesti</button>

  {#if data?.success}
    <p class="success">Viesti lähetetty onnistuneesti!</p>
  {/if}
</form>

<style>
  .error {
    color: red;
  }
  .success {
    color: green;
  }
</style>
            

              
                Copy
              
            
          

Avainkohdat:

• Svelte Storet: Käytetään kirjoitettavia storeja (`name`, `email`, `message`) lomakkeen syötekenttien arvojen hallintaan.
• `bind:value`: Tämä direktiivi sitoo syötekenttien arvot vastaaviin Svelte storeihin. Mikä tahansa muutos syötekentässä päivittää automaattisesti storen arvon ja päinvastoin.
• `on:submit={handleSubmit}`: Tätä tapahtumankäsittelijää kutsutaan, kun lomake lähetetään.
• `validateForm()`: Tämä funktio suorittaa asiakaspuolen validoinnin ja asettaa virheilmoitukset.
• `event.preventDefault()`: Tämä estää lomakkeen lähettämisen, jos siinä on virheitä.
• Virheilmoitusten näyttö: Virheilmoitukset näytetään sekä asiakas- että palvelinpuolen validoinnin perusteella. Tämä varmistaa, että käyttäjä näkee virheet, vaikka JavaScript olisi pois päältä tai ei latautuisi.

5. JavaScript-virheiden sulava käsittely

Asiakaspuolen validoinnista huolimatta on tärkeää käsitellä mahdolliset JavaScript-virheet sulavasti. Jos JavaScript ei lataudu tai suoritu oikein, haluat silti lomakkeen olevan käyttökelpoinen. Lomake toimii jo ilman JavaScriptiä palvelinpuolen toiminnon ansiosta. Harkitse virheiden kirjaamisen lisäämistä asiakaspuolen koodiisi seurataksesi mahdollisia JavaScript-virheitä, joita saattaa ilmetä tuotannossa. Työkalut, kuten Sentry tai Bugsnag, voivat auttaa sinua seuraamaan ja ratkaisemaan JavaScript-virheitä reaaliajassa.

Parhaat käytännöt SvelteKit-lomakkeille progressiivisella parantamisella

• Aloita HTML:llä: Aloita aina rakentamalla toimiva HTML-lomake asianmukaisella semanttisella merkinnällä ja saavutettavuusnäkökohdilla.
• Palvelinpuolen validointi: Validoi aina lomaketiedot palvelimella, vaikka validoisit ne myös asiakaspuolella. Tämä on ratkaisevan tärkeää turvallisuuden ja datan eheyden kannalta.
• Asiakaspuolen parannus: Käytä JavaScriptiä parantamaan käyttökokemusta, mutta varmista, että lomake pysyy käyttökelpoisena ilman sitä.
• Saavutettavuus: Kiinnitä erityistä huomiota saavutettavuuteen. Käytä oikeita labeleita, ARIA-attribuutteja ja näppäimistönavigointia varmistaaksesi, että lomakkeesi ovat kaikkien käytettävissä. Työkalut, kuten Axe DevTools, voivat auttaa tunnistamaan saavutettavuusongelmia.
• Virheiden käsittely: Käsittele JavaScript-virheet sulavasti ja anna informatiivisia virheilmoituksia käyttäjälle.
• Suorituskyky: Optimoi JavaScript-koodisi varmistaaksesi, että se latautuu ja suorittuu nopeasti. Käytä koodin jakamista (code splitting) ja laiskaa latausta (lazy loading) vähentääksesi sovelluksesi alkulatausaikaa.
• Testaus: Testaa lomakkeesi perusteellisesti sekä JavaScriptin kanssa että ilman sitä varmistaaksesi, että ne toimivat odotetusti kaikissa skenaarioissa. Käytä automatisoituja testaustyökaluja regressioiden havaitsemiseen.
• Kansainvälistäminen (i18n): Jos sovelluksesi on suunnattu maailmanlaajuiselle yleisölle, harkitse lomakkeidesi kansainvälistämistä. Käytä kirjastoa, kuten `svelte-i18n`, käännösten käsittelyyn. Kiinnitä huomiota erilaisiin päivämäärä- ja numeromuotoihin eri kielialueilla.
• Tietoturva: Ole tietoinen yleisistä verkkoturvallisuuden haavoittuvuuksista, kuten sivustojen välisestä komentosarjakoodauksesta (XSS) ja sivustojen välisestä pyyntöväärennöksestä (CSRF). Puhdista käyttäjän syöte ja käytä asianmukaisia tietoturvaotsakkeita sovelluksesi suojaamiseksi.
• Käyttökokemus (UX): Suunnittele lomakkeesi käyttäjä mielessäsi. Tee niistä helposti ymmärrettäviä ja käytettäviä. Tarjoa selkeitä ohjeita ja hyödyllistä palautetta. Harkitse progressiivisen paljastamisen käyttöä näyttääksesi vain sen tiedon, joka on käyttäjälle kulloinkin oleellista.

Edistyneet tekniikat

JavaScriptin käyttö lomakkeen lähetyksen parantamiseen

Sen sijaan, että luottaisit oletusarvoiseen lomakkeen lähetyskäyttäytymiseen, voit käyttää JavaScriptiä siepataksesi lomakkeen lähetyksen ja lähettääksesi tiedot palvelimelle `fetch`-toiminnolla. Tämä mahdollistaa saumattomamman käyttökokemuksen, kuten latausindikaattorin näyttämisen lomakkeen lähetyksen aikana ja sivun päivittämisen ilman koko sivun uudelleenlatausta.

            async function handleSubmit(event) {
  event.preventDefault(); // Prevent default form submission

  if (!validateForm()) {
    return;
  }

  try {
    const formData = new FormData(event.target);
    const response = await fetch(event.target.action, {
      method: 'POST',
      body: formData,
      headers: {
        'X-Requested-With': 'XMLHttpRequest' // Indicate that this is an AJAX request
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();

    if (data.success) {
      // Handle success
      console.log('Form submitted successfully!');
    } else {
      // Handle errors
      console.error('Form submission failed:', data);
    }
  } catch (error) {
    console.error('There was an error submitting the form:', error);
  }
}

            

              
                Copy
              
            
          

Avainkohdat:

• `event.preventDefault()`: Estää oletusarvoisen lomakkeen lähetyskäyttäytymisen.
• `FormData`: Luo `FormData`-olion lomaketiedoista.
• `fetch`: Lähettää lomaketiedot palvelimelle `fetch`-toiminnolla.
• `X-Requested-With`-otsake: Tätä otsaketta käytetään ilmaisemaan, että pyyntö on AJAX-pyyntö.
• Virheiden käsittely: Koodi käsittelee mahdolliset virheet lomakkeen lähetysprosessin aikana.

Dynaamiset lomakekentät

Voit käyttää JavaScriptiä lisätäksesi tai poistaaksesi lomakekenttiä dynaamisesti käyttäjän syötteen perusteella. Tämä voi olla hyödyllistä luotaessa lomakkeita, jotka mukautuvat käyttäjän tarpeisiin.

Esimerkki: Dynaamisen määrän sähköpostiosoitteita lisääminen:

            <script>
  import { writable } from 'svelte/store';

  const emailAddresses = writable(['']);

  function addEmailAddress() {
    emailAddresses.update(emails => [...emails, '']);
  }

  function removeEmailAddress(index) {
    emailAddresses.update(emails => emails.filter((_, i) => i !== index));
  }
</script>

<div>
  {#each $emailAddresses as email, index}
    <div>
      <label for="email-{index}">Sähköposti {index + 1}:</label>
      <input type="email" id="email-{index}" bind:value={$emailAddresses[index]}>
      <button type="button" on:click={() => removeEmailAddress(index)}>Poista</button>
    </div>
  {/each}

  <button type="button" on:click={addEmailAddress}>Lisää sähköpostiosoite</button>
</div>
            

              
                Copy
              
            
          

Avainkohdat:

• `emailAddresses`-store: Tämä store sisältää taulukon sähköpostiosoitteita.
• `addEmailAddress()`: Tämä funktio lisää uuden sähköpostiosoitteen taulukkoon.
• `removeEmailAddress()`: Tämä funktio poistaa sähköpostiosoitteen taulukosta.
• `{#each}`-lohko: Tämä lohko iteröi sähköpostiosoitteiden yli ja renderöi syötekentän jokaiselle.
• `bind:value`: Tämä direktiivi sitoo syötekentän arvon vastaavaan sähköpostiosoitteeseen taulukossa. *Huom: Suora sitominen taulukon elementteihin storen sisällä vaatii huolellisuutta. Harkitse vankemman tilanhallintaratkaisun käyttöä monimutkaisissa dynaamisissa lomakkeissa.*

Integrointi kolmannen osapuolen palveluihin

Voit integroida SvelteKit-lomakkeesi kolmannen osapuolen palveluihin, kuten sähköpostimarkkinointialustoihin, CRM-järjestelmiin tai maksuyhdyskäytäviin. Tämä voidaan tehdä käyttämällä palvelinpuolen lomaketoimintoja.

Esimerkki: Lomaketietojen lähettäminen sähköpostimarkkinointialustalle:

            // +page.server.js
import { fail } from '@sveltejs/kit';

/** @type {import('./$types').Actions} */
export const actions = {
  submit: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name');
    const email = data.get('email');

    // Validate the form data

    try {
      // Send the data to the email marketing platform
      const response = await fetch('https://api.example.com/subscribe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY'
        },
        body: JSON.stringify({
          name,
          email
        })
      });

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

      // Handle success
      return { success: true };
    } catch (error) {
      // Handle errors
      console.error('Error subscribing to email list:', error);
      return fail(500, { message: 'Failed to subscribe. Please try again later.' });
    }
  }
};

            

              
                Copy
              
            
          

Avainkohdat:

• `fetch`: Lähettää lomaketiedot sähköpostimarkkinointialustalle `fetch`-toiminnolla.
• API-avain: Koodi sisältää API-avaimen tunnistautumiseen sähköpostimarkkinointialustan kanssa. *Tärkeää: Älä koskaan paljasta API-avaimiasi suoraan asiakaspuolen koodissa. Käytä ympäristömuuttujia tai turvallista salaisuuksien hallintajärjestelmää.*
• Virheiden käsittely: Koodi käsittelee mahdolliset virheet API-pyynnön aikana.

Yhteenveto

Saavutettavien ja kestävien lomakkeiden rakentaminen on ratkaisevan tärkeää positiivisen käyttökokemuksen luomisessa. SvelteKit, joka keskittyy suorituskykyyn ja kehittäjäkokemukseen, tarjoaa tarvittavat työkalut lomakkeiden rakentamiseen, jotka toimivat kaikille, riippumatta heidän selaimensa ominaisuuksista tai verkkoyhteyden tilasta. Omaksumalla progressiivisen parantamisen voit varmistaa, että lomakkeesi ovat mahdollisimman laajan yleisön käytettävissä ja että sovelluksesi pysyy kestävänä teknisten haasteiden edessä. Tämä opas on tarjonnut kattavan yleiskatsauksen siitä, kuinka rakentaa progressiivisesti parannettuja lomakkeita SvelteKitissä, kattaen kaiken perus-HTML-lomakkeista edistyneisiin tekniikoihin, kuten dynaamisiin lomakekenttiin ja kolmannen osapuolen integraatioihin. Noudattamalla näitä parhaita käytäntöjä voit luoda lomakkeita, jotka eivät ole ainoastaan toimivia ja saavutettavia, vaan myös tarjoavat saumattoman ja nautinnollisen käyttökokemuksen.

Lisämateriaalia

• SvelteKit-dokumentaatio
• MDN Web Docs: HTML-lomakkeet
• A11y-projekti
• Web Accessibility Initiative (WAI)