De skjulte input typer:

Transkript

1 Hvis man skal lave en html formular er der nogle felter til rådighed som kan benyttes, alt efter hvad output fra formularen skal være. Det felt som alle andre felter skal omkranses af er form tagget, som er en slags beholder for alle vores formular felter. Er dette Form tag ikke tilstede og omslutter alle andre formular felter, er der en ret stor chance for at hele formularen fejler. Foruden dette html tag for en formular er der naturligvis en del andre felter og output muligheder tilgængelige. De skjulte input typer: 1. <input type="hidden" name="recipient" /> 2. <input type="hidden" name="required" value=" " /> 3. <input type="hidden" name="subject" value="spørgsmål" /> 4. <input type="hidden" name="env_report" value="remote_host,remote_addr,http_user_agent" /> 5. <input type="hidden" name="redirect" value=" /> 6. <input type="hidden" name="sort" value="order:afs,navn, ,url,msg,besked" /> Forklaring på ovenstående: Ad 1) Det skjulte felt har en attribut der hedder recipient. Dette skal være tilstede i det omfang at du ønsker at modtage en mail når der bliver trykket på send knappen. Der skal naturligvis også indtastes en adresse. Ad 2) Det skjulte felt her, har attributten required og en value som definerer at det input som brugeren indtaster i feltet , skal medsendes i mailen. Ad 3) I dette skjulte felt er der sat den attribut der hedder subject, og en value som i dette tilfælde lyder Spørgsmål. Her sker der det at der i den der ankommer i din mailbox, har et emne der lyder Spørgsmål Ad 4) I det næste skjulte felt her, angives nogle oplysninger den udbyder hvor formularen blev afviklet hos. Så hvis brugeren har TDC som udbyder vil der i den oplysning du modtager stå at brugeren har TDC som udbyder. Der vil også stå nogle detaljer om den browser som brugeren har benyttet. Ad 5) Her sættes den side som brugeren skal omdirigeres over til når formularen er udfyldt og afsendt. Dette sker ved at sætte attributten til redirect og value (værdien) til en URL. Ad 6) I det sidste skjulte felt sættes den orden hvorpå man ønsker at sortere det input der kommer fra brugeren, ved at sætte attributten sort (engelsk forkortelse for sortering). 1

2 Synlige input felter: 1. input type="text" 2. input type="password" 3. textarea 4. input type="file" 5. input type="button" 6. input type="image" 7. input type="radio" 8. input type="checkbox" 9. input type="reset" 10. input type="submit" 11. select Ad 1) [input type= text ] Dette felt er det mest anvendte og giver brugeren mulighed for at udfylde et formular felt i én linie. Feltet her kan skrives på følgende måde: <input type="text" name="foo" size="40" maxlength="80" value="skriv dit navn" onfocus="if (this.value=='skriv dit navn') this.value = ''" onblur="if (this.value=='') this.value = 'Skriv dit navn'" /> Attributten name skal være valgt ud fra det som feltet omhandler, som i dette tilfælde hvor vi ønsker at brugeren skriver sit navn. Size betyder at der defineres en bredde formular feltet, altså en længde. Attributten maxlength bestemmer at der i feltet kun kan indtastes 80 tegn eller enheder inkl. mellemrum som også er en enhed. I værdi (value) skriver vi en tekst, som vil stå i formular feltet og derfor vil hjælpe brugeren i forståelsen af hvad feltet skal bruges til. Den sidste stump kode sætter en onfocus, og er ikke standard. Det der sker, er at før brugeren sætter sin mus ind og begynder at skrive så vil der stå Skriv dit navn, mens i det øjeblik hvor muse markøren sættes i feltet, så tømmes det for denne tekst. Ad 2) [input type= password ] Dette felt ligner til forveksling feltet af typen text, men i dette felt vil den tekst der skrives ind blive skjult med enten stjerner eller runde punkter, og vil derfor ikke være synlig. Feltet benyttes oftest hvor der indtastes kodeord eller på anden måde noget som synligt skal skjules under indtastningen. Ad 3) [textarea ] Feltet textarea er en mulighed for brugeren for at indtaste noget tekst som er så lang at skal kunne skrives på flere linier. Hvis der indtastes mere tekst end hvad der er umiddelbart er plads til vil der komme en scrollbar inde i feltet. Måden man skriver dette på er sådan: <textarea name="message" rows="5" cols="40"></textarea> Name er her igen ensbetydende med det output vi gerne vil have fra brugeren, i dette tilfælde en besked i en eller anden form og måske varierende længde. Rows betyder i denne sammenhæng, hvor mange rækker der skal være mulighed for, altså hvor høj selve textarea feltet skal være. Cols (kolonner på Dansk) 2

3 definerer hvor bredt dette felt skal være. Bemærk at textarea feltet sluttes henne for enden med sit eget slut-tag. Ad 4) [input type= file ] Feltet her, af typen file, vises på en html side som et felt hvor brugeren typisk kan vælge at klikke på en knap ved siden af hvor der står Gennemse (eller browse på engelsk) for så at finde en fil på sin egen computer og vedlægge denne fil som en vedlagt billede eller dokument. Koden for denne type ser sådan ud: <input type="file" size="40" name="file" /> Ad 5) [input type= button ] Den næste type er input typen button. Denne type gør os i stand til at sætte en handling på vores knap (button betyder knap på Dansk) og kan som sådan benyttes til at sætte som den knap der skal afsende vores formular input. <input type="button" value="afsend" onclick="javascript:location.href='ny_side.html'; return false" /> Som det ses, defineres typen til at være button, hvilket gør at vi f.eks. kan sætte en onclick javascript funktion på denne knap. I dette tilfælde vil brugeren efter klikket på knappen blive sendt over til en side der hedder ny_side.html. Desuden sættes en attribut på som siger at dette først skal ske ved tryk på knappen. Ad 6) [input type= image ] Denne input type er igen en knap, som brugeren oftest vil opleve når denne ønsker at afsende de input man har tastet ind i formularen. Det specifikke ved denne type er at man lave lidt specielt ved designet og benytte et billede eller anden grafik til at illustrere knappen, blot vil denne knap f.eks. passe bedre ind i det overordnede design. Koden ser sådan ud: <input type="image" src="knap.gif" /> Ad 7) [input type= radio ] Radio buttons er typisk en gruppe af knapper som egentlig ikke ligner knapper, men typisk vil bestå af flere radio buttons. Den mest typiske brug er hvor brugeren skal svare på et spørgsmål, som kun svares enten positivt eller negativt, eller 50% mulighed for det ene svar eller 50% mulighed for det andet svar <input type="radio" name="status" value="gift" checked="checked" /> <input type="radio" name="status" value="enlig" /> I ovenstående eksempel bliver brugeren bedt om at sætte en markering i enten det ene felt eller det andet felt. Begge felter kan således ikke være udfyldt på samme tid. Der hvor man sætter begge radio buttons som en del af samme gruppe, er med attributten name, som i dette tilfælde er status. Desuden er der her i dette tilfælde valgt, at der som standard skal være sat en markering i feltet gift, ved at indsætte attributten checked. 3

4 Ad 8) [input type= checkbox ] Checkbokse er så modsatte mulighed for brugeren at svare på flere ting på samme tid, ved at sætte markeringen i flere checkbokse samtidigt. Når man får vist en checkboks på en html side, vil den være firkantet og der kan sættes et flueben i den individuelle checkboks. Ligesom med radio buttons, kan man ved at indskrive attributten checked som standard vælge at krydse det felt af som er mest sandsynlig for brugeren at klikke af. Attributten kan også ndlades, hvis man ønsker det. <input type="checkbox" name="child" checked="checked" /> <input type="checkbox" name="grandchild" checked="checked" /> I dette eksempel beder vi brugeren svare på om denne har børn og børnebørn. Hvis man sætter hak i den ene udelukker det altså ikke at der kan sættes hak i den anden også (som det var tilfældet med vores radio buttons). Igen sætter vi som standard et hak på vegne af brugeren, så begge felter er markeret med et flueben. Ad 9) [input type= reset ] Reset knappen er en knap som kan klikkes på hvorved der sker en handling. I dette tilfælde renser den alle formular felter for input, hvis man har behov for at indtaste al info på ny. <input type="reset" value="rens felterne" /> Value er her den tekst der står på selve knappen. Ad 10) [input type= submit ] Submit knappen er den knap der oftest benyttes til at afsende en formular med. Ved klik på denne knap vil alle de oplysninger der er indtastet i felterne blive sendt af sted og bliver så behandlet for til sidst at ende som et output et eller andet sted, enten i din mailbox eller i en database. Koden kunne f.eks. se sådan ud: <input type="submit" value="send" /> Eller med en grafik i stedet for den normale html knap <input type="image" src="submit.gif" alt="send" onclick="form.submit()"> Ad 11) [input type= select ] Select typen gør brugeren i stand til at træffe et valg ud fra en række valgmuligheder som typisk vil være vist som et rullegardin. Koden for en select med et rullegardin ser sådan ud: <select name="alder" size="1"> <option>vælg</option> <option value="teen">10-20</option> <option value="twenty">21-30</option> <option value="therty">31-40</option> <option value="fourty">41-50</option> <option value="fifty"> 50+</option> </select> 4

5 I ovenstående select, skal der træffes et valg på baggrund af brugerens alder, hvor value er en definition som dækker over en alders gruppe, som f.eks. teen. Hvis brugeren vælger denne mulighed er brugeren en person indenfor alderen år. I næste select, kan der vælges én eller flere muligheder, ved at give select tagget en attribut der hedder multiple, hvorved brugeren kan vælge flere muligheder ved at holde Shift tasten nede på tastaturet mens man vælger. I nedenstående eksempel ønsker vi at finde ud af hvilke ønskejob brugeren har. <select name="alder" size="3" multiple="multiple"> <option>brandmand</option> <option>politibetjent</option> <option>jagerpilot</option> <option>galopjockey</option> <option>hjernekirrurg</option> <option>mesterbokser</option> <option>fodboldstjerne</option> </select> I den sidste mulighed for select, vil vi gerne vide hvilket rejsemål brugeren ønsker for sin ferie. I denne select er der lavet en kategori inddeling, som inddeler vores muligheder i nogle overordnede kategorier. En kategori hedder f.eks. Norden og her kan så vælges imellem de nordiske lande. Bemærk html koden optgroup omslutter vores options, med et start og slut-tag. <select name="rejser" size="1"> <optgroup label="norden"> <option>norge</option> <option>sverige</option> <option>finland</option> <option>island</option> </optgroup> <optgroup label="sydeuropa"> <option>spanien</option> <option>portugal</option> <option>italien</option> <option>grækenland</option> </optgroup> </select> Form tagget For at formularen overhovedet skal kunne virke, skal alle ovenstående valgte input typer være omsluttet af et form-tag som definerer hvilken metode der skal bruges til at sende oplysningerne videre til mig som modtager og hvilken slags server eller scripting sprog der skal behandle de input brugeren har foretaget. Koden ser i sin enkle form sådan ud: <form method="post" action="[kald til et script, som behandler data fra formularen]"> Alle andre input felter kommer her imellem </form> 5

6 Og hvis denne form skulle kobles til et domæne som ligger hos en udbyder som f.eks. One.com ville koden se ud som nedenstående, med indsat action hvor der rettes henvendelse ud til et cgi script som ligger ude på one.com serverne. <form method="post" action=" Alle andre input felter kommer her imellem </form> 6