Ohjeet lomakkeiden hallintaan.

WP Libre Form ohjeistus.html

<!-- Tämä on HTML kommentti, se ei näy sivustolla. 

Input-elementeillä (<input>, <select></select>, <textarea></textarea>) on muutama attribuutti jotka vaikuttavat siihen miten elementti käyttäytyy. 

Type-attribuutti nimensä mukaisesti vaikuttaa elementin tyyppiin. Yleisimmät tyypit ja mitä ne tekevät:

text: Oletus, tavallinen tekstikenttä, esimerkiksi nimeä varten. 
email: Sähköpostikenttä, jos haluat vastaajan sähköpostiosoitteen, käytä tätä. Yhdistettynä required attribuutin kanssa validoi että kentässä on sähköpostiosoite ennen lomakkeen tallentamista.
checkbox: Rasti ruutuun kenttä. Jos vastaaja voi valita monta vaihtoehtoa, käytä tätä. Huomaa että tämän tyypin kanssa name-attribuutissa pitää olla arvon jälkeen [] jotta kaikki vastaukset tallentuvat. 
radio: Valitse yksi kenttä. Antaa käyttäjän valita vain yhden vaihtoehdon monesta.

<input type="text">

Name-attribuutti on kentän nimi, ja pakollinen attribuutti. Kenttä tallennetaan tietokantaan tällä nimellä. Nimen pitää olla uniikki lomakkeen sisällä, älä käytä samaa arvoa monessa kentässä (poikkeuksena checkbox-kentät, kts. esimerkki). 

<input name="kentan_nimi">

Placeholder-attribuutti on tilapäinen teksti kentässä ohjeistamassa käyttäjää siitä mitä kenttään pitää syöttää. Placeholder attribuutti toimii vain <input> ja <textarea> elementeissä. 

<input type="text" placeholder="{{ Ohjeteksti }}">

Required-attribuutti merkkaa kentän pakolliseksi, eikä anna lähettää lomaketta ennen kuin kenttä on täytetty. Riippuen kentän tyypistä kentän arvoa voidaan myös validoida ennen lähetystä.

<input type="email" name="sposti" required> 

Lomakkeista on mahdollisuus tehdä monikielisiä näin: {{ Teksti }}
Kaarisulkujen sisällä oleva teksti käännetään automaattisesti kaikille sivuston kielille mikäli tekstille löytyy käännös. 

Älä tee näin, tämä ei tule toimimaan:
<input type="text" name="{{ kentan_nimi }}">

Vaan näin: 
<input type="text" name="kentan_nimi" placeholder="{{ Ohjeteksti }}">
<textarea name="viesti" placeholder="{{ Ohjeteksti }}">/textarea>
-->

<h2>Tavallinen tekstikenttä</h2>
<div class="fc-row">
  <label class="fc-1-1">
    <strong>{{ Nimi }}</strong>
    <input type="text" name="nimi">
  </label>
</div>

<h2>Sähköpostikenttä</h2>

<div class="fc-row">
  <label class="fc-1-1">
    <strong>{{ Email }}</strong>
    <input type="email" name="email">
  </label>
</div>

<h2>Pakollinen sähköposti kenttä</h2>
<div class="fc-row">
  <label class="fc-1-1">
    <strong>{{ Email }}</strong>
    <input type="email" name="email" required>
  </label>
</div>

<h2>Radiobutton / checkbox rykelmä</h2>
<div class="fc-row">
  <label class="fc-1-1">
    <input type="radio" name="field_name" value="value 1">
    {{ Button text }}
  </label><br>
  <label class="fc-1-1">
    <input type="radio" name="field_name" value="value 2">
    {{ Button text 2 }}
  </label>
</div>

<!-- Checkboxien avulla valitaan monta vaihtoehtoa -->

<div class="fc-row">
  <label class="fc-1-1">
    <input type="checkbox" name="field_name[]" value="value 1">
    {{ Button text }}
  </label><br>
  <label class="fc-1-1">
    <input type="checkbox" name="field_name[]" value="value 2">
    {{ Button text 2 }}
  </label>
</div>

<h2>Tekstialue</h2>
<div class="fc-row">
  <label class="fc-1-1">
    <strong>{{ Viesti }}</strong>
    <textarea name="viesti"></textarea>
  </label>
</div>

<h2>Lomakkeen lähetysnappi</h2>
<div class="fc-row">
  <label class="fc-1-1">
    <input type="submit" value="{{ Lähetä }}" class="button bg--tealish">
  </label>
</div>