Forms

Hva

Med dagens webteknologi kan vi ved hjelp av litt javascript-koding plukke et hvilket som helst sett innhold fra en vevside og sende det til tjeneren i passelig format. Forms er i dette perspektivet en automatisering som tar et skjema, pakker det pent inn og sender til tjeneren i HTTP-format. Skjemaet er i denne sammenheng en del av en vevside, et form-element.

HTML5 innfører noen nye mulige felter i skjemaet og noen nye egenskaper ved feltene. Vi skal se litt på forms generelt og spesielt på HTML5-egenskapene. Merk at dette er et felt der nettleserne har forskjellig status når det gjelder implementasjon av HTML5-forms.

Oversikt

Vi kjenner følgende form-felter fra tidligere (X)HTML:

<input type="text">
<input type="password">
<textarea>
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="submit">
<input type="reset">
<input type="hidden">
<select><option>

De viktigste nye er

<input type="email">
<input type="url">
<input type="number">
<input type="range">
<input type="search">
<input type="color">
<input type="date|month|week|time|datetime|datetime-local">

Det er også innført en rekke attributter, litt forskjellig for de enkelte input-typene.

Form

Selve form-elementet som pakker inn et skjema har følgende attributter

action: URL som sier hvor data skal sendes
method: get | post | head. HTTP metoden som skal brukes
name: navnet på formen
enctype: application/x-www-form-urlencoded | multipart/form-data | text/plain. Hvordan data skal kodes før de sendes

Nye i HTML5

autocomplete: on | off. Sier om autocomplete skal skrus på
novalidate:novalidate. Hvis den finnes så skal ikke validering finne sted

I tillegg kan en form ha "standardegenskapene" for HTML5 elementer, og genererer standard begivenheter.

Eksempel1

Et enkelt eksempel uten noen HTML5-egenskaper.

HTML-fragmentet er slik:

<fieldset style="width:200px">
<legend>Log in</legend>
<form action="https://borres.hiof.no/wep/commons/py/std.py"
      method="get">
     <p><label>Fornavn:</label><input type="text" name="fnavn"/></p>
     <p><label>Etternavn:</label><input type="text" name="enavn"/></p>
     <p class="submit"><input type="submit" value="Send"/></p>
</form>
</fieldset>

og følgende stilsett er brukt:

label
{width:4em; float:left; text-align:right;margin-right:0.5em; display: block}
.submit input
{margin-left: 4.5em;}

Svar fra server

Python

Python skriptet som er brukt i denne modulen og de følgende form-modulene:
https://borres.hiof.no/wep/commons/py/std.py

#! /usr/bin/python3
"""
leser alle parametere og skriver dem tilbake innpakket i en enkel HTML-side
"""
import cgi
import cgitb; cgitb.enable()
HTML_PAGE="""<!DOCTYPE HTML>
<html>
<head>
  <title>std</title>
  <meta charset="UTF-8"/>
</head>
<body><h2>Dette fant jeg</h2>
<hr/>
<pre>%s</pre>
<hr/>
<div><a href="javascript:history.back()">Tilbake</a></div>
</body>
</html>
"""
form=cgi.FieldStorage()
print ('Content-type: text/html\n')
result=''
for key in form.keys():
    val=form.getvalue(key,'')
    if isinstance(val,list):
        # multiple selections in checkbox
        s=''
        for v in val:
            s=s+','+str(v)
        result+=key+':'+s[1:]+'\n'
    else:
        result+=key+': '+str(form[key].value)+'\n'
if len(result)==0:
    result='ingenting'
print (HTML_PAGE%result)

aspx

Alternativt kan du bytte ut action attributten i eksemplene med
http://donau.hiof.no/borres/dn/stdresponse/answer.aspx
og få et tilsvarende svar fra en Microsoft server. Selve fila som svarer er i dette tilfellet slik

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="answer.aspx.cs" Inherits="answer" %>

og koden som kjører, answer.aspx.cs, er slik

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class answer : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // what method: get, post 
        String method = Request.HttpMethod;
        NameValueCollection p = null;
        if (method.ToLower().CompareTo("get") == 0)
            p = Request.QueryString;
        else //post
            p = Request.Form;       
        
        String[] pkeys = p.AllKeys;
        String report=@"<html>
<head><title>report</title></head>
<body>
<h2>Fant dette:</h2>
<hr/>
<table cellpadding=""5px"">
{0}
</table>
<hr/>
<a href=""javascript:history.back()"">Tilbake</a>
</body>
</html>";
        String what="";
        for(int ix=0;ix<pkeys.Length;ix++)
            what += "<tr><td>" + pkeys[ix] + 
                    "</td><td>" + p[pkeys[ix]]+
                    "</td></tr>";
        Response.Write(String.Format(report,what));
    }
}

Eksempel2

Et enkelt eksempel med passord.

HTML-fragmentet er slik:

<fieldset style="width:200px">
<legend>Log in</legend>
<form action="https://borres.hiof.no/wep/commons/py/std.py"
      method="get">
     <p><label>Navn:</label><input type="text" name="navn"/></p>
     <p><label>Passord:</label><input type="password" name="pass"/></p>
     <p class="submit"><input type="submit" value="Send"/></p>
</form>
</fieldset>

Sikkerhet

Merk at passord ikke må sendes slik som i eksempelet over. Hvis du forsøker vil du se at passordet blir stående i adressefeltet i nettleseren. Vi kan bruke method="POST" i stedet for GET for å unngå dette. Selv om vi gjør dette transporteres passordet ukryptert over nettet. For å sikre oss bedre bør vi bruke https, secure connection.

Referanser

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