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:

#! /usr/bin/python
# -*- coding: cp1252 -*-
import cgi
"""
 Demoscript for module Form - hidden in 
 http://www.it.hiof.no/~borres/ml
 
 Demonstrating hidden input
 
 B Stenseth, february 2005
"""
# skeleton HTML
HTMLPage="""<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>forms-demo</title>
    </head>
    <body>
        <h1>Dialog med tjeneren</h1>
        <p>Dette er melding nr: %s, og dette er mottatt tilsammen:</p>
        <p>
            %s
        </p>
        <form action="https://borres.hiof.no/wep/commons/py/scriptsequence.py" method="post">
        
        <input type="hidden" name="nummer" value="%s"/>
        <input type="hidden" name="sentence" value="%s"/>
        
        <input type="text" name="word" size="20"/>
        <input type="submit" value="Send igjen"/>
        </form>
        <p>inspiser kildekoden</p>
        <p><a href="javascript:history.go(-%s)">helt tilbake</a></p>
    </body>
</html>"""
#------------------------------------
form=cgi.FieldStorage()
print 'Content-type: text/html\n'
counter='0'
sentence=''
word=''
if form.has_key('nummer'):
    counter=str(int(form['nummer'].value)+1)
if form.has_key('word'):
    word=form['word'].value
sentence=word
if form.has_key('sentence'):
    sentence=form['sentence'].value+' '+word
print HTMLPage%(counter,sentence,counter,sentence,str(int(counter)+1))

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

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;
 }

Referanser

HTML5 w3.org dev.w3.org/html5/spec/Overview.html 14-03-2011