logo   HTML-Form og <input-types.




 Web-formForm-taggen er en container, hvori der kan opbygges "formularer" ved hjælp af input-tags og et par andre tags. Det eneste reelle krav til en form er, at den indeholder to input-tags og at den ene er et submit-tag.


Ved tryk på submit-knappen startes HTTP-POST eller HTTP-GET metoden. Fra hvert enkelt tag i formen, der indeholder både en "name"- og en "value"-attribut (indtastningsfeltet er altid automatisk value-attribut), hentes de to attributter til indsættelse i en array. Fra "submit" hentes dog kun "name" der får arrayen tilknyttet som value.


Ved GET-metoden sendes dataene til webserveren via browserens URL-felt, hvori de vises efter "?". Denne visning gør det også fleksibelt at ændre POST til GET for nemt at kunne se POST-data under kontrol.


Ved POST-metoden overføres dataene til webserveren og videresendes evt. derfra.


Vel fremme på webserveren skal dataene viderebehandles af et script knyttet til et "Server-side"-programmeringssprog. Alt efter opbygningen af formen kan dens data enten videresendes som mail eller benyttes til opdatering af database eller anden opgave.


Fieldset og Legend kan lægges udenom for at etablere en "kasse".

Kan sættes :valid / :invalid med css.




Form tag

Til Form-taggen er knyttet følgende attributter, der hver består af navn og værdi:


NavnOblOptBetegnelse
accept-charsetxAngivelse af det tegnsæt der skal anvendes for de overførte data.
actionxURL for hvor dataene skal sendes hen, når de ikke skal "ende" på webserveren. GET-data knyttes til den når anvendt.
autocompletexStyring af om der skal være knyttet autocomplete til tekstbærende input-types.
enctypexStyring af hvordan POST-data skal krypteres.
methodxAngivelse af om overførstel med POST eller GET metode.
namexIdent for formens navn. Anv. til at gøre formen entydig og til css-styring.
novalidatexAngivelse af, at formens data ikke skal valideres.
targetxAngivelse af hvor tilbagesvar fra webserveren skal vises.


<fieldset><legend>Legend</legend>
<form
accept-charset="ISO-8859-1"
action="demo_form.asp"
autocomplete="on"
enctype="multipart/form-data"
form method="POST"
name="myForm"
novalidate
target="_blank"
>
< input ..... >
.
</form>
</fieldset>




Input tag


Til Input-taggen kan indlejret i form-taggen ved hjælp af "type"-parameteren knyttes godt 20 forskellige felter, som brugeren kan indtaste data til. Bag de enkelte inddata-felter gemmer sig attributten "value". I en Form kan der være et ubegrænset antal input-tags hver især identificeret ved et entydigt navn i"name"-attributten (radioknapper, der hører til samme gruppe skal dog have samme "name". En form skal have tilknyttet en input-tag med attributten "submit", samt minimum 1 anden input-tag.


Ved overførsel til webserveren medtages for hvert felt dets "name"- og "value"-attributter bortset fra: For tomme checkboxe sendes ingen data, for checkede sendes name og value="on"; for tomme radioknapper sendes ingen data, for checkede sendes name og value; for submit-attributten sendes name og array med name og value for alle de input-data, der skal overføres.


Textarea er ikke et input-felt, men er alligevel et form-felt.


Input typeBeskrivelseEksempelKodeeksempelDOM
BUTTONKnap for tilknytning af javaScript-funktionalitet; f.eks onclick ...<input type="button" value="Knap" />
CHECKBOXIndsættelse af checkbox   <input type="checkbox" name="navn" value="værdi" checked="checked" disabled />
COLORÅbner "color picker" så brugeren kan vælge baggrundsfarve til feltet.<input type="color" name="minfarve" >
DATEtext-felt med tilknyttet funktionalitet så brugeren kan selektere dato i stedet for at skulle indtaste den. <input type="date" name="fdag" value="2013-03-16;" />
DATETIMEtext-felter til hhv dato og UTC-tid med tilknyttet funktionalitet så brugeren kan selektere dato og tidspunkt i stedet for at skulle indtaste dem.<input type="datetime" name="fdagtid" value="2013-03-16T10:22:00Z" />
DATETIME-LOCALtext-felter til hhv dato og lokal tid med tilknyttet funktionalitet så brugeren kan selektere dato og tidspunkt i stedet for at skulle indtaste dem.<input type="datetime-local" name="fdagtid" value="2013-03-16T10:22:00" />
EMAILtext-felt til indsættelse af Email-adresse.<input type="email" name="email" placeholder="mig@eksempel.dk" value="" />
FILEKnap der åbner OS-vinduet "Vælg fil". Den ønskede fil til upload vælges ved dobbletklik. Efter valg vises dens navn efter knappen og indsættes i name-attributten.<input type="file" name="files[] multiple" accept ="list of MIME types" required = "boolean" value = "string" />
HIDDEN"Container" til data brugeren ikke skal kunne se, men som skal sendes med til serveren. <input type="hidden" name="navn" value="værdi" />
IMAGEAngivelse af billede, der skal vises. Billedet kan anvendes på samme måde som Submit-typen.<input type="image" src="map.gif" alt="submit" value ="string" />
MONTHtext-felt med tilknyttet funktionalitet så brugeren kan selektere måned og evt. år i stedet for at skulle indtaste dem.<input type="month" name="navn" />
NUMBERtext-felt med tilknyttet funktionalitet så brugeren kan selektere et tal (evt. indenfor afgrænset sekvens) i stedet for at skulle indtaste det.<input type="number" name="" min="1920" max="2020" step="3" value="123" />
PASSWORDtext-felt til angivelse af password. Indtastede tegn vises som sorte prikker.<input type="password" name="navn" value="værdi" size="positivt heltal" required="boolsk" readonly="boolsk" placeholder="streng" pattern="regExp" maxlength="positivt heltal" />
RADIOTrykknapper til valg mellem 2 eller flere alternativer. Mand
Kvinde
<input type="radio" name="navn" value="kvinde" required="boolsk" checked /> Kvinde
RANGEGlider til brugeres valg af (evt. springvis) talværdi på skala.<input type="range" min="1" max="100" step="10" value="30" />
RESETKnap til sletning af alle data indtastet i formen<input type="reset" name="streng" value="Resæt"/>
SEARCHtext-felt med tilknyttet funktionalitet så brugeren kan foretage søgning.<input type="search" value="Søg"/>
SUBMITKnap med tilknyttet funktionalitet til at sende dataene i formen til serveren. Name anvendes som ident for arrayen med de øvrige formdata.<input type="submit" name="streng" value="Send"/>
TEXTFelt til indtastning af data på 1 linie. Danner grundlag for mange af de andre input-indtastningsfelter. Vises typisk, hvis browseren ikke understøtter den specifikke funktionalitet i de andre felter.<input type="text" name="navn" value="værdi" size="positivt heltal" required="boolsk" readonly="boolsk" placeholder="streng" pattern="regExp" maxlength="positivt heltal" />
TIMEtext-felt med tilknyttet funktionalitet så brugeren kan selektere hhv. timer og minutter i stedet for at skulle indtaste dem.<input type="time" name="mintid" />
URLtext-felt til indtastning af URL. Valideres ved "Send".<input type="url" name="hjemmeside" />
WEEKtext-felt med tilknyttet funktionalitet så brugeren kan selektere hhv. ugenummer og år i stedet for at skulle indtaste dem.
Ugens startdag varierer rundt omkring i verden:
Lørdag: Det meste af Mellemøsten.
Søndag: USA, Canada og Mexico
Mandag: Det meste af Europa og Asien (ISO 8601)
Det ser ud til, at funktionaliteten bag week er tilpasset denne situation.
<input type="week" name="ugeår" />
TEXTAREAFelt til angivelse af meddelelse, mailtekst etc. <textarea name="tekst" rows="4" cols="22" maxlength="50" wrap="hard" placeholder="kort forklaring" autofocus disabled readonly required>tekst</textarea>
SELECTDropdown menu til valg af option<select name="smag">
<option value=a>Vanilje
<option value=b selected>Jordbær
<option value=c>Rom
<option value=d>Pære
</select>




Label


Til hver enkelt input-tag (submit måske undgtaget) skal der knyttes et "label"-tag med en for input-tagget relevant tekst. Tekster placeres normalt foran input-taggen (ved checkboxe og radio-knapper dog ofte bagved).




Opbygning af form


Struktureringen af input-felterne i en form kan grundlæggende opbygges på 3 forskellige måder:


  1. Den lette
    Denne måde at opbygge formularer på er meget simpel og hurtig, men der kun små muligheder for at editere.


    <label>Fornavn:<input name="fornavn" type="text" /></label>
    <label>Efternavn:<input name="efternavn" type="text"/></label>
    <label>Adresse:<input name="adresse"type="text"/></label>

  2. Den komplekse
    Denne måde at opbygge formularer på (tabel med 3 kolonner - den midterste til mellemrum) kan være ganske kompleks, men giver de bedste muligheder for at editere.


    <table id="k2"> <!-- start omkring kontakt tabel k2 -->
    <tr><td class="tar">
    <form name="kontaktform" method="post">
    <label for="fornavn">Fornavn:</label></td><td class="bredde01"></td><td>
    <input class="bredde02" name="fornavn" type="text"/></label></td></tr>

    <tr><td class="tar">
    <label for="efternavnr">Efternavn:</label></td><td></td><td>
    <input class="bredde02"name="efternavn" type="text"/></label></td></tr>
    .
    .




Validering


Før data fra en form overføres til webserveren bør de valideres med javaScript eller jQuery.






















x
x