Forms
HTML
Børre Stenseth
Noen Elementer >Forms

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.

Log in

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

_std.py

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

_answer.aspx.cs

Eksempel2

Et enkelt eksempel med passord.

Log in

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.

[1]
Referanser
  1. HTML5 w3.org dev.w3.org/html5/spec/Overview.html 14-03-2011
Noen Elementer >Forms