HTML – 3. økt HiO IT20 Onsdag 11.11.04
Plan Repetisjon/spørsmål fra 4.11 Skjemaer – (forms) Oppgaver Oppsummering
Skjemaer (i) Grunnlag for interaktivitet på nettet Brukeren kan utveksle data med andre brukere
Skjemaer (ii) Tag-struktur: Hovedtag Input-bokser <FORM>…</FORM> <INPUT TYPE= Text Textarea Checkbox Radio Option Submit Reset
Skjemaer (iii) <FORM> Et navn Method – sending (POST) eller mottak (GET) av data ACTION sende data via e-post eller aktivere hjemmeside <FORM Name=”skjema” METHOD=POST ACTION= ”mailto:fao@acm.org” onSubmit=window.alert (’Skjemaet sendes pr e-post’)>
Skjemaer (iv) Eksempler: <INPUT TYPE=”text” NAME=”tittel” SIZE=50> <TEXTAREA NAME=”beskrivelse” ROWS=”5”></TEXTAREA> <INPUT NAME=”barn” TYPE=”checkbox”>Barn
Skjemaer (v) <INPUT NAME =”nasjon” TYPE=”radio” VALUE=”norsk”>Norsk Radioknapper: Kun en verdi gjelder Alle knapper må ha samme navn
Skjemaer (vi) ”Kombobox” – flere valgmuligheter <SELECT NAME=”sjanger” SIZE=”0”> <OPTION>Krim <OPTION>Fantasy <OPTION>Science Fiction <OPTION>Grøsser </SELECT>
Skjemaer (vii) INPUT NAME=”submit” TYPE=”submit” VALUE=”Send skjema”> INPUT NAME=”reset” TYPE=”reset” VALUE=”Nullstill skjema”>
Skjemaer (viii) <!Dokumenteksempler for skjemaer> <html> <head> <title> Eksempel på skjema</title> </head> <body> <h1>Her kommer et eksempel på registreringsskjema</h1> <h2>HTML-registrering</h2> <p> <FORM METHOD=POST ACTION="mailto:fao@acm.org" enctype="text/plain" onSubmit="window.alert ('Skjemaet sendes pr e-post, selv om det tilsynelatende ikke skjer noe sm helst')"> Tittel: <br> <INPUT TYPE="text" NAME="tittel" SIZE=50><p> Beskrivelse:<BR> <TEXTAREA NAME="beskrivelse" ROWS="5" SIZE="50"></TEXTAREA><p> Målgruppe: <INPUT NAME="barn" TYPE="checkbox"> Barn <INPUT NAME="unge" TYPE="checkbox">Unge <INPUT NAME="voksne" TYPE="checkbox"> Voksne<p> Nasjonalitet: <INPUT NAME="nasjonalitet" TYPE="radio" VALUE="norsk"> Norsk <INPUT NAME="nasjonalitet" TYPE="radio" VALUE="nordisk"> Nordisk <INPUT NAME="nasjonalitet" TYPE="radio" VALUE="amerikansk"> Amerikansk <INPUT NAME="nasjonalitet" TYPE="radio" VALUE="annet"> Annet<p> Sjanger: <SELECT NAME="sjanger" SIZE="0"> <OPTION>Krim <OPTION>Fantasy <OPTION>Science Fiction <OPTION>Grøsser </SELECT><p> <INPUT NAME="submit" TYPE="submit" VALUE="Send skjema"> <INPUT NAME="reset" TYPE="reset" VALUE="Nullstill skjema"> </FORM> </body> </html>
Oppgave Lag minst to skjemaer basert på mønstret og detaljene over Test skjemaene mot egen postkasse