Formulär - Annica Tiger

Allmänt om formulär
Formulär används till bl.a gästböcker, sökningar och annat "ifylleri" på web-sidan. Kopplat till formuläret finns oftast ett cgi-script (utom vid mailto-formulär) som hjälper till att läsa och tyda, samt presentera resultatet på web-sidan, se avsnittet Formulär med cgi. Det vanligaste användningsområdet för en vanlig hemsidessnickare är nog att ha ett vanligt mailto-formulär på hemsidan. Även vid javascript får man användning av att kunna lite om just hur man gör formulär, många javascript bygger på att det anropas via ett litet formulär på sidan. Ett exempel nedan på hur ett nytt litet fönster öppnas via ett klick en knapp genererad via ett litet formulär:


<form "*">

<input type="button" name="liten" value="Klicka här om du törs" onClick="remote=window.open ('din_fil.html', 'fjarris', 'width=450,height=200');">

</form>

De olika elementen
FORM
Du startat ett formulär med startaggen <form> och anslutar med sluttaggen </form>. Ett formulär kan innehålla knappar att trycka på, fält där data ska skrivas in och kryssboxar/radmenyer för olika val m.m. Men allt detta skapas innanför form-taggarna.

METHOD
method="get" eller post......två olika sätt att ange vilket protokoll som ska användas för att skicka formuläret
ACTION
action="här anges e-postadressen eller sökvägen/URL:en till cgi-scriptet" dvs. hur formuläret ska hanteras. Ett exempel är i mailto-formulär där man anger sin e-mailadress i action:
<form method="post" action="mailto:din@e-mail.se">
Action är obligatoriskt. I javascript där man kanske inte anger detta så bör man ange
<form action="*">.
I formulär utan script används enctype för att göra formuläret mer läsbart, se under Formulär för e-mail.
<form method="post" action="mailto:xx@xxx.se" enctype="text/plain">

INPUT
Skapar små fält där besökaren kan skriva in något eller kryssa för något. Input har ingen sluttagg. Vad för typ av input-ruta (kontroll) anges via attributet type. Du namnger fältet via name så att det går att *para* ihop fält med inskrivet och ivägskickat text/data.

När formuläret är ifyllt ska man kunna sända iväg det och det sker via:
SUBMIT
En knapp att trycka på för att skicka iväg all data får man genom att koda så här.
<input type="submit">
Du kan skriva egen text på knappen med hjälp av attributet value.
<input type="submit" value="Sänd!">
RESET
En radera knapp är bra om man skriver fel. Klickar man på den raderas alla formulär fält.
<input type="reset">
Du kan skriva egen text på knappen med hjälp av attributet value.
<input type="reset" value="Radera!">

LABEL
Elementet label tillkom i HTML 4.0 för att man skulle kunna sätta en etikett på en kontroll. I exempel ovan fick submit- och reset-knappen sin text via value. En vanlig input-ruta har inte haft någon motsvarighet tidigare. Numera kan man via label fixa detta.
<label> Adress <input type="text" name="adress"> </label>
Ett label-element per kontroll. Etiketten är/blir som innehållet mellan <label> och </label>, se exemplet ovan där etiketten är Adress.

TEXT
Attributet text ger ett enradigt fält där besökaren kan skriva in text.
<input type="text" name="adress">

Men som du ser syns det inte på sidan att det är ett fält avsett för att skriva in sin adress i. Du bör via klartext ange detta. Här nedan är ett exempel på ett mailto-formulär med en input-ruta som i exemplet ovan. Observera att det bara är ett demo :), så det går ej att sända iväg det.

<form method=post action="mailto:din@mail.se" enctype="text/plain"> Din adress: <input type="text" name="adress"> <input type="submit" value="Skicka!"> </form>

Du kan via olika attribut styra fältets utseende. Storleken, bredd i antal tecken, anges via size utelämnas det blir det standardstorlek. Jämför de två exemplen nedan. Det går att begränsa antal tecken som kan skrivas in i rutan via maxlength, där antal tillåtna tecken anges. Prova att försöka fylla i något långt i rutan nedan till vänster. Förtryckt text inne i fältet skapas med value. Ibland kanske man vill att det står något i input-rutan från start, ett värde besökaren kan ändra på om så behövs. Anger man inte value blir indatafältet tomt.
<input type="text" name="namn" size=10 maxlength=15> <input type="text" name="land" value="Sverige">

PASSWORD
Om du vill ha en ruta för lösenord. Dvs bokstäverna/tecknen man skriver in syns inte, bara som ****, prova själv och skriv i nedanstående ruta.
<input type="password" size="10" name="namn">

RADIO
Radioknappar anger ett flerval i form av runda "knappar". Endast en kan förbli "intryckt" åt gången till skillnad mot checkbox. Du grupperar även dem med attributet name, dvs du ger dem samma namn - här i exemplet är gruppen av radioknappar alla *döpta* till name="ort". Det val som kommer att visas är det som angetts i value. Här innebär inte value att något blir förskrivet på sidan som i exemplet ovan med input=text. Det är värdet som följer med så att det kan urskiljas i det ivägskickade datan vilket val som gjorts av gruppen radioknappar.
<input type="radio" name="ort" value="Bro"> Bro <input type="radio" name="ort" value="Kista"> Kista <input type="radio" name="ort" value="Boden"> Boden

Vill du ha en radio-button färdigmarkerad vid start lägg till checked.
<input type="radio" name="ort" value="Boden" checked> Boden

CHECKBOX
En checkbox är en liten ruta som besökaren kan "bocka" i, kan förekomma ensam men placeras ofta i en grupp. Flera alternativ kan väljas samtidigt till skillnad mot radio-knappar. Attributet name används för att gruppera dem, du ger hela gruppen samma namn. Value är valets värde som kommer att sändas iväg, se ovan under radio-knappar.
<input type="checkbox" name="fordon" value="bil"> Bil <input type="checkbox" name="fordon" value="cykel"> Cykel <input type="checkbox" name="fordon" value="mc"> MC Ska en eller flera checkbox vara förvalda används attributet checked.
<input type=checkbox name="fordon" value="bil" checked> Bil

SELECT
Select används för att skapa listor och menyer så att besökaren kan välja ett eller flera alternativ. Du namnger elementet med name. En rullgardinsmeny skapas genom att man utesluter värdet size eller anger det till 1. Varje möjligt val definieras med option, det är det värdet som sedan paras ihop med name i selection. Observera att select har en obligatorisk sluttagg - den för option är valfri och kan utelämnas.


<select name="Blommor" size="1">

<option>vitsippa

<option>ros

<option>vallmo

<option>maskros

<option>blåsippa

<option>tulpan

<option>krokus

</select>

Vill du ha något/några val förvalda anges detta med selected. Genom att i en lista ange attributet multiple kan besökaren göra flera val genom att samtidigt hålla nere CTRL-tangenten, testa nedan.

<SELECT NAME="Blommor" size="4" multiple>

<option>vitsippa

<option selected>ros

<option>vallmo

<option>maskros

<option>blåsippa

<option>tulpan

<option>krokus

</select>

TEXTAREA
Du kan skapa ett flerradigt textinmatnings-fält, som du ser har textarea en sluttagg som ska anges.
<textarea cols="x" rows="x" name="kommentar"> </textarea>
Attributet cols styr fältets vidd i antal tecken,
rows styr fältets höjd, antal rader,
name namnger just detta fält.
Har du problem med att besökarens enter-slag och mellanslag inte syns när de kommer fram till dig i ex. din mail-klient, ange wrap="hard" i textarea. Vill du ha färdig text inne i rutan skriver du in det mellan
<textarea cols="xx" rows="xx" name="xx">Här inne kan du skriva dina egna kommentarer.</textarea>

Formulär för e-mail
Du kan göra ett formulär på din sida för e-mail. Detta fungerar utan att ha cgi-scripts på servern. Fast, ska tilläggas det funkar inte speciellt bra i många webbläsare numera. Formulär som jobbar mot ett serverscript på servern är att föredra, läs mer om detta lite längre ned på sidan. Du kan använda attributet enctype i formulär utan script för att få det mer läsbart.
<form method="post" action="mailto:xx@xxx.se" enctype="text/plain">

Så här kan det se ut utan enctype="text/plain"
Name=Kalle+Anka&E-mail=kalle@anka.se&Kommentar=Denna+sida+E5r+bra+%21 osv.

Med attributet enctype presenteras det lite tydligare
Name=Kalle Anka
E-Mail=kalle@anka.se
Kommentar=Denna sida är bra!

Vill du se den färdiga produkten, klicka här.
Detta är ett fungerande exempel, så kläm dit några rader om du har några synpunkter på denna guide, förslag och tips på förbättringar. Vill du kopiera exemplet spara ned det på din hårdisk. Eller kika på koden med hjälp av View source/ visa källa. Glöm bara inte att ändra till din e-mailadress :).

Javascript kombinerat med formulär
Detta är en helt onödig men ganska rolig variant. PROVA och klicka på knappen nedan.

Koden för detta är enklast tänkbara. Infogas där du vill ha din knapp. Glöm inte alla blippor och hartassar.

<form action="*"> <input type="button" value="Skicka ett e-mail. Nu!!!" onClick="parent.location='mailto:din@mailadress.se'"> </form>

Eller om du vill att e-mailet ska ha subject-raden ifylld från start. Då kodar du så här
<a href="mailto:xxx@xxxx.se?subject=Snyggt!">E-mail</a>
Testa här Men notera att detta inte funkar med alla läsare/mailprogram. Räkna då kallt med att alla kan inte skicka mailet till dig, men valet är ditt ;). Fler tips om hur du kan fixa och trixa med subject, cc och annat kan du hitta här!

När man skickar ett mail via ett mailto-formulär *händer* det till synes ingenting, visst skickas mailet iväg men sidan laddas inte om eller texten försvinner inte i formuläret så besökaren kan förledas att tro att det inte blev sänt och klickar på submit-knappen igen. Många har efterfrågar hur man ska lösa detta! Ett förslag är att jobba lite med javascript. Lägg in formuläret i ett *pop-up*-fönster och när man tryckt på submit stängs fönstret ned. Du kan se ett demo här, Fjärrkontroll, klicka här! klicka på denna länk. Hur jag löste det? Här kan du se förklaringen. Tänk på att dem som avaktiverat javascript, förse dem med en vanlig mailto-länk på sidan. Här hittar du ett annat sätt att lösa det på!

Att *validera* formulär (se exemplet ovan) via javascript går alldeles utmärkt, här har du ett exempel till. I detta exempel kollas om korrekta uppgifter skrives in i de olika fälten. Det kanske inte är något för en ren nybörjare, men det är en demonstration av nyttan med javascript i kombination med formulär-hantering.

Sökmotorer
När vi ändå håller på. Om du vill imponera med att ha en inmatningslänk till en sökmotor.
<form method="get" action="http://search.yahoo.com/bin/search"> <input size="30" name="p"> <input type="submit" value="yahoo! search"> </form>

Eller en snygg bild istället för den tråkiga gråa submit-knappen? Byt ut raden
<input type="submit" value="Yahoo! Search">mot raden nedan
<input type="image" src="din_bild.gif" value="submit">

Detta att byta ut submit-knappen med en bild går bra men motsvarande finns ej om man vill byta ut reset-knappen, Radera. Då finns i HTML 4.0 ett nytt sätt, dock stödjs detta ej av alla browsers samt att det kanske inte blir lika snyggt i den del. Du byter ut:
<input type="reset"> mot:
<button type="reset" name="reset" value="reset"> <img src="din_bild.gif" alt="Radera"> </button>
Testa att *sudda* ut något du skrivit in nedan! Vill du ha en liknande för submit så byt ut type="reset" mot type="submit"

Går du till Google kan du fixa en egen sökmotor på din sajt samt en sökmotor ut på webben.

Formulär med cgi
Mailto-formulär i all ära, men det bästa är att ha ett cgi-baserat formulär, då spelar det ingen roll vilken browser din besökare har. Ett cgi-baserat formail-formulär pekar mot scriptet som hanterar informationen som skickas in till servern. Hur formuläret ska behandlas, vart det ska skickas osv. anges med type="hidden". Denna information är dock ej synlig i själva formuläret. För övrigt kodar du själva formuläret som vanligt (se exemplet på ett mailto-formulär ovan), det är oftast bara sökvägen via action och den information som ges via input type="hidden" som skiljer dem åt.
<form action="http://www.url.se/cgi-bin/script.pl" method="post"> <input type="hidden" name="recipient" value="din@email.se">

Är du osäker på sökvägen på just din server kontakta din internetleverantör eller nätverksansvarig. De exempel som ges här kan vara beroende på hur scriptet är skrivet, läs noga scriptets medföljande Readme.txt eller anvisningar. Är det ett script som din Internetleverantör tillhandahåller läs noggrant deras supportsidor.

Du kan ofta ge det postade formuläret ett förvalt subject, dvs rubrikraden förifylld med exempelvis:
<input type="hidden" name="subject" value="feedback">
Ofta finns möjligheten att skicka besökarna till en tack sida efter ifyllandet av formuläret med exempelvis:
<input type="hidden" name="redirect" value="http://url.se/tack.html">

Här kan du hitta Matt´s formmail-script och detta script är enkelt samt har bra medföljande Readme.txt-filer. Läs _dem_ noga. Under avsnittet CGI kan du läsa om hur du chmodar (ger rättigheter till filen) dina filer. Andra bra scripter kan du hitta här! Du som inte har tillgång till en egen cgi-bin låda på din server, misströsta icke! Det finns gratistjänster lite varstans på nätet - kika under avsnittet CGI så får du tips och råd.

Artikel om formulär publicerad i Internetguiden 1997

Formulär - bra till mycket!