Forms
HTML
Børre Stenseth
Noen Elementer > Forms >Forms Hidden

Skjulte felt i Forms

Hva

Vi kan legge inn skjulte felt i en form. Det betyr at vi sender name-value par etter ønske.

Formen er enkel. Vi kan f.eks skrive:

<form action="https://borres.hiof.no/wep/commons/py/std.py"
      method="get">
  <div>
   <input type="hidden" name="navn" value="ole"/>
   <input type="submit" value="Send"/>
  </div>
</form>

Vi vil ikke se annet en Send-knappen:

og brukeren vil ikke se hva som sendes dersom han ikke inspiserer kildekoden til vevsiden.

Sesjoner

En anvendelse av skjulte felt er i sesjoner, eller dialoger mellom klient og tjener. Den protokollen som brukes, HTTP, er tilstandsløs. Det vil si at det finnes ingen hukommelse som husker fra en henvendelse til en annen. Vi må altså på en eller annen måte etablere en mekanisme som husker. Det er flere måter å ordne dette på. En måte er å bruke cookies, en annen er å bruke HTML5 objektet localstorage, se modulen Data i sandkassa .

Eksempelet nedenfor illustrerer hvordan et skjult felt kan brukes som hukommelse i en sesjon.

Start her https://borres.hiof.no/wep/commons/py/scriptsequence.py

Denne mekanismen med skjulte felt kan selvsagt kombineres med data som lagres i filer på tjeneren. Det skjulte feltet kan f.eks. identifisere en fil som akkumulerer data fra en sesjon.

Skriptet som kjører på serveren:

_scriptsequence.py

Pakke og sende

Vi kan bruke et skjult felt til å sende data vi plukker opp hvor som helst på en vevside. Nedenfor bruker vi en liste utenfor form-elementet som har egenskapen contenteditable. Vi bruker altså denne lista som et slags inputfelt og pakker innholdet i et skjult felt i formen når vi sender. Du kan skrive direkte etter Barcelona.

Hvem er dine favoritter
  1. FC Barcelona

HTML-fragmentet er slik:

<fieldset>
<legend> Hvem er dine favoritter</legend>
<ol id="favorittlist" contenteditable="true">
    <li>FC Barcelona</li>
</ol>
<form method="post" action="https://borres.hiof.no/wep/commons/py/std.py">
    <input type="hidden" name="favoritter" id="favoritter" value="hallo"/>
    <input type="submit" onclick="return collect()" value="Send inn"/>
</form>
</fieldset>

og javaskriptet er slik

 function collect()
 {
    var entries=document.querySelectorAll('#favorittlist li')
    var T='';
    for(ix=0;ix<entries.length;ix++)
        T+=entries[ix].innerHTML+",";
    T=T.replace(/<br>/g,'');
    if(T.length<2) 
        T="none ";
    document.getElementById("favoritter").value=
      T.substring(0,T.length-1);
    return true;
 }
[1]
Referanser
  1. HTML5 w3.org dev.w3.org/html5/spec/Overview.html 14-03-2011
Noen Elementer > Forms >Forms Hidden