Formulier

[lerrie]

Ik heb een formulier voor een website gemaakt. Elk tekst vak staat het gegeven in welke de gast erin moet typen. Ik heb dus naam, email en vraag. Als mensen het vakje naam aan klikken dan verdwijnt ''Naam" en kunnen mensen typen. Alleen nu is het probleem dat als ik er niks neer zet dat "Naam" niet terug komt, maar het hokje leeg blijft. Hoe kan ik er voor zorgen dat als er niks wordt ingevuld dat dan "Naam" of "Email" weer in het vakje komt te staan!

Dit is de code:

<label for="naam"></label>
          <input name="naam" type="text" id="naam" onfocus="this.value='';" value="Naam" size="32"/>
        </h6></td>
      </tr>
      <tr>
        <td><h6>
          <label for="onderwerp"></label>
          <input name="onderwerp" type="text" id="onderwerp" onfocus="this.value='';" value="Email adres" size="32"/>
        </h6></td>
      </tr>
      <tr>
        <td><h6>
          <label for="vraag"></label>
          <textarea name="vraag" id="vraag" onfocus="this.value='';" cols="25" rows="4">Uw vraag</textarea>
        </h6></td>
      </tr>
      <tr>
        <td><input type="submit" name="verzend" id="verzend" value="Verzend" /></td>
      </tr>
    </table>
  </form>

Groeten

 

[csshunter]

Hoi lerrie,
Je hebt nu steeds:

<input ... onfocus="this.value='';">

Daarmee verdwijnt de begintekst mooi als je in een vakje gaat staan.

• Voorbeeld 1: http://developerscorner.nl/csshunter/tests/form-velden-1.htm

Maar er gebeurt méér! Als je iets in een vakje getikt hebt, dan een ander vakje gaat intikken, en vervolgens bedenkt dat er in het eerste vakje nog een tikfoutje zit ...
... en je klikt dan in het vakje met het tikfoutje ...
... dan is niet alleen je tikfoutje weg, maar alles wat er al in dat vakje stond. Bijzonder onaangenaam als je bv. al bijna je hele vraag had ingetikt, en daar later nog iets aan toe wilt voegen.

Dus: alleen als de begintekst er staat, moet deze verdwijnen en het vakje leeg worden; als er iets anders staat, dan niet.
Daar maken we dan een voorwaarde van, bijvoorbeeld voor het eerste vakje:

<input ... onfocus="if(this.value=='Naam'){this.value=''}">

Dan wordt het voor het totaal:

• Voorbeeld 2: http://developerscorner.nl/csshunter/tests/form-velden-2.htm

Nu blijft ingevuld wat ingevuld was, ook al klik je tussendoor in een ander vakje.

Maar de lege vakjes zijn nog steeds leeg!
Hier moet precies het omgekeerde gebeuren. Als je ergens anders klikt dan in het lege vakje, moet het lege vakje weer gevuld worden met de oude begintekst; en anders niet!
Ergens anders klikken (focus verliezen) is in html-taal "blur" (drabbig worden), en voor javascript is de instructie dan: "onblur".
Met weer een voorwaarde: als de tekst in het vakje niet bestaat (een lege value heeft) moet de value gevuld worden met de beginnaam. Daarmee wordt de opdracht voor het weer vullen van het eerste vakje:

<input ... onblur="if(this.value==''){this.value='Naam'}">

Dan wordt het voor het totaal:

• Voorbeeld 3: http://developerscorner.nl/csshunter/tests/form-velden-3.htm

Nu worden de lege vakjes weer automatisch gevuld met hun begintekst.
Dit gebeurt ook als je een vakje had ingevuld, de hele tekst wist, en dan naar een ander vakje gaat.

Om het nog wat mooier te maken, kan je de beginteksten grijzig maken, en de ingevulde teksten zwart (of andere kleuren). Met css worden alle kleuren in de vakjes eerst grijs gemaakt.
En dan zet je in de javascript-schakelaars erbij, dat het grijs zwart moet worden als er iets ingevuld is. Bijvoorbeeld voor de heenweg:

<input ... onfocus="if(this.value=='Naam'){this.value=''; this.style.color='black'}">

en voor de terugweg dan weer terug naar grijs als het vakje leeg was:

<input ... onblur="if(this.value==''){this.value='Naam'; this.style.color='gray'}">

Dan wordt het voor het totaal:

• Voorbeeld 4: http://developerscorner.nl/csshunter/tests/form-velden-4.htm

Nu zijn de beginteksten steeds grijs, en anders wordt de tekst zwart.

Klaar?
Nee ... want als mensen op deze manier iets kunnen verzenden, kan er (door speciale teksten in te tikken) ook "kwaadwillende code" naar je server gaan en daar onheil aanrichten.
Op de server *) moeten daarom veiligheidsmaatregelen getroffen worden, o.a. controleren van de binnengekomen teksten, voordat het verzondene door mag gaan.
Maar dat is een (php-)hoofdstuk apart.

Met vriendelijke groet,
CSShunter
____________
*) Er zijn ook javascript controle-mechaniekjes in omloop (bv. om de geldigheid van een e-mail adres te checken), maar dat gebeurt "client-side" (op de pc van de bezoeker) en is onveilig; want men kan javascript gewoon uitzetten en daarmee ontsnappen aan de controle. De controle moet de op de server gebeuren, zodat men niet onder de controle uit kan komen.

 

[lerrie]

Helemaal gelukt! top bedankt! Hoe kan ik hiervoor veiligheidsmaatregelen aantreffen?

Groeten

 

[csshunter]

Hoei!
Van te treffen veiligheidsmaatregelen, controle op inkomende formulier-resultaten en doorsturen naar een e-mail adres heb ik helemaal geen verstand.
Dit valt in de PHP-afdeling van het forum, misschien kan je daar de vraag stellen hoe je een formulier zo veilig mogelijk kan maken.
Of misschien heb je al wat als je er een Google'tje naar [validate form with php tutorial] aan waagt.

Met vriendelijke groet,
CSShunter